@ledgerhq/lumen-ui-rnative 0.0.42

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

@@ -0,0 +1,96 @@
+import { describe, it, expect, jest } from '@jest/globals';
+import { render, fireEvent, waitFor } from '@testing-library/react-native';
+import { Switch } from './Switch';
+
+describe('Switch', () => {
+  it('uncontrolled: toggles on press and reflects checked state', async () => {
+    const { getByTestId } = render(
+      <Switch defaultChecked={false} testID='switch' />,
+    );
+
+    expect(getByTestId('switch').props.accessibilityState?.checked).toBe(false);
+
+    fireEvent.press(getByTestId('switch'));
+
+    await waitFor(() =>
+      expect(getByTestId('switch').props.accessibilityState?.checked).toBe(
+        true,
+      ),
+    );
+  });
+
+  it('controlled: calls onCheckedChange but state is controlled by parent', async () => {
+    const onChange = jest.fn();
+    const { getByTestId, rerender } = render(
+      <Switch checked={false} onCheckedChange={onChange} testID='switch' />,
+    );
+
+    expect(getByTestId('switch').props.accessibilityState?.checked).toBe(false);
+
+    fireEvent.press(getByTestId('switch'));
+
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith(true));
+    await waitFor(() =>
+      expect(getByTestId('switch').props.accessibilityState?.checked).toBe(
+        false,
+      ),
+    );
+
+    rerender(
+      <Switch checked={true} onCheckedChange={onChange} testID='switch' />,
+    );
+
+    await waitFor(() =>
+      expect(getByTestId('switch').props.accessibilityState?.checked).toBe(
+        true,
+      ),
+    );
+  });
+
+  it('disabled: does not toggle on press', async () => {
+    const onChange = jest.fn();
+    const { getByTestId } = render(
+      <Switch
+        disabled
+        defaultChecked={false}
+        onCheckedChange={onChange}
+        testID='switch'
+      />,
+    );
+
+    const trigger = getByTestId('switch');
+    expect(trigger.props.accessibilityState?.disabled).toBe(true);
+
+    fireEvent.press(trigger);
+
+    await waitFor(() => expect(onChange).not.toHaveBeenCalled());
+    await waitFor(() =>
+      expect(getByTestId('switch').props.accessibilityState?.checked).toBe(
+        false,
+      ),
+    );
+  });
+
+  it('supports aria-valuetext on/off through checked state or custom value if defined', () => {
+    const { getByTestId, rerender } = render(
+      <Switch checked={false} testID='switch' />,
+    );
+    expect(getByTestId('switch').props['aria-valuetext']).toBe('off');
+
+    rerender(
+      <Switch checked={true} onCheckedChange={jest.fn()} testID='switch' />,
+    );
+    expect(getByTestId('switch').props['aria-valuetext']).toBe('on');
+
+    rerender(<Switch testID='switch' aria-valuetext='custom' />);
+    expect(getByTestId('switch').props['aria-valuetext']).toBe('custom');
+  });
+
+  it('supports custom aria-valuetext value', () => {
+    const { getByTestId } = render(
+      <Switch testID='switch' aria-valuetext='custom' />,
+    );
+
+    expect(getByTestId('switch').props['aria-valuetext']).toBe('custom');
+  });
+});

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

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import { useControllableState } from '../../utils';
+import { BaseSwitchThumb, BaseSwitchRoot } from './BaseSwitch';
+
+import { SwitchProps } from './types';
+
+/**
+ * The switch follows the design system tokens and supports checked, unchecked,
+ * disabled, and focus states with proper active interactions.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/react-native_selection-switch--docs Storybook}
+ * @see {@link https://ldls.vercel.app/?path=/docs/react-native_selection-switch--docs#dos-and-donts Guidelines}
+ *
+ * @warning The `className` prop should only be used for layout adjustments like margins or positioning.
+ * Do not use it to modify the switch's core appearance.
+ *
+ * @example
+ * import { Switch } from '@ledgerhq/lumen-ui-react';
+ *
+ * // Basic controlled switch
+ * const [checked, setChecked] = useState(false);
+ * <Switch
+ *   checked={checked}
+ *   onCheckedChange={setChecked}
+ * />
+ *
+ * // Uncontrolled switch with default state
+ * <Switch defaultChecked={true} onCheckedChange={handleChange} />
+ */
+export const Switch = React.forwardRef<
+  React.ElementRef<typeof BaseSwitchRoot>,
+  SwitchProps
+>(
+  (
+    {
+      className,
+      checked: checkedProp,
+      onCheckedChange: onCheckedChangeProp,
+      defaultChecked = false,
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const [checked, onCheckedChange] = useControllableState({
+      prop: checkedProp,
+      onChange: onCheckedChangeProp,
+      defaultProp: defaultChecked,
+    });
+
+    return (
+      <BaseSwitchRoot
+        ref={ref}
+        disabled={disabled}
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+        {...props}
+      >
+        <BaseSwitchThumb />
+      </BaseSwitchRoot>
+    );
+  },
+);
+
+Switch.displayName = 'Switch';

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

@@ -0,0 +1 @@
+export * from './Switch';

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

@@ -0,0 +1,28 @@
+import { SlottablePressableProps } from '../../types';
+
+export type SwitchProps = {
+  /**
+   * The disabled state of the switch.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The controlled checked state of the switch.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * The size of the switch.
+   * @default 'md'
+   */
+  size?: 'sm' | 'md';
+  /**
+   * The callback function called when the checked state changes.
+   */
+  onCheckedChange?: (checked: boolean) => void;
+  /**
+   * Sets the initial checked state for uncontrolled Switch.
+   * @default false
+   */
+  defaultChecked?: boolean;
+} & SlottablePressableProps;

package/src/lib/Components/Tag/Tag.mdx

@@ -0,0 +1,171 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as TagStories from './Tag.stories';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
+import CommonRulesDoAndDont from '../../../../.storybook/docs/CommonRulesDoAndDont.mdx';
+
+<Meta title='Components/Tag' of={TagStories} />
+
+# 🏷️ Tag
+
+<CustomTabs>
+  <Tab label="Overview">
+
+View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=722-5547&m=dev)
+
+## Anatomy
+
+- **Label:** The text content of the tag.
+- **Icon (optional):** An optional icon displayed before the label.
+
+## Properties
+
+### Overview
+
+<Canvas of={TagStories.Default} />
+<Controls of={TagStories.Default} />
+
+### Appearance
+
+<Canvas of={TagStories.Showcase} />
+
+---
+
+### Size
+
+Tags come in two different sizes:
+
+- **lg** (default)
+- **sm**
+
+<Canvas of={TagStories.SizesShowcase} />
+
+### Icon
+
+Tags can be displayed with or without an icon.
+
+<Canvas of={TagStories.ContentTypesShowcase} />
+
+### Accessibility
+
+To be implemented:
+
+- **Color contrast**
+- **Text zoom**
+- **Touch targets**
+- **Screen reader support**
+- **Semantic labeling**
+
+</Tab>
+<Tab label="Implementation">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+### Basic Usage
+
+```tsx
+import { Tag } from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return <Tag size='lg' appearance='accent' label='My Tag' />;
+}
+```
+
+### Custom Styling
+
+While the component comes with predefined styles, you can extend them using NativeWind classes:
+
+```tsx
+<Tag
+  size='lg'
+  appearance='accent'
+  label='Custom Tag'
+  className='mt-4' // Custom margin
+/>
+```
+
+### With Icons
+
+The Tag component supports icons with automatic size adjustment based on the tag size:
+
+```tsx
+import { Tag } from '@ledgerhq/lumen-ui-rnative';
+import { Check } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function MyComponent() {
+  return <Tag size='lg' appearance='success' icon={Check} label='Success' />;
+}
+```
+
+## Do's and Don'ts
+
+<div className='flex flex-col gap-24'>
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Use standard size variants'
+      description='Use the size prop with predefined variants (xs, sm, md, lg)'
+    >
+
+{/* prettier-ignore */}
+```tsx
+import { Check } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+<Tag size='sm' icon={Check} label='Success' />
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't use custom sizes"
+      description='Avoid using style prop to override standard sizes'
+    >
+
+{/* prettier-ignore */}
+```tsx
+import { Check } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+<Tag style={{ height: 52 }} icon={Check} label='Success' />
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Provide proper accessibility props'
+      description='Use accessible and accessibilityRole props for screen reader support'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Tag
+  label='Important'
+  accessible={true}
+  accessibilityRole='text'
+/>
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't omit accessibility props"
+      description='Avoid creating tags without accessibility support for screen readers'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Tag
+  label='Important'
+/>
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+  <CommonRulesDoAndDont />
+</div>
+
+</Tab>
+</CustomTabs>

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

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { View } from 'react-native';
+import { Check } from '../../Symbols/Icons/Check';
+import { Tag } from './Tag';
+
+const meta: Meta<typeof Tag> = {
+  component: Tag,
+  title: 'Communication/Tag',
+  argTypes: {
+    appearance: {
+      control: 'select',
+      options: ['base', 'gray', 'accent', 'success', 'error', 'warning'],
+    },
+    size: {
+      control: 'radio',
+      options: ['sm', 'lg'],
+    },
+    label: {
+      control: 'text',
+    },
+    icon: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Show icon',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tag>;
+
+export const Default: Story = {
+  args: {
+    label: 'Label',
+    appearance: 'accent',
+    size: 'lg',
+  },
+  render: (args) => <Tag {...args} icon={args.icon ? Check : undefined} />,
+};
+
+export const Showcase: Story = {
+  render: () => (
+    <View className='flex flex-col gap-16'>
+      <View className='flex flex-row gap-4'>
+        <Tag appearance='base' label='Base' />
+        <Tag appearance='gray' label='Gray' />
+        <Tag appearance='accent' label='Accent' />
+        <Tag appearance='success' label='Success' />
+        <Tag appearance='error' label='Error' />
+        <Tag appearance='warning' label='Warning' />
+        <Tag appearance='disabled' label='Disabled' />
+      </View>
+      <View className='flex flex-row gap-4'>
+        <Tag appearance='base' label='Base' icon={Check} />
+        <Tag appearance='gray' label='Gray' icon={Check} />
+        <Tag appearance='accent' label='Accent' icon={Check} />
+        <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} />
+      </View>
+    </View>
+  ),
+};
+
+export const SizesShowcase: Story = {
+  render: () => (
+    <View className='flex flex-row items-center gap-4'>
+      <Tag size='lg' label='Large Tag' />
+      <Tag size='sm' label='Small Tag' />
+    </View>
+  ),
+};
+
+export const ContentTypesShowcase: Story = {
+  render: () => (
+    <View className='flex flex-row items-center gap-4'>
+      <Tag label='Label only' />
+      <Tag icon={Check} label='Icon and Label' />
+    </View>
+  ),
+};

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

@@ -0,0 +1,76 @@
+import { cn } from '@ledgerhq/lumen-utils-shared';
+import { cva } from 'class-variance-authority';
+import React from 'react';
+import { View, Text } from 'react-native';
+import { IconSize } from '../Icon';
+import { TagProps } from './Tag.types';
+
+const tagVariants = {
+  root: cva(
+    'inline-flex w-fit flex-row items-center justify-center gap-4 rounded-xs',
+    {
+      variants: {
+        appearance: {
+          base: 'bg-muted-transparent',
+          gray: 'bg-muted-transparent',
+          accent: 'bg-accent',
+          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',
+        },
+      },
+      defaultVariants: {
+        appearance: 'accent',
+        size: 'lg',
+      },
+    },
+  ),
+  inner: cva('', {
+    variants: {
+      appearance: {
+        base: 'text-base',
+        gray: 'text-muted',
+        accent: 'text-on-accent',
+        success: 'text-success',
+        error: 'text-error',
+        warning: 'text-warning',
+        disabled: 'text-disabled',
+      },
+    },
+  }),
+};
+
+export const Tag = React.forwardRef<View, TagProps>(
+  ({ className, appearance, size, icon, label, ...props }, ref) => {
+    const iconSizeMap: { [key: string]: IconSize } = {
+      lg: 16,
+      sm: 12,
+    };
+
+    const calculatedIconSize = size ? iconSizeMap[size] : 16;
+    const IconComponent = icon;
+
+    return (
+      <View
+        className={cn(className, tagVariants.root({ appearance, size }))}
+        ref={ref}
+        {...props}
+      >
+        {IconComponent && (
+          <IconComponent
+            size={calculatedIconSize}
+            className={tagVariants.inner({ appearance, className: 'shrink-0' })}
+          />
+        )}
+        <Text className={tagVariants.inner({ appearance })}>{label}</Text>
+      </View>
+    );
+  },
+);
+
+Tag.displayName = 'Tag';

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

@@ -0,0 +1,29 @@
+import { ComponentType } from 'react';
+import { ViewProps } from 'react-native';
+import { IconSize } from '../Icon';
+
+export type TagProps = {
+  /**
+   * The appearance of the tag.
+   */
+  appearance?:
+    | 'base'
+    | 'gray'
+    | 'accent'
+    | 'success'
+    | 'error'
+    | 'warning'
+    | 'disabled';
+  /**
+   * The icon of the tag.
+   */
+  icon?: ComponentType<{ size?: IconSize; className?: string }>;
+  /**
+   * The label of the tag.
+   */
+  label: string;
+  /**
+   * The size of the tag.
+   */
+  size?: 'sm' | 'lg';
+} & ViewProps;

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

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

package/src/lib/Components/Text/Text.mdx

@@ -0,0 +1,70 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as TextStories from './Text.stories';
+
+<Meta title='Utility/Text' of={TextStories} />
+
+# Text
+
+Text is a typography component that wraps React Native's `Text` with a `typo` prop for typography presets and token-constrained style props from the design system theme.
+
+## Interactive Example
+
+<Canvas of={TextStories.Base} />
+<Controls of={TextStories.Base} />
+
+## Available Typographies
+
+The `typo` property should be used to apply a typography preset that includes font size, font weight, line height, and letter spacing.
+
+### Body
+Used for content text like paragraphs.
+- `body1`, `body1SemiBold`
+- `body2`, `body2SemiBold`
+- `body3`, `body3SemiBold` 
+- `body4`, `body4SemiBold` 
+
+### Headings
+Used for section titles like page titles.
+- `heading0`, `heading0SemiBold`
+- `heading1`, `heading1SemiBold`
+- `heading2`, `heading2SemiBold`
+- `heading3`, `heading3SemiBold`
+- `heading4`, `heading4SemiBold`
+
+
+### Responsive Display
+Used for large hero text like page titles.
+- `responsiveDisplay1`
+- `responsiveDisplay2`
+- `responsiveDisplay3`
+- `responsiveDisplay4`
+
+
+
+## Usage
+
+```tsx
+import { Text } from '@ledgerhq/lumen-ui-rnative';
+
+// Basic usage with typography typo
+<Text typo='body1'>Hello World</Text>
+
+// With custom color
+<Text typo='heading2SemiBold' color='muted'>
+  Subtitle
+</Text>
+
+// With spacing
+<Text typo='body2' marginTop='s8' color='base'>
+  Description text
+</Text>
+```
+
+## Escape Hatch
+
+For values not covered by tokens, use the `style` prop:
+
+```tsx
+<Text typo='body1' style={{ letterSpacing: 2 }} />
+```
+

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

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { Text } from './Text';
+
+const meta: Meta<typeof Text> = {
+  component: Text,
+  title: 'Utility/Text',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Text>;
+
+export const Base: Story = {
+  args: {
+    typo: 'body1',
+    color: 'base',
+    children: 'Hello World',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<Text typo='body1' color='base'>
+  Hello World
+</Text>
+`,
+      },
+    },
+  },
+};