@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

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

@@ -1,11 +1,4 @@
 import React from 'react';
-import { BaseButtonProps } from './BaseButton.types';
-export type ButtonProps = {
-    /**
-     * The content to display inside the button.
-     */
-    children: React.ReactNode;
-} & BaseButtonProps;
 /**
  * A customizable button component that supports various appearances, sizes, full-width mode, loading states, and optional icons.
  *
@@ -22,27 +15,12 @@ export type ButtonProps = {
  *   Click Me
  * </Button>
  *
- * // Full-width button with custom class
- * <Button appearance="accent" isFull={true} className="my-custom-class">
+ * // Full-width button with lx props
+ * <Button appearance="accent" isFull={true} lx={{ marginTop: 's16' }}>
  *   Submit
  * </Button>
  */
 export declare const Button: React.ForwardRefExoticComponent<{
-    /**
-     * The content to display inside the button.
-     */
-    children: React.ReactNode;
-} & {
-    appearance?: "base" | "gray" | "accent" | "transparent" | "no-background" | "red";
-    size?: "xs" | "sm" | "md" | "lg";
-    isFull?: boolean;
-    loading?: boolean;
-    icon?: React.ComponentType<{
-        size?: import("../Icon").IconSize;
-        className?: string;
-    }>;
-    disabled?: boolean;
-    className?: string;
-    children?: React.ReactNode;
-} & Omit<import("react-native").PressableProps, "children" | "disabled"> & React.RefAttributes<import("react-native").View>>;
+    size?: "sm" | "md" | "lg";
+} & Omit<import("./types").BaseButtonProps, "size"> & React.RefAttributes<import("react-native").View>>;
 //# sourceMappingURL=Button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,eAAe,CAAC;AAEpB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,MAAM;IA3BjB;;OAEG;cACO,KAAK,CAAC,SAAS;;;;;;;YASH,CAAC;iBAAqB,CAAC;;;;;4HAoB7C,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,MAAM;;uGAKjB,CAAC"}

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

@@ -17,8 +17,8 @@ import { BaseButton } from './BaseButton';
  *   Click Me
  * </Button>
  *
- * // Full-width button with custom class
- * <Button appearance="accent" isFull={true} className="my-custom-class">
+ * // Full-width button with lx props
+ * <Button appearance="accent" isFull={true} lx={{ marginTop: 's16' }}>
  *   Submit
  * </Button>
  */

package/dist/src/lib/Components/Button/Button.stories.d.ts

@@ -11,6 +11,6 @@ export declare const ContentTypesShowcase: Story;
 export declare const SizesShowcase: Story;
 export declare const StatesShowcase: Story;
 export declare const ResponsiveLayout: Story;
-export declare const ResponsiveLayout2: Story;
+export declare const LabelTruncate: Story;
 export declare const InteractiveLoadingStates: Story;
 //# sourceMappingURL=Button.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAyD7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AASrC,eAAO,MAAM,IAAI,EAAE,KAgBlB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAoBtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAqBhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KASlC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAc3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAY5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAU9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAc/B,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAsCtC,CAAC"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAIvE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA2B7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AASrC,eAAO,MAAM,IAAI,EAAE,KAiBlB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAoBtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAqBhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KASlC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAc3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAY5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAiB9B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAc3B,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAsCtC,CAAC"}

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

