@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

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 aria-label="Select all items" />
+<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

@@ -1,51 +1,60 @@
 import { describe, it, expect, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, fireEvent, waitFor } from '@testing-library/react-native';
+import React from 'react';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { Checkbox } from './Checkbox';
 
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
 describe('Checkbox', () => {
   it('uncontrolled: toggles on press and reflects checked state', async () => {
-    const { getByTestId } = render(
-      <Checkbox defaultChecked={false} testID='checkbox' />,
+    const { getByRole } = render(
+      <TestWrapper>
+        <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(
-      <Checkbox checked={false} onCheckedChange={onChange} testID='checkbox' />,
+    const { getByRole, rerender } = render(
+      <TestWrapper>
+        <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(
-      <Checkbox checked={true} onCheckedChange={onChange} testID='checkbox' />,
+      <TestWrapper>
+        <Checkbox checked={true} onCheckedChange={onChange} />
+      </TestWrapper>,
     );
 
     await waitFor(() =>
-      expect(getByTestId('checkbox').props.accessibilityState?.checked).toBe(
+      expect(getByRole('checkbox').props.accessibilityState?.checked).toBe(
         true,
       ),
     );
@@ -53,20 +62,21 @@ describe('Checkbox', () => {
 
   it('label: renders and toggles when pressed', async () => {
     const onChange = jest.fn();
-    const { getByText, getByTestId } = render(
-      <Checkbox
-        defaultChecked={false}
-        label='Accept'
-        onCheckedChange={onChange}
-        testID='checkbox'
-      />,
+    const { getByText, getByRole } = render(
+      <TestWrapper>
+        <Checkbox
+          defaultChecked={false}
+          label='Accept'
+          onCheckedChange={onChange}
+        />
+      </TestWrapper>,
     );
 
     fireEvent.press(getByText('Accept'));
 
     await waitFor(() => expect(onChange).toHaveBeenCalledWith(true));
     await waitFor(() =>
-      expect(getByTestId('checkbox').props.accessibilityState?.checked).toBe(
+      expect(getByRole('checkbox').props.accessibilityState?.checked).toBe(
         true,
       ),
     );
@@ -74,17 +84,18 @@ describe('Checkbox', () => {
 
   it('disabled: does not toggle on trigger or label press', async () => {
     const onChange = jest.fn();
-    const { getByText, getByTestId } = render(
-      <Checkbox
-        disabled
-        defaultChecked={false}
-        label='Terms'
-        onCheckedChange={onChange}
-        testID='checkbox'
-      />,
+    const { getByText, getByRole } = render(
+      <TestWrapper>
+        <Checkbox
+          disabled
+          defaultChecked={false}
+          label='Terms'
+          onCheckedChange={onChange}
+        />
+      </TestWrapper>,
     );
 
-    const trigger = getByTestId('checkbox');
+    const trigger = getByRole('checkbox');
     expect(trigger.props.accessibilityState?.disabled).toBe(true);
 
     fireEvent.press(trigger);
@@ -93,9 +104,11 @@ 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(
-      <Checkbox defaultChecked={false} nativeID='check-1' testID='checkbox' />,
+      <TestWrapper>
+        <Checkbox defaultChecked={false} nativeID='check-1' testID='checkbox' />
+      </TestWrapper>,
     );
 
     expect(getByTestId('checkbox').props.nativeID).toBe('check-1');

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

@@ -1,26 +1,13 @@
-import { cva } from 'class-variance-authority';
 import React from 'react';
-
-import { View } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import { Check } from '../../Symbols';
 import { useControllableState } from '../../utils';
 import { Label } from '../Label';
+import { Box } from '../Utility';
 import { BaseCheckboxIndicator, BaseCheckboxRoot } from './BaseCheckbox';
 
 import { CheckboxProps } from './types';
 
-const checkboxVariants = {
-  root: cva(['flex flex-row items-center gap-8']),
-  icon: cva('shrink-0', {
-    variants: {
-      disabled: {
-        true: 'text-disabled',
-        false: 'text-black',
-      },
-    },
-  }),
-};
-
 /**
  * The checkbox follows the design system tokens and supports checked, unchecked,
  * disabled, and focus states with proper hover and active interactions.
@@ -28,11 +15,11 @@ const checkboxVariants = {
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_selection-checkbox--docs Storybook}
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_selection-checkbox--docs#dos-and-donts Guidelines}
  *
- * @warning The `className` prop should only be used for layout adjustments like margins or positioning.
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
  * Do not use it to modify the checkbox's core appearance.
  *
  * @example
- * import { Checkbox } from '@ledgerhq/lumen-ui-react';
+ * import { Checkbox } from '@ledgerhq/lumen-ui-rnative';
  *
  * // Basic controlled checkbox
  * const [checked, setChecked] = useState(false);
@@ -46,12 +33,13 @@ const checkboxVariants = {
  * <Checkbox defaultChecked={true} onCheckedChange={handleChange} />
  */
 export const Checkbox = React.forwardRef<
-  React.ElementRef<typeof BaseCheckboxRoot>,
+  React.ElementRef<typeof Box>,
   CheckboxProps
 >(
   (
     {
-      className,
+      lx,
+      style,
       checked: checkedProp,
       onCheckedChange: onCheckedChangeProp,
       defaultChecked = false,
@@ -67,17 +55,17 @@ export const Checkbox = React.forwardRef<
       defaultProp: defaultChecked,
     });
 
+    const styles = useStyles({ disabled });
+
     return (
-      <View className={checkboxVariants.root({ className })}>
+      <Box ref={ref} lx={lx} style={[styles.root, style]} {...props}>
         <BaseCheckboxRoot
-          ref={ref}
           disabled={disabled}
           checked={checked}
           onCheckedChange={onCheckedChange}
-          {...props}
         >
           <BaseCheckboxIndicator>
-            <Check size={16} className={checkboxVariants.icon({ disabled })} />
+            <Check size={16} style={styles.icon} />
           </BaseCheckboxIndicator>
         </BaseCheckboxRoot>
         {label && (
@@ -85,9 +73,28 @@ export const Checkbox = React.forwardRef<
             {label}
           </Label>
         )}
-      </View>
+      </Box>
     );
   },
 );
 
+const useStyles = ({ disabled }: { disabled: boolean }) => {
+  return useStyleSheet(
+    (t) => {
+      return {
+        root: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: t.spacings.s8,
+        },
+        icon: {
+          flexShrink: 0,
+          color: disabled ? t.colors.text.disabled : t.colors.text.black,
+        },
+      };
+    },
+    [disabled],
+  );
+};
+
 Checkbox.displayName = 'Checkbox';

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

@@ -1,4 +1,4 @@
-import { SlottablePressableProps } from '../../types';
+import { StyledViewProps } from '../../../styles';
 
 export type CheckboxProps = {
   /**
@@ -21,4 +21,4 @@ export type CheckboxProps = {
    * The label of the checkbox.
    */
   label?: React.ReactNode;
-} & SlottablePressableProps;
+} & StyledViewProps;