@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

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"}

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

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from '../Utility';
 import { Switch } from './Switch';
 const meta = {
     title: 'Selection/Switch',
     component: Switch,
     parameters: {
-        layout: 'centered',
+        layout: 'fullscreen',
         docs: {
             source: {
                 language: 'tsx',
@@ -38,12 +39,27 @@ export default meta;
  */
 export const Base = {
     render: (args) => {
-        return (_jsx("div", { className: 'flex size-80 items-center justify-center', children: _jsx(Switch, { ...args }) }));
+        return (_jsx(Box, { style: {
+                flex: 1,
+                minHeight: 96,
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: 24,
+            }, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsx(Switch, { ...args }) }) }));
     },
 };
 /**
  * Interactive example showing all states.
  */
 export const AllStates = {
-    render: () => (_jsxs("div", { className: 'grid grid-cols-3 gap-48 p-16 text-base', children: [_jsxs("div", { className: 'space-y-16', children: [_jsx("h3", { className: 'heading-4', children: "Enabled" }), _jsxs("div", { className: 'space-y-8', children: [_jsx("div", { className: 'flex items-center space-x-8', children: _jsx(Switch, { defaultChecked: false }) }), _jsx("div", { className: 'flex items-center space-x-8', children: _jsx(Switch, { "aria-labelledby": '', defaultChecked: true }) })] })] }), _jsxs("div", { className: 'space-y-16', children: [_jsx("h3", { className: 'heading-4', children: "Disabled" }), _jsxs("div", { className: 'space-y-8', children: [_jsx("div", { className: 'flex items-center space-x-8', children: _jsx(Switch, { disabled: true, defaultChecked: false }) }), _jsx("div", { className: 'flex items-center space-x-8', children: _jsx(Switch, { disabled: true, defaultChecked: true }) })] })] })] })),
+    render: () => (_jsx(Box, { style: {
+            flex: 1,
+            minHeight: 96,
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 24,
+        }, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Box, { style: {
+                    flexDirection: 'row',
+                    gap: 48,
+                }, children: [_jsxs(Box, { style: { gap: 16 }, children: [_jsx(Text, { typography: 'heading4', children: "Enabled" }), _jsxs(Box, { style: { gap: 8 }, children: [_jsx(Switch, { defaultChecked: false }), _jsx(Switch, { "aria-labelledby": '', defaultChecked: true })] })] }), _jsxs(Box, { style: { gap: 16 }, children: [_jsx(Text, { typography: 'heading4', children: "Disabled" }), _jsxs(Box, { style: { gap: 8 }, children: [_jsx(Switch, { disabled: true, defaultChecked: false }), _jsx(Switch, { disabled: true, defaultChecked: true })] })] })] }) }) })),
 };

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

@@ -1,4 +1,4 @@
-import { SlottablePressableProps } from '../../types';
+import { StyledPressableProps } from '../../../styles';
 export type SwitchProps = {
     /**
      * The disabled state of the switch.
@@ -24,5 +24,5 @@ export type SwitchProps = {
      * @default false
      */
     defaultChecked?: boolean;
-} & SlottablePressableProps;
+} & Omit<StyledPressableProps, 'children'>;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Switch/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAEtD,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,GAAG,uBAAuB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Switch/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC"}

package/dist/src/lib/Components/Tag/Tag.d.ts

@@ -1,13 +1,38 @@
 import React from 'react';
-import { View } from 'react-native';
-import { IconSize } from '../Icon';
+/**
+ * A compact label used to categorize, classify, or highlight information with optional icon support.
+ *
+ * The appearance determines the color scheme used.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-tag-overview--docs Storybook}
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-tag-implementation--docs#dos-and-donts Guidelines}
+ *
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
+ * Do not use it to modify the tag's core appearance (colors, padding, etc). Use the `appearance` prop instead.
+ *
+ * @example
+ * import { Tag } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * // Basic tag
+ * <Tag label="Label" appearance="accent" />
+ *
+ * // Tag with icon
+ * <Tag
+ *   label="Success"
+ *   appearance="success"
+ *   icon={Check}
+ * />
+ *
+ * // Small tag
+ * <Tag label="Small" size="sm" />
+ */
 export declare const Tag: React.ForwardRefExoticComponent<{
-    appearance?: "base" | "gray" | "accent" | "success" | "error" | "warning" | "disabled";
-    icon?: React.ComponentType<{
-        size?: IconSize;
-        className?: string;
-    }>;
+    appearance?: "base" | "gray" | "accent" | "success" | "error" | "warning";
+    icon?: React.ComponentType<import("../Icon").IconProps>;
     label: string;
-    size?: "sm" | "lg";
-} & import("react-native").ViewProps & React.RefAttributes<View>>;
+    size?: "sm" | "md";
+    disabled?: boolean;
+} & {
+    lx?: import("../../../styles").LumenViewStyle;
+} & import("react-native").ViewProps & React.RefAttributes<import("react-native").View>>;
 //# sourceMappingURL=Tag.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tag/Tag.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAQ,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AA2CnC,eAAO,MAAM,GAAG;;;YApCR,CAAC;iBACG,CAAC;;;;iEA6DZ,CAAC"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAuG1B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,GAAG;;;;;;;;wFA+Bf,CAAC"}

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

