@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.46

package/dist/src/lib/Components/Spot/Spot.js

@@ -1,36 +1,63 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cva } from 'class-variance-authority';
 import { useMemo } from 'react';
-import { View, Text } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import { BluetoothCircleFill, CheckmarkCircleFill, DeleteCircleFill, InformationFill, WarningFill, } from '../../Symbols';
 import { Spinner } from '../Spinner';
-const spotVariants = {
-    root: cva('flex items-center justify-center rounded-full bg-muted-transparent', {
-        variants: {
-            size: {
-                48: 'spot-w-48 spot-h-48',
-                56: 'spot-w-56 spot-h-56',
-                72: 'spot-w-72 spot-h-72',
-            },
-        },
-    }),
-    inner: cva('', {
-        variants: {
-            appearance: {
-                icon: 'text-base',
-                bluetooth: 'text-[#0082FC]',
-                check: 'text-success',
-                error: 'text-error',
-                warning: 'text-warning',
-                info: 'text-muted',
-                loader: '',
-                number: 'text-base',
+import { Box } from '../Utility';
+const BLUETOOTH_COLOR = '#0082FC';
+const iconSizeMap = {
+    48: 20,
+    56: 24,
+    72: 40,
+};
+const spotSizeMap = {
+    48: 48,
+    56: 56,
+    72: 72,
+};
+const numberTypographyMap = {
+    48: 'heading4',
+    56: 'heading3',
+    72: 'heading1',
+};
+const useStyles = ({ size, appearance, disabled, }) => {
+    return useStyleSheet((t) => {
+        const colorMap = {
+            icon: t.colors.text.base,
+            bluetooth: BLUETOOTH_COLOR,
+            check: t.colors.text.success,
+            error: t.colors.text.error,
+            warning: t.colors.text.warning,
+            info: t.colors.text.muted,
+            loader: t.colors.text.base,
+            number: t.colors.text.base,
+        };
+        const spotSize = spotSizeMap[size];
+        const typography = t.typographies[numberTypographyMap[size]];
+        const contentColor = disabled
+            ? t.colors.text.disabled
+            : colorMap[appearance];
+        return {
+            root: {
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: t.borderRadius.full,
+                backgroundColor: t.colors.bg.mutedTransparent,
+                width: spotSize,
+                height: spotSize,
             },
-            disabled: {
-                true: 'text-disabled',
+            icon: {
+                color: contentColor,
             },
-        },
-    }),
+            numberText: StyleSheet.flatten([
+                typography,
+                {
+                    color: contentColor,
+                },
+            ]),
+        };
+    }, [size, appearance, disabled]);
 };
 /**
  * A circular status indicator component that displays different types of content based on appearance.
@@ -42,7 +69,7 @@ const spotVariants = {
  *
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_media-graphics-spot--docs Storybook}
  *
- * @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 spot's core appearance (colors, size, etc). Use the `appearance` prop instead.
  *
  * @example
@@ -67,45 +94,31 @@ const spotVariants = {
  * <Spot appearance="bluetooth" disabled />
  */
 export const Spot = (props) => {
-    const { appearance, className, disabled, size = 48, ...rest } = props;
-    const sizeMap = {
-        48: 20,
-        56: 24,
-        72: 40,
-    };
-    const numberTypographyMap = {
-        48: 'heading-4',
-        56: 'heading-3',
-        72: 'heading-1',
-    };
-    const calculatedIconSize = sizeMap[size] ?? 20;
-    const calculatedNumberTypography = numberTypographyMap[size] ?? 'heading-4';
+    const { appearance, disabled = false, size = 48, lx = {}, style, ...rest } = props;
+    const styles = useStyles({ size, appearance, disabled });
+    const calculatedIconSize = iconSizeMap[size];
     const content = useMemo(() => {
         switch (props.appearance) {
             case 'icon': {
                 const { icon: Icon } = props;
-                return (_jsx(Icon, { size: calculatedIconSize, className: spotVariants.inner({ appearance, disabled }) }));
+                return _jsx(Icon, { size: calculatedIconSize, style: styles.icon });
             }
             case 'number': {
-                return (_jsx(Text, { className: spotVariants.inner({
-                        appearance,
-                        disabled,
-                        className: calculatedNumberTypography,
-                    }), children: props.number }));
+                return _jsx(Text, { style: styles.numberText, children: props.number });
             }
             case 'bluetooth':
-                return (_jsx(BluetoothCircleFill, { className: spotVariants.inner({ appearance, disabled }), size: calculatedIconSize }));
+                return (_jsx(BluetoothCircleFill, { size: calculatedIconSize, style: styles.icon }));
             case 'check':
-                return (_jsx(CheckmarkCircleFill, { className: spotVariants.inner({ appearance, disabled }), size: calculatedIconSize }));
+                return (_jsx(CheckmarkCircleFill, { size: calculatedIconSize, style: styles.icon }));
             case 'error':
-                return (_jsx(DeleteCircleFill, { className: spotVariants.inner({ appearance, disabled }), size: calculatedIconSize }));
+                return (_jsx(DeleteCircleFill, { size: calculatedIconSize, style: styles.icon }));
             case 'warning':
-                return (_jsx(WarningFill, { className: spotVariants.inner({ appearance, disabled }), size: calculatedIconSize }));
+                return _jsx(WarningFill, { size: calculatedIconSize, style: styles.icon });
             case 'info':
-                return (_jsx(InformationFill, { className: spotVariants.inner({ appearance, disabled }), size: calculatedIconSize }));
+                return (_jsx(InformationFill, { size: calculatedIconSize, style: styles.icon }));
             case 'loader':
-                return (_jsx(Spinner, { className: spotVariants.inner({ appearance, disabled }), size: calculatedIconSize }));
+                return (_jsx(Spinner, { size: calculatedIconSize, color: styles.icon.color }));
         }
-    }, [props, calculatedIconSize, calculatedNumberTypography]);
-    return (_jsx(View, { testID: 'spot-container', className: spotVariants.root({ size, className }), ...rest, children: content }));
+    }, [props, calculatedIconSize, styles.icon, styles.numberText]);
+    return (_jsx(Box, { testID: 'spot-container', lx: lx, style: StyleSheet.flatten([styles.root, style]), ...rest, children: content }));
 };

package/dist/src/lib/Components/Spot/Spot.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spot.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spot/Spot.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAKvE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAsD3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAiBlB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAoChC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAiB1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAY5B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA8C3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA6B5B,CAAC"}
+{"version":3,"file":"Spot.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spot/Spot.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAKvE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAsD3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAiBlB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAkDhC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAiB1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAmB5B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAmB3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAyD5B,CAAC"}

package/dist/src/lib/Components/Spot/Spot.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { View, Text } from 'react-native';
 import { Settings, Plus, Heart, Star } from '../../Symbols';
+import { Box, Text } from '../Utility';
 import { Spot } from './Spot';
 const meta = {
     component: Spot,
@@ -88,7 +88,17 @@ export const AppearanceShowcase = {
             { name: 'Loader', appearance: 'loader' },
             { name: 'Number', appearance: 'number', number: 3 },
         ];
-        return (_jsx(View, { className: 'flex flex-row flex-wrap gap-16 p-8 text-base', children: appearances.map(({ name, appearance, icon, number }) => (_jsxs(View, { className: 'flex w-64 flex-col items-center gap-4', children: [_jsx(Spot, { appearance: appearance, icon: icon, number: number }), _jsx(Text, { className: 'text-center text-muted', children: name })] }, appearance))) }));
+        return (_jsx(Box, { lx: {
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                gap: 's16',
+                padding: 's8',
+            }, children: appearances.map(({ name, appearance, icon, number }) => (_jsxs(Box, { lx: {
+                    width: 's64',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: 's4',
+                }, children: [_jsx(Spot, { appearance: appearance, icon: icon, number: number }), _jsx(Text, { typography: 'body3', lx: { color: 'muted' }, children: name })] }, appearance))) }));
     },
 };
 export const IconVariants = {
@@ -99,33 +109,48 @@ export const IconVariants = {
             { name: 'Heart', component: Heart },
             { name: 'Star', component: Star },
         ];
-        return (_jsx(View, { className: 'flex flex-row gap-8 p-8', children: icons.map(({ name, component: Icon }) => (_jsx(Spot, { appearance: 'icon', icon: Icon }, name))) }));
+        return (_jsx(Box, { lx: { flexDirection: 'row', gap: 's8', padding: 's8' }, children: icons.map(({ name, component: Icon }) => (_jsx(Spot, { appearance: 'icon', icon: Icon }, name))) }));
     },
 };
 export const NumberVariants = {
     render: () => {
         const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
-        return (_jsx(View, { className: 'flex flex-row flex-wrap gap-8 p-8', children: numbers.map((num) => (_jsx(Spot, { appearance: 'number', number: num }, num))) }));
+        return (_jsx(Box, { lx: {
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                gap: 's8',
+                padding: 's8',
+            }, children: numbers.map((num) => (_jsx(Spot, { appearance: 'number', number: num }, num))) }));
     },
 };
 export const SizesShowcase = {
     render: () => {
-        const appearances = [
-            { name: 'Icon', appearance: 'icon', icon: Settings },
-            { name: 'Bluetooth', appearance: 'bluetooth' },
-            { name: 'Check', appearance: 'check' },
-            { name: 'Error', appearance: 'error' },
-            { name: 'Warning', appearance: 'warning' },
-            { name: 'Info', appearance: 'info' },
-            { name: 'Loader', appearance: 'loader' },
-            { name: 'Number', appearance: 'number', number: 5 },
-        ];
         const sizes = [48, 56, 72];
-        return (_jsx(View, { className: 'flex flex-col gap-16 p-8 text-base', children: sizes.map((size) => (_jsxs(View, { className: 'flex flex-col gap-4', children: [_jsxs(Text, { children: ["Size ", size, "px"] }), _jsx(View, { className: 'flex flex-row flex-wrap gap-16', children: appearances.map(({ name, appearance, icon, number }) => (_jsxs(View, { className: 'flex flex-col items-center gap-4', children: [_jsx(Spot, { appearance: appearance, icon: icon, number: number, size: size }), _jsx(Text, { className: 'text-center text-muted', children: name })] }, `${appearance}-${size}`))) })] }, size))) }));
+        return (_jsx(Box, { lx: { flexDirection: 'column', gap: 's32', padding: 's16' }, children: sizes.map((size) => (_jsxs(Box, { lx: { flexDirection: 'column', gap: 's16' }, children: [_jsxs(Text, { typography: 'heading4SemiBold', children: [size, "px"] }), _jsxs(Box, { lx: { flexDirection: 'row', gap: 's12' }, children: [_jsx(Spot, { appearance: 'icon', icon: Settings, size: size }), _jsx(Spot, { appearance: 'info', size: size }), _jsx(Spot, { appearance: 'number', number: 5, size: size })] })] }, size))) }));
     },
 };
 export const StatesShowcase = {
     render: () => {
-        return (_jsxs(View, { className: 'flex flex-col gap-16 text-base', children: [_jsxs(View, { className: 'flex flex-col gap-8', children: [_jsx(Text, { children: "Default" }), _jsxs(View, { className: 'flex flex-row flex-wrap gap-16', children: [_jsx(View, { className: 'flex w-64 flex-col items-center gap-4', children: _jsx(Spot, { appearance: 'icon', icon: Settings }) }), _jsx(View, { className: 'flex w-64 flex-col items-center gap-4', children: _jsx(Spot, { appearance: 'bluetooth' }) })] })] }), _jsxs(View, { className: 'flex flex-col gap-8', children: [_jsx(Text, { children: "Disabled" }), _jsxs(View, { className: 'flex flex-row flex-wrap gap-16', children: [_jsx(View, { className: 'flex w-64 flex-col items-center gap-4', children: _jsx(Spot, { appearance: 'icon', icon: Settings, disabled: true }) }), _jsx(View, { className: 'flex w-64 flex-col items-center gap-4', children: _jsx(Spot, { appearance: 'bluetooth', disabled: true }) })] })] })] }));
+        return (_jsxs(Box, { lx: { flexDirection: 'column', gap: 's16' }, children: [_jsxs(Box, { lx: { flexDirection: 'column', gap: 's8' }, children: [_jsx(Text, { typography: 'body2', children: "Default" }), _jsxs(Box, { lx: { flexDirection: 'row', flexWrap: 'wrap', gap: 's16' }, children: [_jsx(Box, { lx: {
+                                        width: 's64',
+                                        flexDirection: 'column',
+                                        alignItems: 'center',
+                                        gap: 's4',
+                                    }, children: _jsx(Spot, { appearance: 'icon', icon: Settings }) }), _jsx(Box, { lx: {
+                                        width: 's64',
+                                        flexDirection: 'column',
+                                        alignItems: 'center',
+                                        gap: 's4',
+                                    }, children: _jsx(Spot, { appearance: 'bluetooth' }) })] })] }), _jsxs(Box, { lx: { flexDirection: 'column', gap: 's8' }, children: [_jsx(Text, { typography: 'body2', children: "Disabled" }), _jsxs(Box, { lx: { flexDirection: 'row', flexWrap: 'wrap', gap: 's16' }, children: [_jsx(Box, { lx: {
+                                        width: 's64',
+                                        flexDirection: 'column',
+                                        alignItems: 'center',
+                                        gap: 's4',
+                                    }, children: _jsx(Spot, { appearance: 'icon', icon: Settings, disabled: true }) }), _jsx(Box, { lx: {
+                                        width: 's64',
+                                        flexDirection: 'column',
+                                        alignItems: 'center',
+                                        gap: 's4',
+                                    }, children: _jsx(Spot, { appearance: 'bluetooth', disabled: true }) })] })] })] }));
     },
 };

