@ledgerhq/lumen-ui-rnative 0.1.24 → 0.1.26

package/src/lib/Components/DotSymbol/DotSymbol.tsx

@@ -6,15 +6,13 @@ import type { SpotSize } from '../Spot';
 import { Box } from '../Utility';
 import type { DotSymbolPin, DotSymbolProps, DotSymbolSize } from './types';
 
-type BorderRadiusKey = 'xs' | 'sm' | 'md' | 'lg' | 'full';
-
-const shapeRadiusMap: Record<DotSymbolSize, BorderRadiusKey> = {
-  8: 'xs',
-  10: 'xs',
-  12: 'xs',
-  16: 'sm',
-  20: 'sm',
-  24: 'md',
+const dotSquareRadiusMap: Record<DotSymbolSize, number> = {
+  8: 2,
+  10: 3,
+  12: 4,
+  16: 5,
+  20: 6,
+  24: 8,
 };
 
 const offsetBySize: Record<DotSymbolSize, number> = {
@@ -35,6 +33,7 @@ export const mediaImageDotSizeMap: Record<MediaImageSize, DotSymbolSize> = {
   40: 16,
   48: 20,
   56: 24,
+  64: 24,
 };
 
 export const spotDotSizeMap: Record<SpotSize, DotSymbolSize> = {
@@ -75,9 +74,7 @@ const useStyles = ({
     (t) => {
       const sizeValue = t.sizes[`s${size}` as keyof typeof t.sizes] as number;
       const radius =
-        shape === 'circle'
-          ? t.borderRadius.full
-          : t.borderRadius[shapeRadiusMap[size]];
+        shape === 'circle' ? t.borderRadius.full : dotSquareRadiusMap[size];
       const pinOffset = getPinOffset(pin, size);
 
       return {
@@ -142,17 +139,19 @@ export const DotSymbol = ({
       accessibilityLabel={alt}
       {...rest}
     >
-      {children}
-      <Box style={styles.dot}>
-        {!error && (
-          <Image
-            source={{ uri: src }}
-            style={styles.image}
-            accessible={false}
-            onError={() => setError(true)}
-            testID='dot-symbol-img'
-          />
-        )}
+      <Box style={{ alignSelf: 'flex-start', position: 'relative' }}>
+        {children}
+        <Box style={styles.dot}>
+          {!error && (
+            <Image
+              source={{ uri: src }}
+              style={styles.image}
+              accessible={false}
+              onError={() => setError(true)}
+              testID='dot-symbol-img'
+            />
+          )}
+        </Box>
       </Box>
     </Box>
   );

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

@@ -41,6 +41,7 @@ export const SizeShowcase: Story = {
       <MediaImage src={exampleSrc} alt='Size 40' size={40} />
       <MediaImage src={exampleSrc} alt='Size 48' size={48} />
       <MediaImage src={exampleSrc} alt='Size 56' size={56} />
+      <MediaImage src={exampleSrc} alt='Size 64' size={64} />
     </Box>
   ),
 };

package/src/lib/Components/MediaImage/MediaImage.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useState } from 'react';
 import { Image, StyleSheet } from 'react-native';
 import { useStyleSheet } from '../../../styles';
+import type { LumenStyleSheetTheme } from '../../../styles';
 import { Box } from '../Utility';
 import type { MediaImageProps, MediaImageSize, MediaImageShape } from './types';
 
-type BorderRadiusKey = 'xs' | 'sm' | 'md' | 'lg' | 'full';
+type BorderRadiusKey = keyof LumenStyleSheetTheme['borderRadius'];
 
 const borderRadiusMap: Record<MediaImageSize, BorderRadiusKey> = {
   12: 'xs',
@@ -15,6 +16,7 @@ const borderRadiusMap: Record<MediaImageSize, BorderRadiusKey> = {
   40: 'md',
   48: 'md',
   56: 'lg',
+  64: 'lg',
 };
 
 const useStyles = ({

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

@@ -1,6 +1,6 @@
 import type { StyledViewProps } from '../../../styles';
 
-export type MediaImageSize = 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56;
+export type MediaImageSize = 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64;
 
 export type MediaImageShape = 'square' | 'circle';
 

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

@@ -1,3 +1,4 @@
+import { StyleSheet } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { useCommonTranslation } from '../../../i18n';
 import type { LumenTextStyle } from '../../../styles';
@@ -24,17 +25,20 @@ export const Spinner = ({
   lx = {},
   size = 16,
   color,
+  style,
   ref,
   ...props
 }: SpinnerProps) => {
   const { t } = useCommonTranslation();
   const { theme } = useTheme();
   const resolvedColorStyle = useResolveTextStyle({ color } as LumenTextStyle);
+  const flatStyle = StyleSheet.flatten(style);
+  const styleColor = flatStyle?.color;
   const strokeColor =
-    resolvedColorStyle?.color ?? color ?? theme.colors.text.base;
+    resolvedColorStyle?.color ?? color ?? styleColor ?? theme.colors.text.base;
 
   return (
-    <Box ref={ref} lx={{ flexShrink: 0, ...lx }} {...props}>
+    <Box ref={ref} lx={{ flexShrink: 0, ...lx }} style={style} {...props}>
       <Spin>
         <Svg
           width={size}

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

@@ -1,12 +1,6 @@
 import { BlurView } from '@sbaiahmed1/react-native-blur';
 import type { ReactNode } from 'react';
-import {
-  Children,
-  isValidElement,
-  useCallback,
-  useEffect,
-  useRef,
-} from 'react';
+import { Children, isValidElement, useEffect, useMemo, useRef } from 'react';
 import type { LayoutChangeEvent } from 'react-native';
 import { Platform, StyleSheet, Text, View } from 'react-native';
 import Animated, {
@@ -19,6 +13,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { useStyleSheet, useTheme } from '../../../styles';
 import { useTimingConfig } from '../../Animations/useTimingConfig';
+import { triggerHapticFeedback } from '../../Haptics';
 import { Placeholder } from '../../Symbols';
 import { Box, Pressable } from '../Utility';
 import { TabBarContextProvider, useTabBarContext } from './TabBarContext';
@@ -51,14 +46,16 @@ const useTabBarItemAnimations = ({ isActive }: { isActive: boolean }) => {
       50,
       withTiming(isActive ? 1 : 0, activeTimingConfig),
     );
-    return () => cancelAnimation(activeProgress);
   }, [isActive, activeProgress, activeTimingConfig]);
 
+  useEffect(() => () => cancelAnimation(activeProgress), [activeProgress]);
+
   const onPressIn = () => {
     pressProgress.value = withTiming(0.9, pressInTimingConfig);
   };
 
   const onPressOut = () => {
+    triggerHapticFeedback('light');
     pressProgress.value = withSequence(
       withTiming(0.95, { duration: 0 }),
       withTiming(1, pressOutTimingConfig),
@@ -112,7 +109,7 @@ const useTabBarPillLayout = ({
     easing: 'easeInOut',
   });
 
-  const getActiveIndex = useCallback((): number => {
+  const activeIndex = useMemo(() => {
     return Children.toArray(children).findIndex((child) => {
       if (isValidElement<TabBarItemProps>(child)) {
         return child.props.value === active;
@@ -121,6 +118,9 @@ const useTabBarPillLayout = ({
     });
   }, [active, children]);
 
+  const activeIndexRef = useRef(activeIndex);
+  activeIndexRef.current = activeIndex;
+
   const onLayout = (e: LayoutChangeEvent): void => {
     const { width, height } = e.nativeEvent.layout;
     const count = Children.count(children);
@@ -131,7 +131,7 @@ const useTabBarPillLayout = ({
 
     if (!hasLayoutRef.current) {
       hasLayoutRef.current = true;
-      const index = getActiveIndex();
+      const index = activeIndexRef.current;
       if (index >= 0) {
         pillProgress.value = index * slotWidth;
       }
@@ -140,14 +140,15 @@ const useTabBarPillLayout = ({
 
   useEffect(() => {
     if (!hasLayoutRef.current) return;
-    const index = getActiveIndex();
-
-    if (index >= 0 && itemWidth.value > 0) {
-      pillProgress.value = withTiming(index * itemWidth.value, timingConfig);
+    if (activeIndex >= 0 && itemWidth.value > 0) {
+      pillProgress.value = withTiming(
+        activeIndex * itemWidth.value,
+        timingConfig,
+      );
     }
+  }, [activeIndex, itemWidth, pillProgress, timingConfig]);
 
-    return () => cancelAnimation(pillProgress);
-  }, [itemWidth, pillProgress, getActiveIndex, timingConfig]);
+  useEffect(() => () => cancelAnimation(pillProgress), [pillProgress]);
 
   const animatedPillStyle = useAnimatedStyle(
     () => ({

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

@@ -9,7 +9,15 @@ const meta: Meta<typeof Tag> = {
   argTypes: {
     appearance: {
       control: 'select',
-      options: ['base', 'gray', 'accent', 'success', 'error', 'warning'],
+      options: [
+        'base',
+        'gray',
+        'accent',
+        'accent-subtle',
+        'success',
+        'error',
+        'warning',
+      ],
     },
     size: {
       control: 'radio',
@@ -47,6 +55,7 @@ export const AppearanceShowcase: Story = {
         <Tag appearance='base' label='Base' />
         <Tag appearance='gray' label='Gray' />
         <Tag appearance='accent' label='Accent' />
+        <Tag appearance='accent-subtle' label='Accent subtle' />
         <Tag appearance='success' label='Success' />
         <Tag appearance='error' label='Error' />
         <Tag appearance='warning' label='Warning' />
@@ -56,6 +65,7 @@ export const AppearanceShowcase: Story = {
         <Tag appearance='base' label='Base' icon={Check} />
         <Tag appearance='gray' label='Gray' icon={Check} />
         <Tag appearance='accent' label='Accent' icon={Check} />
+        <Tag appearance='accent-subtle' label='Accent subtle' icon={Check} />
         <Tag appearance='success' label='Success' icon={Check} />
         <Tag appearance='error' label='Error' icon={Check} />
         <Tag appearance='warning' label='Warning' icon={Check} />

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

@@ -23,6 +23,7 @@ const useStyles = ({
         base: t.colors.bg.mutedTransparent,
         gray: t.colors.bg.mutedTransparent,
         accent: t.colors.bg.accent,
+        'accent-subtle': t.colors.bg.activeSubtle,
         success: t.colors.bg.success,
         error: t.colors.bg.error,
         warning: t.colors.bg.warning,
@@ -32,6 +33,7 @@ const useStyles = ({
         base: t.colors.text.base,
         gray: t.colors.text.muted,
         accent: t.colors.text.onAccent,
+        'accent-subtle': t.colors.text.active,
         success: t.colors.text.success,
         error: t.colors.text.error,
         warning: t.colors.text.warning,

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

@@ -6,7 +6,14 @@ export type TagProps = {
   /**
    * The appearance of the tag.
    */
-  appearance?: 'base' | 'gray' | 'accent' | 'success' | 'error' | 'warning';
+  appearance?:
+    | 'base'
+    | 'gray'
+    | 'accent'
+    | 'accent-subtle'
+    | 'success'
+    | 'error'
+    | 'warning';
   /**
    * The icon of the tag.
    */

package/src/lib/Components/index.ts

@@ -4,12 +4,15 @@ export * from './AmountInput';
 export * from './Avatar';
 export * from './Banner';
 export * from './BottomSheet';
+export * from './DotCount';
+export * from './DotIndicator';
 export * from './Button';
 export * from './Card';
 export * from './CardButton';
 export * from './ContentBanner';
 export * from './Checkbox';
 export * from './Divider';
+export * from './DotIcon';
 export * from './DotSymbol';
 export * from './Icon';
 export * from './IconButton';