@@ -1,51 +1,110 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '@ledgerhq/lumen-utils-shared';
-import { cva } from 'class-variance-authority';
 import React from 'react';
-import { View, Text } from 'react-native';
-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',
+import { StyleSheet, Text } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+import { Box } from '../Utility';
+const useStyles = ({ appearance, size, disabled, }) => {
+    return useStyleSheet((t) => {
+        const bgColors = {
+            base: t.colors.bg.mutedTransparent,
+            gray: t.colors.bg.mutedTransparent,
+            accent: t.colors.bg.accent,
+            success: t.colors.bg.success,
+            error: t.colors.bg.error,
+            warning: t.colors.bg.warning,
+        };
+        const textColors = {
+            base: t.colors.text.base,
+            gray: t.colors.text.muted,
+            accent: t.colors.text.onAccent,
+            success: t.colors.text.success,
+            error: t.colors.text.error,
+            warning: t.colors.text.warning,
+        };
+        const sizeStyles = {
+            md: {
+                height: t.sizes.s24,
+                paddingHorizontal: t.spacings.s8,
+                paddingVertical: t.spacings.s4,
             },
-            size: {
-                lg: 'h-24 px-8 py-4 body-3',
-                sm: 'h-20 px-4 py-2 body-4',
+            sm: {
+                height: t.sizes.s20,
+                paddingHorizontal: t.spacings.s4,
+                paddingVertical: t.spacings.s2,
             },
-        },
-        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',
-            },
-        },
-    }),
+        };
+        const textTypography = size === 'md' ? t.typographies.body3 : t.typographies.body4;
+        return {
+            root: StyleSheet.flatten([
+                {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: t.spacings.s4,
+                    borderRadius: t.borderRadius.xs,
+                    backgroundColor: bgColors[appearance],
+                    ...sizeStyles[size],
+                },
+                disabled && {
+                    backgroundColor: t.colors.bg.disabled,
+                },
+            ]),
+            text: StyleSheet.flatten([
+                textTypography,
+                {
+                    color: textColors[appearance],
+                },
+                disabled && {
+                    color: t.colors.text.disabled,
+                },
+            ]),
+            icon: StyleSheet.flatten([
+                {
+                    flexShrink: 0,
+                    color: textColors[appearance],
+                },
+                disabled && {
+                    color: t.colors.text.disabled,
+                },
+            ]),
+        };
+    }, [appearance, size, disabled]);
+};
+const iconSizeMap = {
+    md: 16,
+    sm: 12,
 };
-export const Tag = React.forwardRef(({ className, appearance, size, icon, label, ...props }, ref) => {
-    const iconSizeMap = {
-        lg: 16,
-        sm: 12,
-    };
-    const calculatedIconSize = size ? iconSizeMap[size] : 16;
+/**
+ * A compact label used to categorize, classify, or highlight information with optional icon support.
+ *
+ * The appearance determines the color scheme used.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-tag-overview--docs Storybook}
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-tag-implementation--docs#dos-and-donts Guidelines}
+ *
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
+ * Do not use it to modify the tag's core appearance (colors, padding, etc). Use the `appearance` prop instead.
+ *
+ * @example
+ * import { Tag } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * // Basic tag
+ * <Tag label="Label" appearance="accent" />
+ *
+ * // Tag with icon
+ * <Tag
+ *   label="Success"
+ *   appearance="success"
+ *   icon={Check}
+ * />
+ *
+ * // Small tag
+ * <Tag label="Small" size="sm" />
+ */
+export const Tag = React.forwardRef(({ appearance = 'accent', size = 'md', icon, label, disabled = false, lx = {}, style, ...props }, ref) => {
+    const styles = useStyles({ appearance, size, disabled });
     const IconComponent = icon;
-    return (_jsxs(View, { className: cn(className, tagVariants.root({ appearance, size })), ref: ref, ...props, children: [IconComponent && (_jsx(IconComponent, { size: calculatedIconSize, className: tagVariants.inner({ appearance, className: 'shrink-0' }) })), _jsx(Text, { className: tagVariants.inner({ appearance }), children: label })] }));
+    const iconSize = iconSizeMap[size];
+    return (_jsxs(Box, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.root, style]), ...props, children: [IconComponent && _jsx(IconComponent, { size: iconSize, style: styles.icon }), _jsx(Text, { style: styles.text, children: label })] }));
 });
 Tag.displayName = 'Tag';