package/dist/src/lib/Components/Spot/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Spot';
+export * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/lib/Components/Spot/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spot/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spot/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}

package/dist/src/lib/Components/Spot/index.js

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

package/dist/src/lib/Components/Spot/types.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { StyledViewProps } from '../../../styles';
+import { IconProps } from '../Icon';
+export type SpotAppearance = 'icon' | 'bluetooth' | 'check' | 'error' | 'warning' | 'info' | 'loader' | 'number';
+type IconSpotProps = {
+    /**
+     * Displays a custom icon with neutral base styling.
+     */
+    appearance: 'icon';
+    /**
+     * A React component to be rendered as the icon. Required when appearance is 'icon'.
+     */
+    icon: React.ComponentType<IconProps>;
+};
+type NumberSpotProps = {
+    /**
+     * Displays a single digit (0-9) with number styling.
+     */
+    appearance: 'number';
+    /**
+     * A single digit from 0 to 9 to display. Required when appearance is 'number'.
+     */
+    number: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+};
+type StatusSpotProps = {
+    /**
+     * Self-contained predefined status indicators with semantic styling.
+     */
+    appearance: Exclude<SpotAppearance, 'icon' | 'number'>;
+};
+type DiscriminatedSpotProps = IconSpotProps | NumberSpotProps | StatusSpotProps;
+export type SpotSize = 48 | 56 | 72;
+export type SpotProps = {
+    /**
+     * Whether the spot is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The size of the spot.
+     * @default 48
+     */
+    size?: SpotSize;
+} & DiscriminatedSpotProps & StyledViewProps;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/src/lib/Components/Spot/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spot/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,MAAM,cAAc,GACtB,MAAM,GACN,WAAW,GACX,OAAO,GACP,OAAO,GACP,SAAS,GACT,MAAM,GACN,QAAQ,GACR,QAAQ,CAAC;AAEb,KAAK,aAAa,GAAG;IACnB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;CACtC,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB;;OAEG;IACH,UAAU,EAAE,QAAQ,CAAC;IACrB;;OAEG;IACH,MAAM,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC/C,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC,cAAc,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC;CACxD,CAAC;AAEF,KAAK,sBAAsB,GAAG,aAAa,GAAG,eAAe,GAAG,eAAe,CAAC;AAChF,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEpC,MAAM,MAAM,SAAS,GAAG;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,GAAG,sBAAsB,GACxB,eAAe,CAAC"}

