@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.45

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import { Banner } from '../Banner';
-import { Search } from './Search';
+import { useState } from 'react';
+import { View } from 'react-native';
+import { Search, type SearchProps } from './Search';
 
 const meta: Meta<typeof Search> = {
   component: Search,
@@ -14,25 +15,103 @@ const meta: Meta<typeof Search> = {
       },
     },
   },
+  argTypes: {
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text when input is empty',
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Error message to display below input',
+    },
+    editable: {
+      control: 'boolean',
+      description: 'Whether the input is editable',
+    },
+    hideClearButton: {
+      control: 'boolean',
+      description: 'Hide the clear button',
+    },
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof Search>;
 
-export const WebPreviewWarning: Story = {
-  render: () => (
-    <Banner
-      appearance='warning'
-      title='Unsupported previews on web'
-      description='For this component, previewing stories is currently only supported on mobile. Reanimated causes compatibility issues with the web preview, so for now, please test on-device. We plan to add screenshots or embed Expo Snack in the future.'
+const SearchStory = (args: SearchProps & { initialValue?: string }) => {
+  const [query, setQuery] = useState(args.initialValue ?? '');
+
+  return (
+    <View className='flex min-h-400 items-center justify-center p-24'>
+      <View className='w-full max-w-320'>
+        <Search
+          {...args}
+          value={query}
+          onChangeText={setQuery}
+          onClear={args.onClear}
+        />
+      </View>
+    </View>
+  );
+};
+
+export const Base: Story = {
+  render: (args) => <SearchStory {...args} />,
+  args: {
+    placeholder: 'Search products',
+    editable: true,
+    hideClearButton: false,
+  },
+};
+
+export const WithContent: Story = {
+  render: (args) => <SearchStory {...args} initialValue='Search text' />,
+  args: {
+    placeholder: 'Search products',
+    editable: true,
+    hideClearButton: false,
+  },
+};
+
+export const WithError: Story = {
+  render: (args) => <SearchStory {...args} initialValue='Invalid search' />,
+  args: {
+    placeholder: 'Search products',
+    errorMessage: 'Search term is invalid',
+    editable: true,
+    hideClearButton: false,
+  },
+};
+
+export const DisabledSearch: Story = {
+  render: (args) => <SearchStory {...args} initialValue='Disabled search' />,
+  args: {
+    placeholder: 'Search products',
+    editable: false,
+    hideClearButton: false,
+  },
+};
+
+export const WithHiddenClearButton: Story = {
+  render: (args) => <SearchStory {...args} initialValue='Search text' />,
+  args: {
+    placeholder: 'Search products',
+    editable: true,
+    hideClearButton: true,
+  },
+};
+
+export const WithClearCallback: Story = {
+  render: (args) => (
+    <SearchStory
+      {...args}
+      initialValue='Click clear to see callback'
+      onClear={() => alert('Search cleared!')}
     />
   ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          '⚠️ This component requires testing on a physical device or emulator due to Reanimated compatibility issues with web previews.',
-      },
-    },
+  args: {
+    placeholder: 'Search products',
+    editable: true,
+    hideClearButton: false,
   },
 };

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

@@ -1,6 +1,8 @@
 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 { GlobalSelectBottomSheet } from './GlobalSelectBottomSheet';
 import { GlobalSelectProvider } from './GlobalSelectContext';
 import {
@@ -13,10 +15,12 @@ import {
 } from './Select';
 
 const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <GlobalSelectProvider>
-    {children}
-    <GlobalSelectBottomSheet />
-  </GlobalSelectProvider>
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    <GlobalSelectProvider>
+      {children}
+      <GlobalSelectBottomSheet />
+    </GlobalSelectProvider>
+  </ThemeProvider>
 );
 
 describe('Select', () => {

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

@@ -1,11 +1,6 @@
 import { cn } from '@ledgerhq/lumen-utils-shared';
 import React, { useState, useEffect, useCallback, useId } from 'react';
 import { View, Text, Pressable } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
 import { ChevronDown } from '../../Symbols';
 import { useControllableState, extractTextFromChildren } from '../../utils';
 import { SlotPressable } from '../Slot';
@@ -122,8 +117,6 @@ export const Select: React.FC<SelectProps> = ({
 };
 Select.displayName = 'Select';
 
-const AnimatedLabel = Animated.createAnimatedComponent(Animated.Text);
-
 export const SelectTrigger: React.FC<SelectTriggerProps> = ({
   children,
   className,
@@ -176,26 +169,6 @@ export const SelectTrigger: React.FC<SelectTriggerProps> = ({
   const hasValue = value !== undefined && value !== '';
   const isFloatingLabel = hasValue;
 
-  const labelFontSize = useSharedValue(hasValue ? 10 : 14);
-  const labelTop = useSharedValue(hasValue ? 10 : 16);
-
-  const animatedLabelStyle = useAnimatedStyle(
-    () => ({
-      fontSize: labelFontSize.value,
-      top: labelTop.value,
-    }),
-    [],
-  );
-
-  useEffect(() => {
-    labelFontSize.value = withTiming(isFloatingLabel ? 10 : 14, {
-      duration: 200,
-    });
-    labelTop.value = withTiming(isFloatingLabel ? 10 : 16, {
-      duration: 200,
-    });
-  }, [isFloatingLabel, labelFontSize, labelTop]);
-
   const Comp = asChild ? SlotPressable : Pressable;
 
   return (
@@ -206,17 +179,17 @@ export const SelectTrigger: React.FC<SelectTriggerProps> = ({
       {...props}
     >
       {finalLabel && (
-        <AnimatedLabel
+        <Text
           className={cn(
-            'absolute left-16 text-muted w-full',
+            'absolute left-16 text-muted w-full transition-all duration-200',
+            isFloatingLabel ? 'top-6 body-4' : 'top-14 body-2',
             disabled && 'text-disabled',
             labelClassName,
           )}
-          style={animatedLabelStyle}
           numberOfLines={1}
         >
           {finalLabel}
-        </AnimatedLabel>
+        </Text>
       )}
       <View
         className={cn(

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

@@ -22,11 +22,7 @@ export const Base: Story = {
   args: {
     size: 40,
   },
-  render: ({ size }) => (
-    <div className='flex items-center justify-center'>
-      <Spinner size={size} />
-    </div>
-  ),
+  render: (args) => <Spinner {...args} />,
 };
 
 export const Sizes: Story = {

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

@@ -1,47 +1,73 @@
-import { cn } from '@ledgerhq/lumen-utils-shared';
-import { forwardRef } from 'react';
-import { View } from 'react-native';
-import Svg, { Path, type SvgProps } from 'react-native-svg';
+import { forwardRef, useEffect, useRef } from 'react';
+import { Animated, Easing, View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
 import { useCommonTranslation } from '../../../i18n';
-import { IconSize } from '../../Components/Icon/Icon.types';
-
-export type SpinnerProps = SvgProps & {
-  /**
-   * The size of the spinner icon in pixels.
-   * @default 16
-   */
-  size?: IconSize;
-};
+import { LumenStyleSheet } from '../../../styles';
+import { RuntimeConstants } from '../../utils';
+import { Box } from '../Utility';
+import { SpinnerProps } from './types';
 
 /**
  * A basic spinner component for loading states.
  *
  * @example
  * <Spinner />
+ *
+ * @example
+ * // With custom color
+ * <Spinner color={theme.colors.text.base} />
+ *
+ * @example
+ * // With lx props for layout
+ * <Spinner lx={{ marginTop: 's8' }} />
  */
-export const Spinner = forwardRef<Svg, SpinnerProps>(
-  ({ className, size = 16, ...props }, ref) => {
+export const Spinner = forwardRef<View, SpinnerProps>(
+  ({ lx, style, size = 16, color, ...props }, ref) => {
     const { t } = useCommonTranslation();
+    const { theme } = LumenStyleSheet.useTheme();
+    const spinValue = useRef(new Animated.Value(0)).current;
+    const strokeColor = color ?? theme.colors.text.base;
+
+    useEffect(() => {
+      const animation = Animated.loop(
+        Animated.timing(spinValue, {
+          toValue: 1,
+          duration: 1000,
+          easing: Easing.linear,
+          useNativeDriver: RuntimeConstants.isNative,
+        }),
+      );
+      animation.start();
+
+      return () => animation.stop();
+    }, [spinValue]);
+
+    const spin = spinValue.interpolate({
+      inputRange: [0, 1],
+      outputRange: ['0deg', '360deg'],
+    });
+
     return (
-      <View className='shrink-0 animate-spin'>
-        <Svg
-          className={cn('text-base', className)}
-          width={size}
-          height={size}
-          viewBox='0 0 16 16'
-          fill='none'
-          accessibilityLabel={t('components.spinner.loadingAriaLabel')}
-          ref={ref}
-          {...props}
-        >
-          <Path
-            d='M8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8'
-            stroke='currentColor'
-            strokeWidth='1.5'
-            strokeLinecap='round'
-          />
-        </Svg>
-      </View>
+      <Box ref={ref} lx={{ flexShrink: 0, ...lx }} style={style} {...props}>
+        <Animated.View style={{ transform: [{ rotate: spin }] }}>
+          <Svg
+            width={size}
+            height={size}
+            viewBox='0 0 16 16'
+            fill='none'
+            accessibilityLabel={t('components.spinner.loadingAriaLabel')}
+          >
+            <Path
+              d='M8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8'
+              stroke={strokeColor}
+              strokeWidth='1.5'
+              strokeLinecap='round'
+            />
+          </Svg>
+        </Animated.View>
+      </Box>
     );
   },
 );
+
+Spinner.displayName = 'Spinner';

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

@@ -1 +1,2 @@
 export * from './Spinner';
+export * from './types';

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

@@ -0,0 +1,15 @@
+import { StyledViewProps } from '../../../styles';
+import { IconSize } from '../Icon';
+
+export type SpinnerProps = {
+  /**
+   * The size of the spinner icon in pixels.
+   * @default 16
+   */
+  size?: IconSize;
+  /**
+   * The color of the spinner stroke.
+   * @default text.base color.
+   */
+  color?: string;
+} & Omit<StyledViewProps, 'children'>;

package/src/lib/Components/Switch/Switch.mdx

@@ -151,7 +151,7 @@ Use `defaultChecked` for simple cases:
 </div>
 
 // ✅ ARIA label for standalone switch
-<Switch aria-label="Select all items" />
+<Switch accessibilityLabel="Select all items" />
 
 // ✅ ARIA described by for complex descriptions
 <div>

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

@@ -50,7 +50,7 @@ export const Showcase: Story = {
         <Tag appearance='success' label='Success' />
         <Tag appearance='error' label='Error' />
         <Tag appearance='warning' label='Warning' />
-        <Tag appearance='disabled' label='Disabled' />
+        <Tag label='Disabled' disabled />
       </View>
       <View className='flex flex-row gap-4'>
         <Tag appearance='base' label='Base' icon={Check} />
@@ -59,7 +59,7 @@ export const Showcase: Story = {
         <Tag appearance='success' label='Success' icon={Check} />
         <Tag appearance='error' label='Error' icon={Check} />
         <Tag appearance='warning' label='Warning' icon={Check} />
-        <Tag appearance='disabled' label='Disabled' icon={Check} />
+        <Tag label='Disabled' icon={Check} disabled />
       </View>
     </View>
   ),

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

@@ -17,16 +17,20 @@ const tagVariants = {
           success: 'bg-success',
           error: 'bg-error',
           warning: 'bg-warning',
-          disabled: 'bg-disabled',
         },
         size: {
           lg: 'h-24 px-8 py-4 body-3',
           sm: 'h-20 px-4 py-2 body-4',
         },
+        disabled: {
+          true: 'bg-disabled',
+          false: '',
+        },
       },
       defaultVariants: {
         appearance: 'accent',
         size: 'lg',
+        disabled: false,
       },
     },
   ),
@@ -39,14 +43,17 @@ const tagVariants = {
         success: 'text-success',
         error: 'text-error',
         warning: 'text-warning',
-        disabled: 'text-disabled',
+      },
+      disabled: {
+        true: 'text-disabled',
+        false: '',
       },
     },
   }),
 };
 
 export const Tag = React.forwardRef<View, TagProps>(
-  ({ className, appearance, size, icon, label, ...props }, ref) => {
+  ({ className, appearance, size, icon, label, disabled, ...props }, ref) => {
     const iconSizeMap: { [key: string]: IconSize } = {
       lg: 16,
       sm: 12,
@@ -57,17 +64,26 @@ export const Tag = React.forwardRef<View, TagProps>(
 
     return (
       <View
-        className={cn(className, tagVariants.root({ appearance, size }))}
+        className={cn(
+          className,
+          tagVariants.root({ appearance, size, disabled }),
+        )}
         ref={ref}
         {...props}
       >
         {IconComponent && (
           <IconComponent
             size={calculatedIconSize}
-            className={tagVariants.inner({ appearance, className: 'shrink-0' })}
+            className={tagVariants.inner({
+              appearance,
+              disabled,
+              className: 'shrink-0',
+            })}
           />
         )}
-        <Text className={tagVariants.inner({ appearance })}>{label}</Text>
+        <Text className={tagVariants.inner({ appearance, disabled })}>
+          {label}
+        </Text>
       </View>
     );
   },

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

@@ -6,14 +6,7 @@ export type TagProps = {
   /**
    * The appearance of the tag.
    */
-  appearance?:
-    | 'base'
-    | 'gray'
-    | 'accent'
-    | 'success'
-    | 'error'
-    | 'warning'
-    | 'disabled';
+  appearance?: 'base' | 'gray' | 'accent' | 'success' | 'error' | 'warning';
   /**
    * The icon of the tag.
    */
@@ -26,4 +19,10 @@ export type TagProps = {
    * The size of the tag.
    */
   size?: 'sm' | 'lg';
+  /**
+   * When `true`, prevents the user from interacting with the tag.
+   *
+   * @default false
+   */
+  disabled?: boolean;
 } & ViewProps;

package/src/lib/Components/TextInput/TextInput.mdx

@@ -19,12 +19,21 @@ It also provides the ability to add custom elements on the right side of the inp
 
 > View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=6375-6974&m=dev).
 
-<Canvas of={TextInputStories.WebPreviewWarning} />
+> ⚠️ **Note on Web Preview:** The Storybook preview below may display visual inconsistencies as certain React Native APIs (such as Reanimated animations) cannot be fully translated to web environments. While the component's functionality should accurately represent the native implementation, it may not render as intended. For the complete native experience, please refer to the component on an actual iOS or Android device.
+
+<Canvas of={TextInputStories.Base} />
+<Controls of={TextInputStories.Base} />
 
 ## Anatomy
 
 > **Layout:** The Input component takes the full width of its container by default. You can control the width directly using `className` or by wrapping in a container.
 
+### Floating Label
+
+The label text automatically floats above the input when content is entered, providing a clean and modern interface.
+
+<Canvas of={TextInputStories.WithContent} />
+
 ### Clear Button
 
 A clear button (×) appears **automatically** when input has content.
@@ -35,14 +44,20 @@ A clear button (×) appears **automatically** when input has content.
 
 Use `hideClearButton` to prevent the clear button from appearing.
 
+<Canvas of={TextInputStories.WithHiddenClearButton} />
+
 #### **Extending the Clear Behavior**
 
 Use `onClear` to extend the default clear behavior with custom logic.
 
+<Canvas of={TextInputStories.WithClearCallback} />
+
 ### Error State
 
 The input supports error handling through `errorMessage` which displays an error message below the input with error styling including a red border and text color.
 
+<Canvas of={TextInputStories.WithError} />
+
 The error message will be automatically:
 
 - Connected to the input
@@ -54,9 +69,15 @@ The error message will be automatically:
 
 The input can be disabled using the `editable` prop set to `false`.
 
-### Interactive Form Example
+<Canvas of={TextInputStories.DisabledTextInput} />
+
+### Keyboard Types
+
+The component supports various React Native TextInput keyboard types:
+
+<Canvas of={TextInputStories.EmailKeyboard} />
 
-A complete example showing how to use TextInput in a form with validation.
+<Canvas of={TextInputStories.PhoneKeyboard} />
 
 ## Controlled vs Uncontrolled
 
@@ -214,7 +235,6 @@ While the component comes with predefined styles, you can extend them using Nati
   value={email}
   onChangeText={setEmail}
   className='max-w-md' // Control width
-  className='heading-0' // Customize input text style
 />
 ```