@@ -1,6 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Plus, Settings } from '../../Symbols';
+import { Box, Text } from '../Utility';
 import { Button } from './Button';
 const meta = {
     component: Button,
@@ -17,47 +18,17 @@ const meta = {
     argTypes: {
         appearance: {
             control: 'select',
-            options: [
-                'base',
-                'gray',
-                'accent',
-                'transparent',
-                'no-background',
-                'red',
-            ],
-            description: 'The visual style appearance of the button',
-        },
-        size: {
-            control: 'select',
-            options: ['sm', 'md', 'lg'],
-            description: 'The size of the button',
-        },
-        disabled: {
-            control: 'boolean',
-            description: 'Whether the button is disabled',
-        },
-        loading: {
-            control: 'boolean',
-            description: 'Whether the button is in loading state',
-        },
-        icon: {
-            control: 'select',
-            description: 'Optional icon component to display',
-            options: ['None', 'Plus', 'Settings'],
-            mapping: {
-                None: undefined,
-                Plus: Plus,
-                Settings: Settings,
+            icon: {
+                control: 'select',
+                description: 'Optional icon component to display',
+                options: ['None', 'Plus', 'Settings'],
+                mapping: {
+                    None: undefined,
+                    Plus: Plus,
+                    Settings: Settings,
+                },
             },
         },
-        children: {
-            control: 'text',
-            description: 'The content to be displayed inside the button',
-        },
-        isFull: {
-            control: 'boolean',
-            description: 'Whether the button is full width',
-        },
     },
 };
 export default meta;
@@ -66,6 +37,7 @@ export const Base = {
         appearance: 'base',
         children: 'Base Button',
     },
+    render: (args) => _jsx(Button, { ...args }),
     parameters: {
         docs: {
             source: {
@@ -130,23 +102,28 @@ export const AppearanceShowcase = {
             { name: 'No Background', appearance: 'no-background' },
             { name: 'Red', appearance: 'red' },
         ];
-        return (_jsx("div", { className: 'flex gap-16 p-8', children: appearances.map(({ name, appearance }) => (_jsx(Button, { appearance: appearance, children: name }, appearance))) }));
+        return (_jsx(Box, { lx: { flexDirection: 'row', gap: 's16', padding: 's8' }, children: appearances.map(({ name, appearance }) => (_jsx(Button, { appearance: appearance, children: name }, appearance))) }));
     },
 };
 export const ContentTypesShowcase = {
-    render: () => (_jsxs("div", { className: 'flex items-center gap-4', children: [_jsx(Button, { appearance: 'base', children: "Text Only" }), _jsx(Button, { appearance: 'base', icon: Plus, children: "With Icon" })] })),
+    render: () => (_jsxs(Box, { lx: { flexDirection: 'row', alignItems: 'center', gap: 's4' }, children: [_jsx(Button, { appearance: 'base', children: "Text Only" }), _jsx(Button, { appearance: 'base', icon: Plus, children: "With Icon" })] })),
 };
 export const SizesShowcase = {
-    render: () => (_jsxs("div", { className: 'flex items-center gap-4', children: [_jsx(Button, { appearance: 'base', size: 'sm', children: "Small" }), _jsx(Button, { appearance: 'base', size: 'md', children: "Medium" }), _jsx(Button, { appearance: 'base', size: 'lg', icon: Settings, children: "Large" })] })),
+    render: () => (_jsxs(Box, { lx: { flexDirection: 'row', alignItems: 'center', gap: 's4' }, children: [_jsx(Button, { appearance: 'base', size: 'sm', children: "Small" }), _jsx(Button, { appearance: 'base', size: 'md', children: "Medium" }), _jsx(Button, { appearance: 'base', size: 'lg', icon: Settings, children: "Large" })] })),
 };
 export const StatesShowcase = {
-    render: () => (_jsxs("div", { className: 'flex items-center gap-4', children: [_jsx(Button, { appearance: 'base', children: "Default" }), _jsx(Button, { appearance: 'base', disabled: true, children: "Disabled" }), _jsx(Button, { appearance: 'base', loading: true, children: "Loading" })] })),
+    render: () => (_jsxs(Box, { lx: { flexDirection: 'row', alignItems: 'center', gap: 's4' }, children: [_jsx(Button, { appearance: 'base', children: "Default" }), _jsx(Button, { appearance: 'base', disabled: true, children: "Disabled" }), _jsx(Button, { appearance: 'base', loading: true, children: "Loading" })] })),
 };
 export const ResponsiveLayout = {
-    render: () => (_jsxs("div", { className: 'flex flex-col gap-8 p-8', children: [_jsx(Button, { appearance: 'base', children: "Short" }), _jsx(Button, { appearance: 'base', children: "Medium length button" }), _jsx(Button, { appearance: 'base', icon: Plus, children: "This is a longer button text to show dynamic width" })] })),
+    render: () => (_jsxs(Box, { lx: {
+            flexDirection: 'column',
+            gap: 's8',
+            padding: 's8',
+            alignItems: 'flex-start',
+        }, children: [_jsx(Button, { appearance: 'base', children: "Short" }), _jsx(Button, { appearance: 'base', children: "Medium length button" }), _jsx(Button, { appearance: 'base', icon: Plus, children: "This is a longer button text to show dynamic width" })] })),
 };
-export const ResponsiveLayout2 = {
-    render: () => (_jsxs(_Fragment, { children: [_jsx("p", { className: 'text-muted body-4-semi-bold', children: "This container has a fixed width." }), _jsx("div", { className: 'w-400 bg-muted-pressed p-16', children: _jsx(Button, { icon: Plus, children: "This Base button has a fixed width container that should fit the content width." }) })] })),
+export const LabelTruncate = {
+    render: () => (_jsxs(Box, { children: [_jsx(Text, { typography: 'body4SemiBold', lx: { color: 'muted' }, children: "This container has a fixed width." }), _jsx(Box, { lx: { width: 's400', padding: 's16' }, children: _jsx(Button, { icon: Plus, children: "This Base button has a fixed width container that should fit the content width." }) })] })),
 };
 export const InteractiveLoadingStates = {
     render: () => {
@@ -161,6 +138,6 @@ export const InteractiveLoadingStates = {
             setStates((prev) => ({ ...prev, [key]: 'red' }));
             setTimeout(() => setStates((prev) => ({ ...prev, [key]: 'idle' })), 2000);
         };
-        return (_jsxs("div", { className: 'flex items-center gap-4', children: [_jsx(Button, { appearance: 'red', loading: states.text === 'loading', onPress: () => handleClick('text'), children: states.text === 'red' ? 'Error!' : 'Text Only' }), _jsx(Button, { appearance: 'base', loading: states.withIcon === 'loading', onPress: () => handleClick('withIcon'), icon: Settings, children: states.withIcon === 'red' ? 'Settings Error!' : 'With Icon' })] }));
+        return (_jsxs(Box, { lx: { flexDirection: 'row', alignItems: 'center', gap: 's4' }, children: [_jsx(Button, { appearance: 'red', loading: states.text === 'loading', onPress: () => handleClick('text'), children: states.text === 'red' ? 'Error!' : 'Text Only' }), _jsx(Button, { appearance: 'base', loading: states.withIcon === 'loading', onPress: () => handleClick('withIcon'), icon: Settings, children: states.withIcon === 'red' ? 'Settings Error!' : 'With Icon' })] }));
     },
 };

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

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

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

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

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

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

package/dist/src/lib/Components/Button/{BaseButton.types.d.ts → types.d.ts}

@@ -1,5 +1,6 @@
-import React from 'react';
-import { PressableProps } from 'react-native';
+import { ComponentType, ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { StyledPressableProps } from '../../../styles';
 import { IconSize } from '../Icon';
 export type BaseButtonProps = {
     /**
@@ -8,6 +9,7 @@ export type BaseButtonProps = {
     appearance?: 'base' | 'gray' | 'accent' | 'transparent' | 'no-background' | 'red';
     /**
      * The size variant of the button.
+     * @default md
      */
     size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
@@ -21,21 +23,24 @@ export type BaseButtonProps = {
     /**
      * An optional icon component to render inside the button.
      */
-    icon?: React.ComponentType<{
+    icon?: ComponentType<{
         size?: IconSize;
-        className?: string;
+        style?: StyleProp<ViewStyle>;
     }>;
     /**
      * Whether the button is disabled.
      */
     disabled?: boolean;
     /**
-     * Additional custom CSS classes to apply.
+     * The content to display inside the button.
      */
-    className?: string;
+    children?: ReactNode;
+} & Omit<StyledPressableProps, 'children'>;
+export type ButtonProps = {
     /**
-     * The content to display inside the button.
+     * The size variant of the button.
+     * @default md
      */
-    children?: React.ReactNode;
-} & Omit<PressableProps, 'disabled' | 'children'>;
-//# sourceMappingURL=BaseButton.types.d.ts.map
+    size?: 'sm' | 'md' | 'lg';
+} & Omit<BaseButtonProps, 'size'>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,UAAU,CAAC,EACP,MAAM,GACN,MAAM,GACN,QAAQ,GACR,aAAa,GACb,eAAe,GACf,KAAK,CAAC;IACV;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;KAAE,CAAC,CAAC;IACxE;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC;AAE3C,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC"}

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

@@ -8,7 +8,7 @@ import { View } from 'react-native';
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_action-cardbutton--docs Storybook}
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_action-cardbutton--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 card button's core appearance (colors, padding, etc). Use the `appearance` prop instead.
  *
  * @example
@@ -17,6 +17,7 @@ import { View } from 'react-native';
  *
  * <CardButton title="Click Me" onPress={() => console.log('Clicked!')} />
  *
+ * @example
  * // Card button with icon and description
  * import { CardButton } from '@ledgerhq/lumen-ui-rnative';
  * import { Info } from '@ledgerhq/lumen-ui-rnative/symbols';
@@ -33,10 +34,10 @@ export declare const CardButton: React.ForwardRefExoticComponent<{
     disabled?: boolean;
     icon?: React.ComponentType<{
         size?: import("../Icon").IconSize;
-        className?: string;
+        style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
     }>;
     title: string;
     description?: string;
     hideChevron?: boolean;
-} & Omit<import("react-native").PressableProps, "disabled"> & React.RefAttributes<View>>;
+} & Omit<import("../../../styles").StyledPressableProps, "disabled"> & React.RefAttributes<View>>;
 //# sourceMappingURL=CardButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CardButton.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/CardButton/CardButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,IAAI,EAAE,MAAM,cAAc,CAAC;AA2ErD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,UAAU;;;;YA7FhB,CAAC;iBACG,CAAC;;;;;wFA6JX,CAAC"}
+{"version":3,"file":"CardButton.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/CardButton/CardButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,IAAI,EAAE,MAAM,cAAc,CAAC;AA6FtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,UAAU;;;;YAxGT,CAAC;aACP,CAAC;;;;;iGAiJR,CAAC"}

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

@@ -1,72 +1,77 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cva } from 'class-variance-authority';
 import React from 'react';
-import { Text, Pressable, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import { ChevronRight } from '../../Symbols';
-import { cn } from '../../utils';
-const cardButtonVariants = {
-    root: cva('inline-flex h-fit w-full flex-row items-center gap-12 rounded-sm p-12 transition-colors', {
-        variants: {
-            appearance: {
-                base: '',
-                outline: 'outline-dashed outline-1',
+import { Pressable } from '../Utility';
+const useStyles = ({ appearance, disabled, pressed, }) => {
+    return useStyleSheet((t) => {
+        const bgColors = {
+            base: t.colors.bg.muted,
+            outline: 'transparent',
+        };
+        const pressedBgColors = {
+            base: t.colors.bg.mutedPressed,
+            outline: t.colors.bg.baseTransparentPressed,
+        };
+        return {
+            container: StyleSheet.flatten([
+                {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    width: t.sizes.full,
+                    gap: t.spacings.s12,
+                    padding: t.spacings.s12,
+                    borderRadius: t.borderRadius.sm,
+                    backgroundColor: bgColors[appearance],
+                },
+                appearance === 'outline' && {
+                    borderStyle: 'dashed',
+                    borderWidth: t.borderWidth.s1,
+                    borderColor: t.colors.border.mutedSubtle,
+                },
+                pressed && {
+                    backgroundColor: pressedBgColors[appearance],
+                },
+                pressed &&
+                    appearance === 'outline' && {
+                    borderColor: t.colors.border.mutedSubtlePressed,
+                },
+                disabled && {
+                    backgroundColor: appearance === 'outline' ? 'transparent' : t.colors.bg.disabled,
+                },
+                disabled &&
+                    appearance === 'outline' && {
+                    borderColor: t.colors.border.disabled,
+                },
+            ]),
+            contentWrapper: {
+                flex: 1,
+                minWidth: 0,
+                flexDirection: 'column',
+                gap: t.spacings.s4,
             },
-            disabled: {
-                true: 'text-disabled',
-                false: 'text-base',
+            title: StyleSheet.flatten([
+                t.typographies.body1SemiBold,
+                {
+                    color: disabled ? t.colors.text.disabled : t.colors.text.base,
+                    minWidth: 0,
+                    textAlign: 'left',
+                },
+            ]),
+            description: StyleSheet.flatten([
+                t.typographies.body2,
+                {
+                    color: disabled ? t.colors.text.disabled : t.colors.text.base,
+                    minWidth: 0,
+                },
+            ]),
+            icon: {
+                flexShrink: 0,
+                color: disabled ? t.colors.text.disabled : t.colors.text.base,
             },
-        },
-        compoundVariants: [
-            {
-                appearance: 'base',
-                disabled: true,
-                className: 'bg-disabled',
-            },
-            {
-                appearance: 'base',
-                disabled: false,
-                className: 'bg-muted active:bg-muted-pressed',
-            },
-            {
-                appearance: 'outline',
-                disabled: true,
-                className: 'bg-base-transparent outline-disabled',
-            },
-            {
-                appearance: 'outline',
-                disabled: false,
-                className: 'bg-base-transparent outline-muted-subtle active:bg-base-transparent-pressed active:outline-muted-subtle-pressed',
-            },
-        ],
-        defaultVariants: {
-            appearance: 'base',
-            disabled: false,
-        },
-    }),
-    title: cva('min-w-0 body-1-semi-bold', {
-        variants: {
-            disabled: {
-                true: 'text-disabled',
-                false: 'text-base',
-            },
-        },
-    }),
-    description: cva('min-w-0 body-2', {
-        variants: {
-            disabled: {
-                true: 'text-disabled',
-                false: 'text-base',
-            },
-        },
-    }),
-    icon: cva('shrink-0', {
-        variants: {
-            disabled: {
-                true: 'text-disabled',
-                false: 'text-base',
-            },
-        },
-    }),
+        };
+    }, [appearance, disabled, pressed]);
 };
 /**
  * A customizable card button component that displays an optional icon, a required title, an optional description, and an optional chevron arrow.
@@ -76,7 +81,7 @@ const cardButtonVariants = {
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_action-cardbutton--docs Storybook}
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_action-cardbutton--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 card button's core appearance (colors, padding, etc). Use the `appearance` prop instead.
  *
  * @example
@@ -85,6 +90,7 @@ const cardButtonVariants = {
  *
  * <CardButton title="Click Me" onPress={() => console.log('Clicked!')} />
  *
+ * @example
  * // Card button with icon and description
  * import { CardButton } from '@ledgerhq/lumen-ui-rnative';
  * import { Info } from '@ledgerhq/lumen-ui-rnative/symbols';
@@ -96,11 +102,12 @@ const cardButtonVariants = {
  *   appearance="outline"
  * />
  */
-export const CardButton = React.forwardRef(({ className, appearance, icon, title, description, hideChevron, disabled = false, ...props }, ref) => {
-    const IconComponent = icon;
-    return (_jsxs(Pressable, { ref: ref, className: cn(className, cardButtonVariants.root({
-            appearance,
-            disabled,
-        })), disabled: disabled ?? false, ...props, children: [IconComponent && (_jsx(IconComponent, { size: 24, className: cardButtonVariants.icon({ disabled }) })), _jsxs(View, { className: 'flex min-w-0 flex-1 flex-col gap-4 text-left body-1-semi-bold', children: [_jsx(Text, { className: cardButtonVariants.title({ disabled }), numberOfLines: 1, ellipsizeMode: 'tail', children: title }), description && (_jsx(Text, { className: cardButtonVariants.description({ disabled }), numberOfLines: 2, ellipsizeMode: 'tail', children: description }))] }), !hideChevron && (_jsx(ChevronRight, { size: 24, className: cardButtonVariants.icon({ disabled }) }))] }));
+export const CardButton = React.forwardRef(({ lx, style, appearance = 'base', icon, title, description, hideChevron, disabled = false, ...props }, ref) => {
+    return (_jsx(Pressable, { ref: ref, lx: lx, style: StyleSheet.flatten([style, { flex: 1 }]), disabled: disabled, accessibilityRole: 'button', accessibilityState: { disabled }, ...props, children: ({ pressed }) => (_jsx(CardButtonContent, { appearance: appearance, disabled: disabled, pressed: pressed, icon: icon, title: title, description: description, hideChevron: hideChevron })) }));
 });
+const CardButtonContent = ({ appearance, disabled, pressed, icon, title, description, hideChevron, }) => {
+    const IconComponent = icon;
+    const styles = useStyles({ appearance, disabled, pressed });
+    return (_jsxs(View, { style: styles.container, testID: 'card-button-content', children: [IconComponent && _jsx(IconComponent, { size: 24, style: styles.icon }), _jsxs(View, { style: styles.contentWrapper, children: [_jsx(Text, { style: styles.title, numberOfLines: 1, ellipsizeMode: 'tail', children: title }), description && (_jsx(Text, { style: styles.description, numberOfLines: 2, ellipsizeMode: 'tail', children: description }))] }), !hideChevron && _jsx(ChevronRight, { size: 24, style: styles.icon })] }));
+};
 CardButton.displayName = 'CardButton';

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

@@ -1 +1 @@
-{"version":3,"file":"CardButton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/CardButton/CardButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CA6CjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAGzC,eAAO,MAAM,IAAI,EAAE,KAkBlB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAqBtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAqB7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAqB5B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAuB1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA4B1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAwBhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA+B/B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA+B5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAwB9B,CAAC"}
+{"version":3,"file":"CardButton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/CardButton/CardButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CA6CjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAGzC,eAAO,MAAM,IAAI,EAAE,KAkBlB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAmBtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAmB7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAmB5B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAqB1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA+B1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KA+BhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAsC/B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAsC5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAkC9B,CAAC"}

package/dist/src/lib/Components/CardButton/CardButton.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, Coins, CreditCard, Bank } from '../../Symbols';
+import { Box, Text } from '../Utility';
 import { CardButton } from './CardButton';
 const meta = {
     component: CardButton,
@@ -54,6 +54,7 @@ export const Base = {
         appearance: 'base',
         title: 'Basic Card Button',
     },
+    render: (args) => _jsx(CardButton, { ...args }),
     parameters: {
         docs: {
             source: {
@@ -61,7 +62,6 @@ export const Base = {
 <CardButton
   appearance="base"
   title="Basic Card Button"
-  className="max-w-md"
 />
 `,
             },
@@ -73,7 +73,6 @@ export const WithIcon = {
         appearance: 'base',
         title: 'Settings',
         icon: Settings,
-        className: 'max-w-md',
     },
     parameters: {
         docs: {
@@ -83,7 +82,6 @@ export const WithIcon = {
   appearance="base"
   title="Settings"
   icon={Settings}
-  className="max-w-md"
 />
 `,
             },
@@ -95,7 +93,6 @@ export const WithDescription = {
         appearance: 'base',
         title: 'Payment Method',
         description: 'Add or manage your payment options',
-        className: 'max-w-md',
     },
     parameters: {
         docs: {
@@ -105,7 +102,6 @@ export const WithDescription = {
   appearance="base"
   title="Payment Method"
   description="Add or manage your payment options"
-  className="max-w-md"
 />
 `,
             },
@@ -117,7 +113,6 @@ export const WithoutChevron = {
         appearance: 'base',
         title: 'Navigate Forward',
         hideChevron: true,
-        className: 'max-w-md',
     },
     parameters: {
         docs: {
@@ -127,7 +122,6 @@ export const WithoutChevron = {
   appearance="base"
   title="Navigate Forward"
   hideChevron
-  className="max-w-md"
 />
 `,
             },
@@ -140,7 +134,6 @@ export const FullFeatures = {
         title: 'Account Settings',
         description: 'Manage your account preferences and security',
         icon: Settings,
-        className: 'max-w-md',
     },
     parameters: {
         docs: {
@@ -151,7 +144,6 @@ export const FullFeatures = {
   title="Account Settings"
   description="Manage your account preferences and security"
   icon={Settings}
-  className="max-w-md"
 />
 `,
             },
@@ -159,7 +151,7 @@ export const FullFeatures = {
     },
 };
 export const NaturalWidth = {
-    render: () => (_jsxs(View, { className: 'w-full bg-muted-pressed p-16', children: [_jsx(Text, { className: 'mb-16 text-muted body-4-semi-bold', children: "CardButton naturally flows to fill parent container width" }), _jsx(CardButton, { appearance: 'base', title: 'Natural Width Example', description: 'This card button demonstrates how it flows naturally to fill the full width of its parent container without any max-width constraints', icon: CreditCard })] })),
+    render: () => (_jsxs(Box, { lx: { backgroundColor: 'mutedPressed', padding: 's16' }, children: [_jsx(Text, { typography: 'body4SemiBold', lx: { color: 'muted', marginBottom: 's16' }, children: "CardButton naturally flows to fill parent container width" }), _jsx(CardButton, { appearance: 'base', title: 'Natural Width Example', description: 'This card button demonstrates how it flows naturally to fill the full width of its parent container without any max-width constraints', icon: CreditCard })] })),
     parameters: {
         docs: {
             source: {
@@ -181,15 +173,36 @@ export const AppearanceShowcase = {
             { name: 'Base', appearance: 'base' },
             { name: 'Outline', appearance: 'outline' },
         ];
-        return (_jsx(View, { className: 'flex max-w-md flex-col gap-16 p-8', children: appearances.map(({ name, appearance }) => (_jsx(CardButton, { appearance: appearance, title: `${name} Appearance`, description: 'This demonstrates the appearance variation', icon: Coins }, appearance))) }));
+        return (_jsx(Box, { lx: {
+                flexDirection: 'column',
+                gap: 's16',
+                padding: 's8',
+                maxWidth: 's400',
+            }, children: appearances.map(({ name, appearance }) => (_jsx(CardButton, { appearance: appearance, title: `${name} Appearance`, description: 'This demonstrates the appearance variation', icon: Coins }, appearance))) }));
     },
 };
 export const ContentVariations = {
-    render: () => (_jsxs(View, { className: 'flex max-w-md flex-col gap-16 p-8', children: [_jsx(CardButton, { appearance: 'base', title: 'With Description', description: 'This card has a description below the title', hideChevron: true }), _jsx(CardButton, { appearance: 'base', title: 'Icon and Description', description: 'This card has both an icon and description', icon: Settings, hideChevron: true }), _jsx(CardButton, { appearance: 'base', title: 'Description and Chevron', description: 'This card has description and chevron' }), _jsx(CardButton, { appearance: 'base', title: 'Complete Card', description: 'This card has all optional features', icon: CreditCard }), _jsx(CardButton, { appearance: 'base', title: 'With Icon', icon: Plus, hideChevron: true }), _jsx(CardButton, { appearance: 'base', title: 'With Chevron' })] })),
+    render: () => (_jsxs(Box, { lx: {
+            flexDirection: 'column',
+            gap: 's16',
+            padding: 's8',
+            maxWidth: 's400',
+        }, children: [_jsx(CardButton, { appearance: 'base', title: 'With Description', description: 'This card has a description below the title', hideChevron: true }), _jsx(CardButton, { appearance: 'base', title: 'Icon and Description', description: 'This card has both an icon and description', icon: Settings, hideChevron: true }), _jsx(CardButton, { appearance: 'base', title: 'Description and Chevron', description: 'This card has description and chevron' }), _jsx(CardButton, { appearance: 'base', title: 'Complete Card', description: 'This card has all optional features', icon: CreditCard }), _jsx(CardButton, { appearance: 'base', title: 'With Icon', icon: Plus, hideChevron: true }), _jsx(CardButton, { appearance: 'base', title: 'With Chevron' })] })),
 };
 export const StatesShowcase = {
-    render: () => (_jsxs(View, { className: 'flex max-w-md flex-col gap-16 p-8', children: [_jsx(CardButton, { appearance: 'base', title: 'Base Default', description: 'This is the normal interactive state', icon: Settings }), _jsx(CardButton, { appearance: 'base', title: 'Base Disabled', description: 'This card button is disabled', icon: Settings, disabled: true }), _jsx(CardButton, { appearance: 'outline', title: 'Outline Default', description: 'This is the outline appearance', icon: Bank }), _jsx(CardButton, { appearance: 'outline', title: 'Outline Disabled', description: 'This is the disabled outline appearance', icon: Bank, disabled: true })] })),
+    render: () => (_jsxs(Box, { lx: {
+            flexDirection: 'column',
+            gap: 's16',
+            padding: 's8',
+            maxWidth: 's400',
+        }, children: [_jsx(CardButton, { appearance: 'base', title: 'Base Default', description: 'This is the normal interactive state', icon: Settings }), _jsx(CardButton, { appearance: 'base', title: 'Base Disabled', description: 'This card button is disabled', icon: Settings, disabled: true }), _jsx(CardButton, { appearance: 'outline', title: 'Outline Default', description: 'This is the outline appearance', icon: Bank }), _jsx(CardButton, { appearance: 'outline', title: 'Outline Disabled', description: 'This is the disabled outline appearance', icon: Bank, disabled: true })] })),
 };
 export const ResponsiveLayout = {
-    render: () => (_jsxs(View, { className: 'w-320 flex-col gap-16 bg-muted-pressed p-16', children: [_jsx(Text, { className: 'text-muted body-4-semi-bold', children: "Container: 320px wide" }), _jsx(CardButton, { appearance: 'base', title: 'Short Title', description: 'Short description', icon: Plus }), _jsx(CardButton, { appearance: 'base', title: 'Full Width', description: 'Short description', icon: Plus }), _jsx(CardButton, { appearance: 'base', title: 'Longer Title That Might Overflow When Container is Smaller', description: 'This is a longer description that demonstrates how the card handles longer content within its constraints', icon: Settings })] })),
+    render: () => (_jsxs(Box, { lx: {
+            width: 's320',
+            flexDirection: 'column',
+            gap: 's16',
+            backgroundColor: 'mutedPressed',
+            padding: 's16',
+        }, children: [_jsx(Text, { typography: 'body4SemiBold', lx: { color: 'muted' }, children: "Container: 320px wide" }), _jsx(CardButton, { appearance: 'base', title: 'Short Title', description: 'Short description', icon: Plus }), _jsx(CardButton, { appearance: 'base', title: 'Full Width', description: 'Short description', icon: Plus }), _jsx(CardButton, { appearance: 'base', title: 'Longer Title That Might Overflow When Container is Smaller', description: 'This is a longer description that demonstrates how the card handles longer content within its constraints', icon: Settings })] })),
 };

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

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