package/dist/src/lib/Components/Spot/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/Components/Switch/BaseSwitch.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { View } from 'react-native';
 import { SwitchProps } from './types';
-declare const BaseSwitchRoot: React.ForwardRefExoticComponent<Omit<import("react-native").PressableProps & React.RefAttributes<View>, "ref"> & {
+declare const BaseSwitchRoot: React.ForwardRefExoticComponent<Omit<import("react-native").PressableProps & React.RefAttributes<import("react-native").View>, "ref"> & {
     asChild?: boolean;
 } & {
     onKeyDown?: (ev: React.KeyboardEvent) => void;
@@ -12,9 +11,9 @@ declare const BaseSwitchRoot: React.ForwardRefExoticComponent<Omit<import("react
     disabled?: SwitchProps["disabled"];
     size?: SwitchProps["size"];
     onKeyDown?: (ev: React.KeyboardEvent) => void;
-} & React.RefAttributes<View>>;
+} & React.RefAttributes<import("react-native").View>>;
 declare const BaseSwitchThumb: React.ForwardRefExoticComponent<import("react-native").ViewProps & {
     asChild?: boolean;
-} & React.RefAttributes<View>>;
+} & React.RefAttributes<import("react-native").View>>;
 export { BaseSwitchRoot, BaseSwitchThumb };
 //# sourceMappingURL=BaseSwitch.d.ts.map

