@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.46

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

@@ -1,7 +1,12 @@
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
-import { cva } from 'class-variance-authority';
-import React, { useCallback } from 'react';
-import { Pressable, View, type GestureResponderEvent } from 'react-native';
+import React, { useCallback, useEffect, useRef } from 'react';
+import {
+  Animated,
+  Pressable,
+  StyleSheet,
+  type GestureResponderEvent,
+} from 'react-native';
+import { useStyleSheet } from '../../../styles';
 
 import {
   PressableRef,
@@ -16,69 +21,6 @@ import { SwitchProps } from './types';
 const ROOT_COMPONENT_NAME = 'BaseSwitch';
 const THUMB_COMPONENT_NAME = 'BaseSwitchThumb';
 
-const baseSwitchVariants = {
-  root: cva(
-    [
-      'group flex justify-center rounded-full p-2 transition-colors duration-200 ease-in-out',
-      'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus',
-    ],
-    {
-      variants: {
-        checked: { true: '', false: '' },
-        disabled: { true: '', false: '' },
-        size: {
-          sm: 'h-16 max-h-16 min-h-16 w-24 min-w-24 max-w-24',
-          md: 'h-24 max-h-24 min-h-24 w-40 min-w-40 max-w-40',
-        },
-      },
-      compoundVariants: [
-        {
-          checked: false,
-          disabled: false,
-          className: 'bg-muted-strong',
-        },
-        {
-          checked: true,
-          disabled: false,
-          className: 'bg-active',
-        },
-        {
-          checked: true,
-          disabled: true,
-          className: 'bg-disabled',
-        },
-        {
-          checked: false,
-          disabled: true,
-          className: 'bg-disabled',
-        },
-      ],
-    },
-  ),
-  thumb: cva(
-    'translate-x-0 rounded-full bg-white transition-transform duration-200 ease-in-out',
-    {
-      variants: {
-        size: { sm: 'size-12', md: 'size-20' },
-        checked: { true: '', false: '' },
-        disabled: { true: 'bg-base', false: '' },
-      },
-      compoundVariants: [
-        {
-          checked: true,
-          size: 'sm',
-          className: 'translate-x-8',
-        },
-        {
-          checked: true,
-          size: 'md',
-          className: 'translate-x-16',
-        },
-      ],
-    },
-  ),
-};
-
 type BaseSwitchRootProps = SlottablePressableProps & {
   checked: SwitchProps['checked'];
   onCheckedChange: SwitchProps['onCheckedChange'];
@@ -98,13 +40,18 @@ const BaseSwitchRoot = React.forwardRef<PressableRef, BaseSwitchRootProps>(
       size = 'md',
       onCheckedChange,
       disabled = false,
-      className,
       onPress: onPressProp,
       'aria-valuetext': ariaValueText,
       ...props
     },
     ref,
   ) => {
+    const styles = useStyles({
+      checked: !!checked,
+      disabled: !!disabled,
+      size,
+    });
+
     const onPress = useCallback(
       (ev: GestureResponderEvent) => {
         if (disabled) return;
@@ -126,22 +73,19 @@ const BaseSwitchRoot = React.forwardRef<PressableRef, BaseSwitchRootProps>(
         }}
       >
         <Component
-          className={baseSwitchVariants.root({
-            className,
-            checked,
-            disabled,
-            size,
-          })}
+          style={styles.root}
           ref={ref}
           aria-disabled={disabled}
           role='switch'
           aria-checked={checked}
-          aria-valuetext={ariaValueText ?? (checked ? 'on' : 'off')}
           onPress={onPress}
           accessibilityState={{
             checked,
             disabled,
           }}
+          accessibilityValue={
+            ariaValueText ? { text: ariaValueText } : undefined
+          }
           disabled={disabled}
           {...props}
         />
@@ -152,28 +96,151 @@ const BaseSwitchRoot = React.forwardRef<PressableRef, BaseSwitchRootProps>(
 BaseSwitchRoot.displayName = ROOT_COMPONENT_NAME;
 
 const BaseSwitchThumb = React.forwardRef<ViewRef, SlottableViewProps>(
-  ({ asChild, className, ...props }, ref) => {
+  ({ asChild, ...props }, ref) => {
     const { checked, disabled, size } = useBaseSwitchContext({
       consumerName: THUMB_COMPONENT_NAME,
       contextRequired: true,
     });
 
-    const Component = asChild ? SlotView : View;
+    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}
+        />
+      );
+    }
+
     return (
-      <Component
+      <Animated.View
         ref={ref}
         role='presentation'
-        className={baseSwitchVariants.thumb({
-          className,
-          checked,
-          disabled,
-          size,
-        })}
+        style={[styles.thumbBase, animatedStyle]}
         {...props}
       />
     );
   },
 );
+
+type Size = NonNullable<SwitchProps['size']>;
+
+const useStyles = ({
+  checked,
+  disabled,
+  size,
+}: {
+  checked: boolean;
+  disabled: boolean;
+  size: Size;
+}) => {
+  return useStyleSheet(
+    (t) => {
+      const sizes: Record<Size, { width: number; height: number }> = {
+        sm: { width: t.sizes.s24, height: t.sizes.s16 },
+        md: { width: t.sizes.s40, height: t.sizes.s24 },
+      };
+
+      const thumbSizes: Record<Size, { size: number }> = {
+        sm: { size: t.sizes.s12 },
+        md: { size: t.sizes.s20 },
+      };
+
+      const thumbTranslations: Record<Size, number> = {
+        sm: t.spacings.s8,
+        md: t.spacings.s16,
+      };
+
+      return {
+        root: StyleSheet.flatten([
+          {
+            flexDirection: 'row',
+            justifyContent: 'flex-start',
+            alignItems: 'center',
+            borderRadius: t.borderRadius.full,
+            padding: t.spacings.s2,
+            overflow: 'hidden',
+            ...sizes[size],
+            minWidth: sizes[size].width,
+            maxWidth: sizes[size].width,
+            minHeight: sizes[size].height,
+            maxHeight: sizes[size].height,
+          },
+          !checked &&
+            !disabled && {
+              backgroundColor: t.colors.bg.mutedStrong,
+            },
+          checked &&
+            !disabled && {
+              backgroundColor: t.colors.bg.active,
+            },
+          disabled && {
+            backgroundColor: t.colors.bg.disabled,
+          },
+        ]),
+        thumbBase: StyleSheet.flatten([
+          {
+            borderRadius: t.borderRadius.full,
+            backgroundColor: 'white',
+            width: thumbSizes[size].size,
+            height: thumbSizes[size].size,
+          },
+          disabled && {
+            backgroundColor: t.colors.bg.base,
+          },
+        ]),
+        thumb: StyleSheet.flatten([
+          {
+            borderRadius: t.borderRadius.full,
+            backgroundColor: 'white',
+            width: thumbSizes[size].size,
+            height: thumbSizes[size].size,
+            transform: [{ translateX: checked ? thumbTranslations[size] : 0 }],
+          },
+          disabled && {
+            backgroundColor: t.colors.bg.base,
+          },
+        ]),
+      };
+    },
+    [checked, disabled, size],
+  );
+};
+
 BaseSwitchThumb.displayName = THUMB_COMPONENT_NAME;
 
 export { BaseSwitchRoot, BaseSwitchThumb };

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

@@ -3,7 +3,7 @@ import * as SwitchStories from './Switch.stories';
 import { Switch } from './Switch';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/docs/CommonRulesDoAndDont.mdx';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title="Components/Switch" of={SwitchStories} />
 
@@ -61,57 +61,26 @@ Switches support multiple states to provide clear feedback to users:
 </Tab>
 <Tab label="Implementation">
 
-## Installation
+## Setup
 
-Install the packages and their peer dependencies:
-
-```bash
-# Install the UI Kit
-npm install @ledgerhq/lumen-ui-rnative @ledgerhq/lumen-design-core
-
-# Install peer dependencies
-npm install react-native@^0.75.0 react@^18.3.1 nativewind@^4.1.0 tailwindcss@^3.4.0 class-variance-authority
-```
-
-#### **About NativeWind**
-
-The `nativewind` dependency is used for styling React Native components with Tailwind CSS utilities. It provides the `className` prop support and ensures consistent styling across platforms.
-
-### NativeWind Configuration
-
-To use the Button component with our custom Tailwind preset, you need to configure your `tailwind.config.ts`:
-
-```typescript
-import type { Config } from 'tailwindcss';
-import { ledgerLivePreset } from '@ledgerhq/lumen-design-core';
-
-const config = {
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx}", // Your project's files
-    "./node_modules/@ledgerhq/lumen-ui-rnative/dist/**/*.{js,ts,jsx,tsx}" // Ledger UI Kit components
-  ],
-  presets: [ledgerLivePreset], // the installed tailwind preset
-} satisfies Config;
-
-export default config;
-```
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
 
 ## Basic Usage
 
 ```tsx
-import { Switch } from '@ledgerhq/lumen-ui-rnative';
+import { Switch, Box, Text } from '@ledgerhq/lumen-ui-rnative';
 
 function MyForm() {
   const [isChecked, setIsChecked] = useState(false);
 
   return (
-    <div className="flex items-center space-x-8">
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's8' }}>
       <Switch
         checked={isChecked}
         onCheckedChange={setIsChecked}
       />
-      <label>Accept terms and conditions</label>
-    </div>
+      <Text>Accept terms and conditions</Text>
+    </Box>
   );
 }
 ```
@@ -144,26 +113,28 @@ Use `defaultChecked` for simple cases:
 ### Labels and ARIA
 
 ```tsx
-// ✅ Associated label
-<div className="flex items-center space-x-8">
+// ✅ Custom layout with Box and Text
+<Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's8' }}>
   <Switch id="terms" />
-  <label htmlFor="terms">I agree to the terms</label>
-</div>
+  <Text>I agree to the terms</Text>
+</Box>
 
 // ✅ ARIA label for standalone switch
 <Switch accessibilityLabel="Select all items" />
 
 // ✅ ARIA described by for complex descriptions
-<div>
-  <Switch
-    id="marketing"
-    aria-describedby="marketing-description"
-  />
-  <label htmlFor="marketing">Marketing emails</label>
-  <p id="marketing-description" className="text-muted body-4">
+<Box lx={{ gap: 's4' }}>
+  <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's8' }}>
+    <Switch
+      id="marketing"
+      aria-describedby="marketing-description"
+    />
+    <Text>Marketing emails</Text>
+  </Box>
+  <Text id="marketing-description" lx={{ color: 'muted' }} typography="body4">
     Receive promotional offers and product updates
-  </p>
-</div>
+  </Text>
+</Box>
 ```
 
 ### Keyboard Navigation
@@ -178,38 +149,7 @@ The Switch component automatically supports:
 
 The following guidelines ensure consistent usage of the Switch component and maintain design system principles.
 
-<div className='flex flex-col gap-24'>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Associate labels properly'
-      description='Use htmlFor with id to properly associate labels with switches'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<div className='flex items-center space-x-8'>
-  <Switch id='notifications' />
-  <label htmlFor='notifications'>Enable notifications</label>
-</div>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use unlabeled switches"
-      description='Always provide labels for accessibility and clarity'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<div className='flex items-center space-x-8'>
-  <Switch id='notifications' />
-</div>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
+<Box lx={{ flexDirection: 'column', gap: 's24' }}>
   <DoVsDontRow>
     <DoBlockItem
       title='Use controlled components for form state'
@@ -241,7 +181,7 @@ const [isChecked, setIsChecked] = useState(false);
   </DoVsDontRow>
 
   <CommonRulesDoAndDont />
-</div>
+</Box>
 
 </Tab>
 </CustomTabs>

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

@@ -1,11 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { Box, Text } from '../Utility';
 import { Switch } from './Switch';
 
 const meta: Meta<typeof Switch> = {
   title: 'Selection/Switch',
   component: Switch,
   parameters: {
-    layout: 'centered',
+    layout: 'fullscreen',
     docs: {
       source: {
         language: 'tsx',
@@ -43,9 +44,19 @@ type Story = StoryObj<typeof meta>;
 export const Base: Story = {
   render: (args) => {
     return (
-      <div className='flex size-80 items-center justify-center'>
-        <Switch {...args} />
-      </div>
+      <Box
+        style={{
+          flex: 1,
+          minHeight: 96,
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 24,
+        }}
+      >
+        <Box style={{ width: '100%', maxWidth: 400 }}>
+          <Switch {...args} />
+        </Box>
+      </Box>
     );
   },
 };
@@ -55,29 +66,38 @@ export const Base: Story = {
  */
 export const AllStates: Story = {
   render: () => (
-    <div className='grid grid-cols-3 gap-48 p-16 text-base'>
-      <div className='space-y-16'>
-        <h3 className='heading-4'>Enabled</h3>
-        <div className='space-y-8'>
-          <div className='flex items-center space-x-8'>
-            <Switch defaultChecked={false} />
-          </div>
-          <div className='flex items-center space-x-8'>
-            <Switch aria-labelledby='' defaultChecked />
-          </div>
-        </div>
-      </div>
-      <div className='space-y-16'>
-        <h3 className='heading-4'>Disabled</h3>
-        <div className='space-y-8'>
-          <div className='flex items-center space-x-8'>
-            <Switch disabled defaultChecked={false} />
-          </div>
-          <div className='flex items-center space-x-8'>
-            <Switch disabled defaultChecked />
-          </div>
-        </div>
-      </div>
-    </div>
+    <Box
+      style={{
+        flex: 1,
+        minHeight: 96,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 24,
+      }}
+    >
+      <Box style={{ width: '100%', maxWidth: 400 }}>
+        <Box
+          style={{
+            flexDirection: 'row',
+            gap: 48,
+          }}
+        >
+          <Box style={{ gap: 16 }}>
+            <Text typography='heading4'>Enabled</Text>
+            <Box style={{ gap: 8 }}>
+              <Switch defaultChecked={false} />
+              <Switch aria-labelledby='' defaultChecked />
+            </Box>
+          </Box>
+          <Box style={{ gap: 16 }}>
+            <Text typography='heading4'>Disabled</Text>
+            <Box style={{ gap: 8 }}>
+              <Switch disabled defaultChecked={false} />
+              <Switch disabled defaultChecked />
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
   ),
 };