@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.46

package/src/lib/Components/CardButton/CardButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Text, View } from 'react-native';
-import { LumenStyleSheet, mergeStyles } from '../../../styles';
+import { StyleSheet, Text, View } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import { ChevronRight } from '../../Symbols';
 import { Pressable } from '../Utility';
 
@@ -17,7 +17,7 @@ const useStyles = ({
   disabled: boolean;
   pressed: boolean;
 }) => {
-  return LumenStyleSheet.useCreate(
+  return useStyleSheet(
     (t) => {
       const bgColors: Record<Appearance, string> = {
         base: t.colors.bg.muted,
@@ -30,7 +30,7 @@ const useStyles = ({
       };
 
       return {
-        container: mergeStyles(
+        container: StyleSheet.flatten([
           {
             flexDirection: 'row',
             alignItems: 'center',
@@ -60,22 +60,28 @@ const useStyles = ({
             appearance === 'outline' && {
               borderColor: t.colors.border.disabled,
             },
-        ),
+        ]),
         contentWrapper: {
           flex: 1,
           minWidth: 0,
           flexDirection: 'column',
           gap: t.spacings.s4,
         },
-        title: mergeStyles(t.typographies.body1SemiBold, {
-          color: disabled ? t.colors.text.disabled : t.colors.text.base,
-          minWidth: 0,
-          textAlign: 'left',
-        }),
-        description: mergeStyles(t.typographies.body2, {
-          color: disabled ? t.colors.text.disabled : t.colors.text.base,
-          minWidth: 0,
-        }),
+        title: StyleSheet.flatten([
+          t.typographies.body1SemiBold,
+          {
+            color: disabled ? t.colors.text.disabled : t.colors.text.base,
+            minWidth: 0,
+            textAlign: 'left',
+          },
+        ]),
+        description: StyleSheet.flatten([
+          t.typographies.body2,
+          {
+            color: disabled ? t.colors.text.disabled : t.colors.text.base,
+            minWidth: 0,
+          },
+        ]),
         icon: {
           flexShrink: 0,
           color: disabled ? t.colors.text.disabled : t.colors.text.base,
@@ -137,7 +143,7 @@ export const CardButton = React.forwardRef<
       <Pressable
         ref={ref}
         lx={lx}
-        style={[style, { flex: 1 }]}
+        style={StyleSheet.flatten([style, { flex: 1 }])}
         disabled={disabled}
         accessibilityRole='button'
         accessibilityState={{ disabled }}

package/src/lib/Components/Checkbox/BaseCheckbox.tsx

@@ -1,7 +1,12 @@
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
-import { cva } from 'class-variance-authority';
 import React, { useCallback } from 'react';
-import { GestureResponderEvent, Pressable, View } from 'react-native';
+import {
+  GestureResponderEvent,
+  Pressable,
+  View,
+  StyleSheet,
+} from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import {
   ForceMountable,
   PressableRef,
@@ -9,7 +14,6 @@ import {
   SlottableViewProps,
   ViewRef,
 } from '../../types';
-import { cn } from '../../utils';
 import { SlotPressable, SlotView } from '../Slot';
 import { CheckboxProps } from './types';
 
@@ -17,50 +21,6 @@ const ROOT_COMPONENT_NAME = 'BaseCheckbox';
 const TRIGGER_COMPONENT_NAME = 'BaseCheckboxTrigger';
 const INDICATOR_COMPONENT_NAME = 'BaseCheckboxIndicator';
 
-const baseCheckboxVariants = {
-  trigger: cva(
-    [
-      'size-20 shrink-0 rounded-xs transition-colors',
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2',
-    ],
-    {
-      variants: {
-        checked: { true: '', false: 'border' },
-        disabled: { true: '', false: '' },
-      },
-      compoundVariants: [
-        {
-          checked: true,
-          disabled: false,
-          className:
-            'bg-active text-on-accent hover:bg-active-hover active:bg-active-pressed',
-        },
-        {
-          checked: false,
-          disabled: false,
-          className:
-            'border-muted bg-base hover:bg-base-hover active:bg-base-pressed',
-        },
-        {
-          checked: true,
-          disabled: true,
-          className: 'bg-disabled text-disabled',
-        },
-        {
-          checked: false,
-          disabled: true,
-          className: 'border-disabled bg-base',
-        },
-      ],
-      defaultVariants: {
-        checked: false,
-        disabled: false,
-      },
-    },
-  ),
-  indicator: cva(['flex size-full items-center justify-center']),
-};
-
 type BaseCheckboxRootProps = SlottablePressableProps & {
   checked?: CheckboxProps['checked'];
   onCheckedChange?: CheckboxProps['onCheckedChange'];
@@ -92,13 +52,15 @@ BaseCheckboxRoot.displayName = ROOT_COMPONENT_NAME;
 const BaseCheckboxTrigger = React.forwardRef<
   PressableRef,
   SlottablePressableProps
->(({ asChild, onPress: onPressProp, className, ...props }, ref) => {
+>(({ asChild, onPress: onPressProp, ...props }, ref) => {
   const { disabled, checked, onCheckedChange, nativeID } =
     useBaseCheckboxContext({
       consumerName: TRIGGER_COMPONENT_NAME,
       contextRequired: true,
     });
 
+  const styles = useStyles({ checked: !!checked, disabled: !!disabled });
+
   const onPress = useCallback(
     (ev: GestureResponderEvent) => {
       if (disabled) return;
@@ -118,10 +80,7 @@ const BaseCheckboxTrigger = React.forwardRef<
       role='checkbox'
       aria-checked={checked}
       onPress={onPress}
-      className={cn(
-        baseCheckboxVariants.trigger({ checked, disabled }),
-        className,
-      )}
+      style={styles.trigger}
       accessibilityState={{
         checked,
         disabled,
@@ -137,12 +96,14 @@ type BaseCheckboxIndicatorProps = ForceMountable & SlottableViewProps;
 const BaseCheckboxIndicator = React.forwardRef<
   ViewRef,
   BaseCheckboxIndicatorProps
->(({ asChild, forceMount, className, ...props }, ref) => {
+>(({ asChild, forceMount, ...props }, ref) => {
   const { checked, disabled } = useBaseCheckboxContext({
     consumerName: INDICATOR_COMPONENT_NAME,
     contextRequired: true,
   });
 
+  const styles = useStyles({ checked: !!checked, disabled: !!disabled });
+
   if (!forceMount) {
     if (!checked) {
       return null;
@@ -154,7 +115,7 @@ const BaseCheckboxIndicator = React.forwardRef<
   return (
     <Component
       ref={ref}
-      className={baseCheckboxVariants.indicator({ className })}
+      style={styles.indicator}
       aria-disabled={disabled}
       aria-hidden={!(forceMount || checked)}
       role={'presentation'}
@@ -162,6 +123,61 @@ const BaseCheckboxIndicator = React.forwardRef<
     />
   );
 });
+
+const useStyles = ({
+  checked,
+  disabled,
+}: {
+  checked: boolean;
+  disabled: boolean;
+}) => {
+  return useStyleSheet(
+    (t) => {
+      return {
+        trigger: StyleSheet.flatten([
+          {
+            width: t.sizes.s20,
+            height: t.sizes.s20,
+            flexShrink: 0,
+            borderRadius: t.borderRadius.xs,
+          },
+          !checked && {
+            borderWidth: t.borderWidth.s1,
+          },
+          checked &&
+            !disabled && {
+              backgroundColor: t.colors.bg.active,
+              color: t.colors.text.onAccent,
+            },
+          !checked &&
+            !disabled && {
+              borderColor: t.colors.border.muted,
+              backgroundColor: t.colors.bg.base,
+            },
+          checked &&
+            disabled && {
+              backgroundColor: t.colors.bg.disabled,
+              color: t.colors.text.disabled,
+            },
+          !checked &&
+            disabled && {
+              borderColor: t.colors.border.disabled,
+              backgroundColor: t.colors.bg.base,
+            },
+        ]),
+        indicator: {
+          flex: 1,
+          width: t.sizes.full,
+          height: t.sizes.full,
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+      };
+    },
+    [checked, disabled],
+  );
+};
+
 BaseCheckboxIndicator.displayName = INDICATOR_COMPONENT_NAME;
 
 export { BaseCheckboxIndicator, BaseCheckboxRoot, type BaseCheckboxRootProps };

package/src/lib/Components/Checkbox/Checkbox.mdx

@@ -3,7 +3,7 @@ import * as CheckboxStories from './Checkbox.stories';
 import { Checkbox } from './Checkbox';
 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/Checkbox" of={CheckboxStories} />
 
@@ -67,19 +67,19 @@ Install and set up the library with our [Setup Guide →](?path=/docs/getting-st
 ## Basic Usage
 
 ```tsx
-import { Checkbox } from '@ledgerhq/lumen-ui-rnative';
+import { Checkbox, 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' }}>
       <Checkbox
         checked={isChecked}
         onCheckedChange={setIsChecked}
       />
-      <label>Accept terms and conditions</label>
-    </div>
+      <Text>Accept terms and conditions</Text>
+    </Box>
   );
 }
 ```
@@ -112,26 +112,31 @@ Use `defaultChecked` for simple cases:
 ### Labels and ARIA
 
 ```tsx
-// ✅ Associated label
-<div className="flex items-center space-x-8">
-  <Checkbox id="terms" />
-  <label htmlFor="terms">I agree to the terms</label>
-</div>
+// ✅ Using built-in label prop
+<Checkbox label="I agree to the terms" />
 
 // ✅ ARIA label for standalone checkbox
 <Checkbox accessibilityLabel="Select all items" />
 
+// ✅ Custom layout with Box and Text
+<Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's8' }}>
+  <Checkbox id="terms" />
+  <Text>I agree to the terms</Text>
+</Box>
+
 // ✅ ARIA described by for complex descriptions
-<div>
-  <Checkbox
-    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' }}>
+    <Checkbox
+      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
@@ -146,19 +151,16 @@ The Checkbox component automatically supports:
 
 The following guidelines ensure consistent usage of the Checkbox component and maintain design system principles.
 
-<div className='flex flex-col gap-24'>
+<Box lx={{ flexDirection: 'column', gap: 's24' }}>
   <DoVsDontRow>
     <DoBlockItem
-      title='Associate labels properly'
-      description='Use htmlFor with id to properly associate labels with checkboxes'
+      title='Use the built-in label prop'
+      description='Use the label prop for simple text labels'
     >
 
 {/* prettier-ignore */}
 ```tsx
-<div className='flex items-center space-x-8'>
-  <Checkbox id='newsletter' />
-  <label htmlFor='newsletter'>Subscribe to newsletter</label>
-</div>
+<Checkbox label='Subscribe to newsletter' />
 ```
 
     </DoBlockItem>
@@ -169,9 +171,7 @@ The following guidelines ensure consistent usage of the Checkbox component and m
 
 {/* prettier-ignore */}
 ```tsx
-<div className='flex items-center space-x-8'>
-  <Checkbox id='newsletter' />
-</div>
+<Checkbox id='newsletter' />
 ```
 
     </DontBlockItem>
@@ -188,7 +188,11 @@ The following guidelines ensure consistent usage of the Checkbox component and m
 ```tsx
 const [isChecked, setIsChecked] = useState(false);
 
-<Checkbox checked={isChecked} onCheckedChange={setIsChecked} />
+<Checkbox 
+  label='Accept terms'
+  checked={isChecked} 
+  onCheckedChange={setIsChecked} 
+/>
 ```
 
     </DoBlockItem>
@@ -201,7 +205,11 @@ const [isChecked, setIsChecked] = useState(false);
 ```tsx
 const [isChecked, setIsChecked] = useState(false);
 
-<Checkbox checked={isChecked} defaultChecked={true} />
+<Checkbox 
+  label='Accept terms'
+  checked={isChecked} 
+  defaultChecked={true} 
+/>
 ```
 
     </DontBlockItem>
@@ -209,7 +217,7 @@ const [isChecked, setIsChecked] = useState(false);
   </DoVsDontRow>
 
   <CommonRulesDoAndDont />
-</div>
+</Box>
 
 </Tab>
 </CustomTabs>

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

@@ -1,11 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { Box, Text } from '../Utility';
 import { Checkbox } from './Checkbox';
 
 const meta: Meta<typeof Checkbox> = {
   title: 'Selection/Checkbox',
   component: Checkbox,
   parameters: {
-    layout: 'centered',
+    layout: 'fullscreen',
     docs: {
       source: {
         language: 'tsx',
@@ -50,9 +51,19 @@ type Story = StoryObj<typeof meta>;
 export const Base: Story = {
   render: (args) => {
     return (
-      <div className='flex size-80 items-center justify-center'>
-        <Checkbox {...args} />
-      </div>
+      <Box
+        style={{
+          flex: 1,
+          minHeight: 96,
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 24,
+        }}
+      >
+        <Box style={{ width: '100%', maxWidth: 400 }}>
+          <Checkbox {...args} />
+        </Box>
+      </Box>
     );
   },
 };
@@ -62,33 +73,42 @@ 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'>
-            <Checkbox
-              label='Unchecked'
-              accessibilityLabel='Unchecked'
-              defaultChecked={false}
-            />
-          </div>
-          <div className='flex items-center space-x-8'>
-            <Checkbox label='Checked' 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'>
-            <Checkbox label='Unchecked' disabled defaultChecked={false} />
-          </div>
-          <div className='flex items-center space-x-8'>
-            <Checkbox label='Checked' 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 }}>
+              <Checkbox
+                label='Unchecked'
+                accessibilityLabel='Unchecked'
+                defaultChecked={false}
+              />
+              <Checkbox label='Checked' defaultChecked />
+            </Box>
+          </Box>
+          <Box style={{ gap: 16 }}>
+            <Text typography='heading4'>Disabled</Text>
+            <Box style={{ gap: 8 }}>
+              <Checkbox label='Unchecked' disabled defaultChecked={false} />
+              <Checkbox label='Checked' disabled defaultChecked />
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
   ),
 };

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

@@ -13,58 +13,48 @@ const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
 
 describe('Checkbox', () => {
   it('uncontrolled: toggles on press and reflects checked state', async () => {
-    const { getByTestId } = render(
+    const { getByRole } = render(
       <TestWrapper>
-        <Checkbox defaultChecked={false} testID='checkbox' />
+        <Checkbox defaultChecked={false} />
       </TestWrapper>,
     );
 
-    expect(getByTestId('checkbox').props.accessibilityState?.checked).toBe(
-      false,
-    );
+    const trigger = getByRole('checkbox');
+    expect(trigger.props.accessibilityState?.checked).toBe(false);
 
-    fireEvent.press(getByTestId('checkbox'));
+    fireEvent.press(trigger);
 
     await waitFor(() =>
-      expect(getByTestId('checkbox').props.accessibilityState?.checked).toBe(
-        true,
-      ),
+      expect(trigger.props.accessibilityState?.checked).toBe(true),
     );
   });
 
   it('controlled: calls onCheckedChange but state is controlled by parent', async () => {
     const onChange = jest.fn();
-    const { getByTestId, rerender } = render(
+    const { getByRole, rerender } = render(
       <TestWrapper>
-        <Checkbox
-          checked={false}
-          onCheckedChange={onChange}
-          testID='checkbox'
-        />
+        <Checkbox checked={false} onCheckedChange={onChange} />
       </TestWrapper>,
     );
 
-    expect(getByTestId('checkbox').props.accessibilityState?.checked).toBe(
-      false,
-    );
+    const trigger = getByRole('checkbox');
+    expect(trigger.props.accessibilityState?.checked).toBe(false);
 
-    fireEvent.press(getByTestId('checkbox'));
+    fireEvent.press(trigger);
 
     await waitFor(() => expect(onChange).toHaveBeenCalledWith(true));
     await waitFor(() =>
-      expect(getByTestId('checkbox').props.accessibilityState?.checked).toBe(
-        false,
-      ),
+      expect(trigger.props.accessibilityState?.checked).toBe(false),
     );
 
     rerender(
       <TestWrapper>
-        <Checkbox checked={true} onCheckedChange={onChange} testID='checkbox' />
+        <Checkbox checked={true} onCheckedChange={onChange} />
       </TestWrapper>,
     );
 
     await waitFor(() =>
-      expect(getByTestId('checkbox').props.accessibilityState?.checked).toBe(
+      expect(getByRole('checkbox').props.accessibilityState?.checked).toBe(
         true,
       ),
     );
@@ -72,13 +62,12 @@ describe('Checkbox', () => {
 
   it('label: renders and toggles when pressed', async () => {
     const onChange = jest.fn();
-    const { getByText, getByTestId } = render(
+    const { getByText, getByRole } = render(
       <TestWrapper>
         <Checkbox
           defaultChecked={false}
           label='Accept'
           onCheckedChange={onChange}
-          testID='checkbox'
         />
       </TestWrapper>,
     );
@@ -87,7 +76,7 @@ describe('Checkbox', () => {
 
     await waitFor(() => expect(onChange).toHaveBeenCalledWith(true));
     await waitFor(() =>
-      expect(getByTestId('checkbox').props.accessibilityState?.checked).toBe(
+      expect(getByRole('checkbox').props.accessibilityState?.checked).toBe(
         true,
       ),
     );
@@ -95,19 +84,18 @@ describe('Checkbox', () => {
 
   it('disabled: does not toggle on trigger or label press', async () => {
     const onChange = jest.fn();
-    const { getByText, getByTestId } = render(
+    const { getByText, getByRole } = render(
       <TestWrapper>
         <Checkbox
           disabled
           defaultChecked={false}
           label='Terms'
           onCheckedChange={onChange}
-          testID='checkbox'
         />
       </TestWrapper>,
     );
 
-    const trigger = getByTestId('checkbox');
+    const trigger = getByRole('checkbox');
     expect(trigger.props.accessibilityState?.disabled).toBe(true);
 
     fireEvent.press(trigger);
@@ -116,7 +104,7 @@ describe('Checkbox', () => {
     await waitFor(() => expect(onChange).toHaveBeenCalled());
   });
 
-  it('passes through nativeID to trigger for a11y mapping', () => {
+  it('passes through nativeID to container for a11y mapping', () => {
     const { getByTestId } = render(
       <TestWrapper>
         <Checkbox defaultChecked={false} nativeID='check-1' testID='checkbox' />