package/dist/src/lib/Components/Switch/BaseSwitch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSwitch.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Switch/BaseSwitch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAa,IAAI,EAA8B,MAAM,cAAc,CAAC;AAU3E,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AA+EtC,QAAA,MAAM,cAAc;;;;;;aAVT,WAAW,CAAC,SAAS,CAAC;qBACd,WAAW,CAAC,iBAAiB,CAAC;eACpC,WAAW,CAAC,UAAU,CAAC;WAC3B,WAAW,CAAC,MAAM,CAAC;gBACd,CAAC,EAAE,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI;8BAgE9C,CAAC;AAGF,QAAA,MAAM,eAAe;;8BAsBpB,CAAC;AAGF,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"BaseSwitch.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Switch/BaseSwitch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAiB9D,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAgBtC,QAAA,MAAM,cAAc;;;;;;aAVT,WAAW,CAAC,SAAS,CAAC;qBACd,WAAW,CAAC,iBAAiB,CAAC;eACpC,WAAW,CAAC,UAAU,CAAC;WAC3B,WAAW,CAAC,MAAM,CAAC;gBACd,CAAC,EAAE,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI;qDAkE9C,CAAC;AAGF,QAAA,MAAM,eAAe;;qDA4DpB,CAAC;AAwFF,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}

package/dist/src/lib/Components/Switch/BaseSwitch.js

@@ -1,69 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
-import { cva } from 'class-variance-authority';
-import React, { useCallback } from 'react';
-import { Pressable, View } from 'react-native';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { Animated, Pressable, StyleSheet, } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import { SlotPressable, SlotView } from '../Slot';
 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',
-            },
-        ],
-    }),
-};
 const [BaseSwitchProvider, useBaseSwitchContext] = createSafeContext(ROOT_COMPONENT_NAME);
-const BaseSwitchRoot = React.forwardRef(({ asChild, checked, size = 'md', onCheckedChange, disabled = false, className, onPress: onPressProp, 'aria-valuetext': ariaValueText, ...props }, ref) => {
+const BaseSwitchRoot = React.forwardRef(({ asChild, checked, size = 'md', onCheckedChange, disabled = false, onPress: onPressProp, 'aria-valuetext': ariaValueText, ...props }, ref) => {
+    const styles = useStyles({
+        checked: !!checked,
+        disabled: !!disabled,
+        size,
+    });
     const onPress = useCallback((ev) => {
         if (disabled)
             return;
@@ -76,29 +25,116 @@ const BaseSwitchRoot = React.forwardRef(({ asChild, checked, size = 'md', onChec
             onCheckedChange,
             disabled,
             size,
-        }, children: _jsx(Component, { className: baseSwitchVariants.root({
-                className,
+        }, children: _jsx(Component, { style: styles.root, ref: ref, "aria-disabled": disabled, role: 'switch', "aria-checked": checked, onPress: onPress, accessibilityState: {
                 checked,
                 disabled,
-                size,
-            }), ref: ref, "aria-disabled": disabled, role: 'switch', "aria-checked": checked, "aria-valuetext": ariaValueText ?? (checked ? 'on' : 'off'), onPress: onPress, accessibilityState: {
-                checked,
-                disabled,
-            }, disabled: disabled, ...props }) }));
+            }, accessibilityValue: ariaValueText ? { text: ariaValueText } : undefined, disabled: disabled, ...props }) }));
 });
 BaseSwitchRoot.displayName = ROOT_COMPONENT_NAME;
-const BaseSwitchThumb = React.forwardRef(({ asChild, className, ...props }, ref) => {
+const BaseSwitchThumb = React.forwardRef(({ asChild, ...props }, ref) => {
     const { checked, disabled, size } = useBaseSwitchContext({
         consumerName: THUMB_COMPONENT_NAME,
         contextRequired: true,
     });
-    const Component = asChild ? SlotView : View;
-    return (_jsx(Component, { ref: ref, role: 'presentation', className: baseSwitchVariants.thumb({
-            className,
-            checked,
-            disabled,
-            size,
-        }), ...props }));
+    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 = () => {
+        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 (_jsx(Component, { ref: ref, role: 'presentation', style: styles.thumb, ...props }));
+    }
+    return (_jsx(Animated.View, { ref: ref, role: 'presentation', style: [styles.thumbBase, animatedStyle], ...props }));
 });
+const useStyles = ({ checked, disabled, size, }) => {
+    return useStyleSheet((t) => {
+        const sizes = {
+            sm: { width: t.sizes.s24, height: t.sizes.s16 },
+            md: { width: t.sizes.s40, height: t.sizes.s24 },
+        };
+        const thumbSizes = {
+            sm: { size: t.sizes.s12 },
+            md: { size: t.sizes.s20 },
+        };
+        const thumbTranslations = {
+            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/dist/src/lib/Components/Switch/Switch.d.ts

@@ -6,11 +6,11 @@ import React from 'react';
  * @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.
+ * @warning The `lx` 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';
+ * import { Switch } from '@ledgerhq/lumen-ui-rnative';
  *
  * // Basic controlled switch
  * const [checked, setChecked] = useState(false);
@@ -28,10 +28,5 @@ export declare const Switch: React.ForwardRefExoticComponent<{
     size?: "sm" | "md";
     onCheckedChange?: (checked: boolean) => void;
     defaultChecked?: boolean;
-} & Omit<import("react-native").PressableProps & React.RefAttributes<import("react-native").View>, "ref"> & {
-    asChild?: boolean;
-} & {
-    onKeyDown?: (ev: React.KeyboardEvent) => void;
-    onKeyUp?: (ev: React.KeyboardEvent) => void;
-} & React.RefAttributes<import("react-native").View>>;
+} & Omit<import("../../../styles").StyledPressableProps, "children"> & React.RefAttributes<import("react-native").View>>;
 //# sourceMappingURL=Switch.d.ts.map

package/dist/src/lib/Components/Switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;qDAiClB,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,MAAM;;;;;;wHAoClB,CAAC"}

package/dist/src/lib/Components/Switch/Switch.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { useControllableState } from '../../utils';
+import { Pressable } from '../Utility';
 import { BaseSwitchThumb, BaseSwitchRoot } from './BaseSwitch';
 /**
  * The switch follows the design system tokens and supports checked, unchecked,
@@ -9,11 +10,11 @@ import { BaseSwitchThumb, BaseSwitchRoot } from './BaseSwitch';
  * @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.
+ * @warning The `lx` 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';
+ * import { Switch } from '@ledgerhq/lumen-ui-rnative';
  *
  * // Basic controlled switch
  * const [checked, setChecked] = useState(false);
@@ -25,12 +26,12 @@ import { BaseSwitchThumb, BaseSwitchRoot } from './BaseSwitch';
  * // Uncontrolled switch with default state
  * <Switch defaultChecked={true} onCheckedChange={handleChange} />
  */
-export const Switch = React.forwardRef(({ className, checked: checkedProp, onCheckedChange: onCheckedChangeProp, defaultChecked = false, disabled, ...props }, ref) => {
+export const Switch = React.forwardRef(({ lx, style, checked: checkedProp, onCheckedChange: onCheckedChangeProp, defaultChecked = false, disabled, size = 'md', ...props }, ref) => {
     const [checked, onCheckedChange] = useControllableState({
         prop: checkedProp,
         onChange: onCheckedChangeProp,
         defaultProp: defaultChecked,
     });
-    return (_jsx(BaseSwitchRoot, { ref: ref, disabled: disabled, checked: checked, onCheckedChange: onCheckedChange, ...props, children: _jsx(BaseSwitchThumb, {}) }));
+    return (_jsx(Pressable, { ref: ref, lx: lx, style: style, ...props, children: _jsx(BaseSwitchRoot, { disabled: disabled, checked: checked, onCheckedChange: onCheckedChange, size: size, children: _jsx(BaseSwitchThumb, {}) }) }));
 });
 Switch.displayName = 'Switch';

package/dist/src/lib/Components/Switch/Switch.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Switch/Switch.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA+B7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAQlB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KA2BvB,CAAC"}
+{"version":3,"file":"Switch.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Switch/Switch.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA+B7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAkBlB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAoCvB,CAAC"}