@ledgerhq/lumen-ui-rnative 0.0.43 → 0.0.45

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

@@ -1 +1 @@
-{"version":3,"file":"AmountInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountInput/AmountInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAYlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,iBAAiB,EAAE,KAgB/B,CAAC"}
+{"version":3,"file":"AmountInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountInput/AmountInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAC;AAEnE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CA+ClC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAc1C,eAAO,MAAM,IAAI,EAAE,KAYlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAWvB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAWlC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAWnC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAWpC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAWvC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAWjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAahC,CAAC"}

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Banner } from '../Banner';
+import { useState } from 'react';
+import { View } from 'react-native';
 import { AmountInput } from './AmountInput';
 const meta = {
     component: AmountInput,
@@ -13,15 +14,167 @@ const meta = {
             },
         },
     },
+    argTypes: {
+        currencyText: {
+            control: 'text',
+            description: 'Currency text to display (e.g. USD, EUR, $)',
+        },
+        currencyPosition: {
+            control: 'radio',
+            options: ['left', 'right'],
+            description: 'Position of the currency text',
+        },
+        allowDecimals: {
+            control: 'boolean',
+            description: 'Whether to allow decimal values',
+        },
+        thousandsSeparator: {
+            control: 'boolean',
+            description: 'Whether to display thousands separator',
+        },
+        maxIntegerLength: {
+            control: 'number',
+            description: 'Maximum digits for integer part',
+        },
+        maxDecimalLength: {
+            control: 'number',
+            description: 'Maximum digits for decimal part',
+        },
+        isInvalid: {
+            control: 'boolean',
+            description: 'Whether the input is in error state',
+        },
+        editable: {
+            control: 'boolean',
+            description: 'Whether the input is editable',
+        },
+    },
 };
 export default meta;
-export const WebPreviewWarning = {
-    render: () => (_jsx(Banner, { appearance: 'warning', title: 'Unsupported previews on web', description: 'For this component, previewing stories is currently only supported on mobile. Reanimated causes compatibility issues with the web preview, so for now, please test on-device. We plan to add screenshots or embed Expo Snack in the future.' })),
-    parameters: {
-        docs: {
-            description: {
-                story: '⚠️ This component requires testing on a physical device or emulator due to Reanimated compatibility issues with web previews.',
-            },
-        },
+const AmountInputStory = (args) => {
+    const [value, setValue] = useState(args.value?.toString() ?? '');
+    return (_jsx(View, { className: 'flex min-h-400 items-center justify-center p-24', children: _jsx(View, { className: 'w-full max-w-320', children: _jsx(AmountInput, { ...args, value: value, onChangeText: setValue }) }) }));
+};
+export const Base = {
+    render: (args) => _jsx(AmountInputStory, { ...args }),
+    args: {
+        currencyText: 'USD',
+        currencyPosition: 'left',
+        allowDecimals: true,
+        thousandsSeparator: true,
+        maxIntegerLength: 9,
+        maxDecimalLength: 9,
+        isInvalid: false,
+        editable: true,
+    },
+};
+export const WithValue = {
+    render: (args) => _jsx(AmountInputStory, { ...args }),
+    args: {
+        value: '1234.56',
+        currencyText: 'USD',
+        currencyPosition: 'left',
+        allowDecimals: true,
+        thousandsSeparator: true,
+        isInvalid: false,
+        editable: true,
+    },
+};
+export const CurrencyPositionLeft = {
+    render: (args) => _jsx(AmountInputStory, { ...args }),
+    args: {
+        value: '1000',
+        currencyText: '$',
+        currencyPosition: 'left',
+        allowDecimals: true,
+        thousandsSeparator: true,
+        isInvalid: false,
+        editable: true,
+    },
+};
+export const CurrencyPositionRight = {
+    render: (args) => _jsx(AmountInputStory, { ...args }),
+    args: {
+        value: '1000',
+        currencyText: 'ETH',
+        currencyPosition: 'right',
+        allowDecimals: true,
+        thousandsSeparator: true,
+        isInvalid: false,
+        editable: true,
+    },
+};
+export const IntegerOnly = {
+    render: (args) => _jsx(AmountInputStory, { ...args }),
+    args: {
+        value: '1234',
+        currencyText: 'items',
+        currencyPosition: 'right',
+        allowDecimals: false,
+        thousandsSeparator: true,
+        isInvalid: false,
+        editable: true,
+    },
+};
+export const WithThousandsSeparator = {
+    render: (args) => _jsx(AmountInputStory, { ...args }),
+    args: {
+        value: '1000000',
+        currencyText: 'USD',
+        currencyPosition: 'left',
+        allowDecimals: true,
+        thousandsSeparator: true,
+        isInvalid: false,
+        editable: true,
+    },
+};
+export const WithoutThousandsSeparator = {
+    render: (args) => _jsx(AmountInputStory, { ...args }),
+    args: {
+        value: '1000000',
+        currencyText: 'USD',
+        currencyPosition: 'left',
+        allowDecimals: true,
+        thousandsSeparator: false,
+        isInvalid: false,
+        editable: true,
+    },
+};
+export const ErrorState = {
+    render: (args) => _jsx(AmountInputStory, { ...args }),
+    args: {
+        value: '1234.56',
+        currencyText: 'USD',
+        currencyPosition: 'left',
+        allowDecimals: true,
+        thousandsSeparator: true,
+        isInvalid: true,
+        editable: true,
+    },
+};
+export const DisabledAmountInput = {
+    render: (args) => _jsx(AmountInputStory, { ...args }),
+    args: {
+        value: '1234.56',
+        currencyText: 'USD',
+        currencyPosition: 'left',
+        allowDecimals: true,
+        thousandsSeparator: true,
+        isInvalid: false,
+        editable: false,
+    },
+};
+export const CustomLengthLimits = {
+    render: (args) => _jsx(AmountInputStory, { ...args }),
+    args: {
+        value: '123',
+        currencyText: '$',
+        currencyPosition: 'left',
+        allowDecimals: true,
+        thousandsSeparator: true,
+        maxIntegerLength: 6,
+        maxDecimalLength: 2,
+        isInvalid: false,
+        editable: true,
     },
 };

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

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BaseInput/BaseInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAGL,SAAS,EACT,KAAK,cAAc,EAEpB,MAAM,cAAc,CAAC;AAUtB,MAAM,MAAM,cAAc,GAAG,cAAc,GAAG;IAC5C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAYF,eAAO,MAAM,SAAS;IAlDpB;;OAEG;YACK,MAAM;IACd;;OAEG;gBACS,MAAM;IAClB;;OAEG;qBACc,MAAM;IACvB;;OAEG;qBACc,MAAM;IACvB;;OAEG;mBACY,MAAM;IACrB;;;OAGG;aACM,KAAK,CAAC,SAAS;IACxB;;;OAGG;aACM,KAAK,CAAC,SAAS;IACxB;;OAEG;cACO,MAAM,IAAI;IACpB;;OAEG;sBACe,OAAO;mCAkK1B,CAAC"}
+{"version":3,"file":"BaseInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BaseInput/BaseInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAKN,MAAM,OAAO,CAAC;AACf,OAAO,EAGL,SAAS,EACT,KAAK,cAAc,EAEpB,MAAM,cAAc,CAAC;AAKtB,MAAM,MAAM,cAAc,GAAG,cAAc,GAAG;IAC5C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAUF,eAAO,MAAM,SAAS;IAhDpB;;OAEG;YACK,MAAM;IACd;;OAEG;gBACS,MAAM;IAClB;;OAEG;qBACc,MAAM;IACvB;;OAEG;qBACc,MAAM;IACvB;;OAEG;mBACY,MAAM;IACrB;;;OAGG;aACM,KAAK,CAAC,SAAS;IACxB;;;OAGG;aACM,KAAK,CAAC,SAAS;IACxB;;OAEG;cACO,MAAM,IAAI;IACpB;;OAEG;sBACe,OAAO;mCA2I1B,CAAC"}

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

@@ -1,14 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '@ledgerhq/lumen-utils-shared';
-import React, { useCallback, useEffect, useImperativeHandle, useRef, useState, } from 'react';
+import React, { useCallback, useImperativeHandle, useRef, useState, } from 'react';
 import { Pressable, Text, TextInput, View, } from 'react-native';
-import Animated, { useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
 import { useCommonTranslation } from '../../../i18n';
 import { DeleteCircleFill } from '../../Symbols/Icons/DeleteCircleFill';
 import { InteractiveIcon } from '../InteractiveIcon';
 const baseContainerStyles = cn('relative flex-row h-48 w-full items-center gap-8 px-16 rounded-sm bg-muted transition-colors border-2 border-transparent overflow-hidden');
 const baseInputStyles = cn('relative flex-1 pt-16 pb-2 size-full text-base transition-colors bg-muted outline-none');
-const AnimatedLabel = Animated.createAnimatedComponent(Animated.Text);
 export const BaseInput = React.forwardRef(({ label, errorMessage, className, inputClassName, labelClassName, hideClearButton, onChangeText: onChangeTextProp, editable = true, prefix, suffix, ...props }, ref) => {
     const { t } = useCommonTranslation();
     const inputRef = useRef(null);
@@ -20,23 +18,8 @@ export const BaseInput = React.forwardRef(({ label, errorMessage, className, inp
     const hasContent = isControlled
         ? !!props.value && props.value.length > 0
         : uncontrolledValue.length > 0;
-    // floating label styling
-    const labelFontSize = useSharedValue(14);
-    const labelTop = useSharedValue(14);
     const isFloatingLabel = isFocused || hasContent;
-    const animatedLabelStyle = useAnimatedStyle(() => ({
-        fontSize: labelFontSize.value,
-        top: labelTop.value,
-    }), []);
     const showClearButton = hasContent && editable && !hideClearButton;
-    useEffect(() => {
-        labelFontSize.value = withTiming(isFloatingLabel ? 10 : 14, {
-            duration: 200,
-        });
-        labelTop.value = withTiming(isFloatingLabel ? 8 : 14, {
-            duration: 200,
-        });
-    }, [isFloatingLabel, labelFontSize, labelTop]);
     const handleChangeText = useCallback((text) => {
         if (!isControlled) {
             setUncontrolledValue(text);
@@ -55,6 +38,6 @@ export const BaseInput = React.forwardRef(({ label, errorMessage, className, inp
     return (_jsxs(View, { className: className, children: [_jsxs(Pressable, { className: cn(baseContainerStyles, errorMessage && 'border-error', isFocused && !errorMessage && editable && 'border-active', !editable && 'bg-disabled text-disabled'), onPress: () => inputRef.current?.focus(), disabled: !editable, children: [prefix, _jsx(TextInput, { ref: inputRef, value: value, className: cn(baseInputStyles, !label && 'py-0', !editable && 'bg-disabled text-disabled', inputClassName), 
                         // TODO: eventually move to token system
                         // `body-1` is inconsistent in RN, e.g., line-height is calculated differently
-                        style: { fontWeight: '500', lineHeight: 0 }, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), onChangeText: handleChangeText, editable: editable, autoCapitalize: 'none', autoCorrect: false, ...props }), label && (_jsx(AnimatedLabel, { className: cn('absolute left-16 text-muted w-full', hasContent && showClearButton && 'w-[92%]', !editable && 'text-disabled', errorMessage && 'text-error', labelClassName), style: animatedLabelStyle, numberOfLines: 1, children: label })), showClearButton && (_jsx(InteractiveIcon, { iconType: 'filled', onPress: handleClear, accessibilityLabel: t('components.baseInput.clearInputAriaLabel'), children: _jsx(DeleteCircleFill, { size: 20 }) })), !showClearButton && suffix] }), errorMessage && (_jsxs(View, { className: 'mt-8 flex-row items-center gap-2', children: [_jsx(DeleteCircleFill, { size: 16, className: 'shrink-0 text-error' }), _jsx(Text, { className: 'text-error body-3', children: errorMessage })] }))] }));
+                        style: { fontWeight: '500', lineHeight: 0 }, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), onChangeText: handleChangeText, editable: editable, autoCapitalize: 'none', autoCorrect: false, ...props }), label && (_jsx(Text, { className: cn('absolute left-16 text-muted w-full transition-all duration-200', isFloatingLabel ? 'top-6 body-4' : 'top-12 body-2', hasContent && showClearButton && 'w-[92%]', !editable && 'text-disabled', errorMessage && 'text-error', labelClassName), numberOfLines: 1, children: label })), showClearButton && (_jsx(InteractiveIcon, { iconType: 'stroked', onPress: handleClear, accessibilityLabel: t('components.baseInput.clearInputAriaLabel'), children: _jsx(DeleteCircleFill, { size: 20 }) })), !showClearButton && suffix] }), errorMessage && (_jsxs(View, { className: 'mt-8 flex-row items-center gap-2', children: [_jsx(DeleteCircleFill, { size: 16, className: 'text-error shrink-0' }), _jsx(Text, { className: 'text-error body-3', children: errorMessage })] }))] }));
 });
 BaseInput.displayName = 'BaseInput';

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

@@ -28,7 +28,7 @@ const bottomSheetVariants = {
     root: cva('mb-16 w-full flex-1 rounded-t-xl bg-canvas-sheet', {
         variants: {
             shadow: {
-                true: 'shadow-lg shadow-base',
+                true: 'shadow-base shadow-lg',
                 false: '',
             },
         },

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

@@ -86,7 +86,7 @@ export const Base = {
     },
     render: (args) => {
         const bottomSheetRef = useBottomSheetRef();
-        return (_jsxs(View, { className: 'h-320 w-full items-center justify-center pt-32', children: [_jsx(Button, { size: 'xs', onPress: () => bottomSheetRef.current?.expand(), children: "Toggle open" }), _jsx(BottomSheet, { ...args, ref: bottomSheetRef, children: _jsxs(BottomSheetView, { children: [_jsx(BottomSheetHeader, { title: 'Title', appearance: 'compact', description: 'Description' }), _jsx(View, { className: 'flex flex-col gap-12', children: Array.from({ length: 3 }).map((_, index) => (_jsx(Text, { className: 'text-base', children: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae excepturi odit, quis tenetur iste perspiciatis mollitia porro velit laborum quasi numquam reiciendis dolor! Et quia voluptates eum, sunt asperiores quod." }, index))) })] }) })] }));
+        return (_jsxs(View, { className: 'h-320 w-full items-center justify-center pt-32', children: [_jsx(Button, { size: 'sm', onPress: () => bottomSheetRef.current?.expand(), children: "Toggle open" }), _jsx(BottomSheet, { ...args, ref: bottomSheetRef, children: _jsxs(BottomSheetView, { children: [_jsx(BottomSheetHeader, { title: 'Title', appearance: 'compact', description: 'Description' }), _jsx(View, { className: 'flex flex-col gap-12', children: Array.from({ length: 3 }).map((_, index) => (_jsx(Text, { className: 'text-base', children: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae excepturi odit, quis tenetur iste perspiciatis mollitia porro velit laborum quasi numquam reiciendis dolor! Et quia voluptates eum, sunt asperiores quod." }, index))) })] }) })] }));
     },
 };
 export const TitleExpanded = {
@@ -101,7 +101,7 @@ export const TitleExpanded = {
     },
     render: (args) => {
         const bottomSheetRef = useBottomSheetRef();
-        return (_jsxs(View, { className: 'h-320 w-full items-center justify-center pt-32', children: [_jsx(Button, { size: 'xs', onPress: () => bottomSheetRef.current?.expand(), children: "Toggle open" }), _jsx(BottomSheet, { ...args, ref: bottomSheetRef, children: _jsxs(BottomSheetView, { children: [_jsx(BottomSheetHeader, { title: 'Expanded title', appearance: 'expanded', description: 'Expanded description.' }), _jsx(View, { className: 'flex flex-col gap-12', children: _jsx(Text, { className: 'text-base body-2', children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae excepturi odit, quis tenetur iste perspiciatis mollitia porro velit laborum quasi numquam reiciendis dolor! Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla." }) })] }) })] }));
+        return (_jsxs(View, { className: 'h-320 w-full items-center justify-center pt-32', children: [_jsx(Button, { size: 'sm', onPress: () => bottomSheetRef.current?.expand(), children: "Toggle open" }), _jsx(BottomSheet, { ...args, ref: bottomSheetRef, children: _jsxs(BottomSheetView, { children: [_jsx(BottomSheetHeader, { title: 'Expanded title', appearance: 'expanded', description: 'Expanded description.' }), _jsx(View, { className: 'flex flex-col gap-12', children: _jsx(Text, { className: 'text-base body-2', children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae excepturi odit, quis tenetur iste perspiciatis mollitia porro velit laborum quasi numquam reiciendis dolor! Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla." }) })] }) })] }));
     },
 };
 export const DynamicSizingWithoutSnapPoints = {
@@ -111,7 +111,7 @@ export const DynamicSizingWithoutSnapPoints = {
     },
     render: (args) => {
         const bottomSheetRef = useBottomSheetRef();
-        return (_jsxs(View, { className: 'h-320 w-full items-center justify-center', children: [_jsx(Button, { size: 'xs', onPress: () => bottomSheetRef.current?.expand(), children: "Toggle open" }), _jsx(BottomSheet, { ...args, ref: bottomSheetRef, children: _jsxs(BottomSheetScrollView, { children: [_jsx(BottomSheetHeader, { title: 'Dynamic Sizing', appearance: 'compact', description: 'This bottom sheet adapts to its content height' }), _jsx(View, { className: 'flex flex-col gap-12', children: Array.from({ length: 5 }).map((_, index) => (_jsxs(Text, { className: 'text-base', children: ["Item ", index + 1, ": Lorem ipsum, dolor sit amet consectetur adipisicing elit."] }, index))) })] }) })] }));
+        return (_jsxs(View, { className: 'h-320 w-full items-center justify-center', children: [_jsx(Button, { size: 'sm', onPress: () => bottomSheetRef.current?.expand(), children: "Toggle open" }), _jsx(BottomSheet, { ...args, ref: bottomSheetRef, children: _jsxs(BottomSheetScrollView, { children: [_jsx(BottomSheetHeader, { title: 'Dynamic Sizing', appearance: 'compact', description: 'This bottom sheet adapts to its content height' }), _jsx(View, { className: 'flex flex-col gap-12', children: Array.from({ length: 5 }).map((_, index) => (_jsxs(Text, { className: 'text-base', children: ["Item ", index + 1, ": Lorem ipsum, dolor sit amet consectetur adipisicing elit."] }, index))) })] }) })] }));
     },
 };
 export const DynamicSizingWithSnapPoints = {
@@ -121,7 +121,7 @@ export const DynamicSizingWithSnapPoints = {
     },
     render: (args) => {
         const bottomSheetRef = useBottomSheetRef();
-        return (_jsxs(View, { className: 'h-320 w-full items-center justify-center', children: [_jsx(Button, { size: 'xs', onPress: () => bottomSheetRef.current?.snapToIndex(1), children: "Toggle open" }), _jsx(BottomSheet, { ...args, ref: bottomSheetRef, children: _jsxs(BottomSheetScrollView, { children: [_jsx(BottomSheetHeader, { title: 'Dynamic Sizing', appearance: 'compact', description: 'This bottom sheet adapts to its content height and has snap points' }), _jsx(View, { className: 'flex flex-col gap-12', children: Array.from({ length: 3 }).map((_, index) => (_jsxs(Text, { className: 'text-base', children: ["Item ", index + 1, ": Lorem ipsum, dolor sit amet consectetur adipisicing elit."] }, index))) })] }) })] }));
+        return (_jsxs(View, { className: 'h-320 w-full items-center justify-center', children: [_jsx(Button, { size: 'sm', onPress: () => bottomSheetRef.current?.snapToIndex(1), children: "Toggle open" }), _jsx(BottomSheet, { ...args, ref: bottomSheetRef, children: _jsxs(BottomSheetScrollView, { children: [_jsx(BottomSheetHeader, { title: 'Dynamic Sizing', appearance: 'compact', description: 'This bottom sheet adapts to its content height and has snap points' }), _jsx(View, { className: 'flex flex-col gap-12', children: Array.from({ length: 3 }).map((_, index) => (_jsxs(Text, { className: 'text-base', children: ["Item ", index + 1, ": Lorem ipsum, dolor sit amet consectetur adipisicing elit."] }, index))) })] }) })] }));
     },
 };
 export const PreventClose = {
@@ -133,7 +133,7 @@ export const PreventClose = {
     },
     render: (args) => {
         const bottomSheetRef = useBottomSheetRef();
-        return (_jsxs(View, { className: 'h-320 w-full items-center justify-center pt-32', children: [_jsx(Button, { size: 'xs', onPress: () => bottomSheetRef.current?.expand(), children: "Toggle open" }), _jsx(BottomSheet, { ...args, ref: bottomSheetRef, children: _jsxs(BottomSheetView, { children: [_jsx(BottomSheetHeader, { title: 'Hidden Close Button', appearance: 'compact', description: 'This bottom sheet cannot be closed by dragging or button' }), _jsx(View, { className: 'flex flex-col gap-12', children: Array.from({ length: 3 }).map((_, index) => (_jsxs(Text, { className: 'text-base', children: ["Item ", index + 1, ": This bottom sheet stays open and cannot be dismissed by the user. You would need to programmatically close it using the ref."] }, index))) })] }) })] }));
+        return (_jsxs(View, { className: 'h-320 w-full items-center justify-center pt-32', children: [_jsx(Button, { size: 'sm', onPress: () => bottomSheetRef.current?.expand(), children: "Toggle open" }), _jsx(BottomSheet, { ...args, ref: bottomSheetRef, children: _jsxs(BottomSheetView, { children: [_jsx(BottomSheetHeader, { title: 'Hidden Close Button', appearance: 'compact', description: 'This bottom sheet cannot be closed by dragging or button' }), _jsx(View, { className: 'flex flex-col gap-12', children: Array.from({ length: 3 }).map((_, index) => (_jsxs(Text, { className: 'text-base', children: ["Item ", index + 1, ": This bottom sheet stays open and cannot be dismissed by the user. You would need to programmatically close it using the ref."] }, index))) })] }) })] }));
     },
 };
 export const ScrollView = {
@@ -142,7 +142,7 @@ export const ScrollView = {
     },
     render: (args) => {
         const bottomSheetRef = useBottomSheetRef();
-        return (_jsxs(View, { className: 'h-320 w-full items-center justify-center bg-base pt-32', children: [_jsx(Button, { size: 'xs', onPress: () => bottomSheetRef.current?.expand(), children: "Toggle open" }), _jsx(BottomSheet, { ...args, ref: bottomSheetRef, children: _jsxs(BottomSheetScrollView, { children: [_jsx(BottomSheetHeader, { title: 'Scrollable Content', appearance: 'compact', description: 'This bottom sheet contains a scrollable view' }), _jsx(View, { className: 'flex flex-col gap-12', children: Array.from({ length: 20 }).map((_, index) => (_jsxs(Text, { className: 'text-base', children: ["Item ", index + 1, ": Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae excepturi odit, quis tenetur iste perspiciatis mollitia porro velit laborum quasi numquam reiciendis dolor!"] }, index))) })] }) })] }));
+        return (_jsxs(View, { className: 'h-320 w-full items-center justify-center bg-base pt-32', children: [_jsx(Button, { size: 'sm', onPress: () => bottomSheetRef.current?.expand(), children: "Toggle open" }), _jsx(BottomSheet, { ...args, ref: bottomSheetRef, children: _jsxs(BottomSheetScrollView, { children: [_jsx(BottomSheetHeader, { title: 'Scrollable Content', appearance: 'compact', description: 'This bottom sheet contains a scrollable view' }), _jsx(View, { className: 'flex flex-col gap-12', children: Array.from({ length: 20 }).map((_, index) => (_jsxs(Text, { className: 'text-base', children: ["Item ", index + 1, ": Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae excepturi odit, quis tenetur iste perspiciatis mollitia porro velit laborum quasi numquam reiciendis dolor!"] }, index))) })] }) })] }));
     },
 };
 export const VirtualList = {
@@ -156,7 +156,7 @@ export const VirtualList = {
             title: `Item ${i + 1}`,
             description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
         }));
-        return (_jsxs(View, { className: 'h-320 w-full items-center justify-center pt-32', children: [_jsx(Button, { size: 'xs', onPress: () => bottomSheetRef.current?.expand(), children: "Toggle open" }), _jsxs(BottomSheet, { ...args, ref: bottomSheetRef, children: [_jsx(BottomSheetHeader, { spacing: true, title: 'Virtual List', appearance: 'compact', description: 'This bottom sheet contains a virtualized list' }), _jsx(BottomSheetFlatList, { data: data, keyExtractor: (item) => item.id, renderItem: ({ item }) => {
+        return (_jsxs(View, { className: 'h-320 w-full items-center justify-center pt-32', children: [_jsx(Button, { size: 'sm', onPress: () => bottomSheetRef.current?.expand(), children: "Toggle open" }), _jsxs(BottomSheet, { ...args, ref: bottomSheetRef, children: [_jsx(BottomSheetHeader, { spacing: true, title: 'Virtual List', appearance: 'compact', description: 'This bottom sheet contains a virtualized list' }), _jsx(BottomSheetFlatList, { data: data, keyExtractor: (item) => item.id, renderItem: ({ item }) => {
                                 const typedItem = item;
                                 return (_jsxs(View, { className: 'flex flex-col gap-4 border-b border-base py-12', children: [_jsx(Text, { className: 'text-base body-2-semi-bold', children: typedItem.title }), _jsx(Text, { className: 'text-muted body-3', children: typedItem.description })] }));
                             } })] })] }));
@@ -179,7 +179,7 @@ export const VirtualizedList = {
             title: `Item ${i + 1}`,
             description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
         }));
-        return (_jsxs(View, { className: 'h-320 w-full items-center justify-center pt-32', children: [_jsx(Button, { size: 'xs', onPress: () => bottomSheetRef.current?.expand(), children: "Toggle open" }), _jsxs(BottomSheet, { ...args, ref: bottomSheetRef, children: [_jsx(BottomSheetHeader, { spacing: true, title: 'Virtualized List', appearance: 'compact', description: 'This bottom sheet uses a VirtualizedList with custom getItem/getItemCount' }), _jsx(BottomSheetVirtualizedList, { data: data, getItem: (items, index) => {
+        return (_jsxs(View, { className: 'h-320 w-full items-center justify-center pt-32', children: [_jsx(Button, { size: 'sm', onPress: () => bottomSheetRef.current?.expand(), children: "Toggle open" }), _jsxs(BottomSheet, { ...args, ref: bottomSheetRef, children: [_jsx(BottomSheetHeader, { spacing: true, title: 'Virtualized List', appearance: 'compact', description: 'This bottom sheet uses a VirtualizedList with custom getItem/getItemCount' }), _jsx(BottomSheetVirtualizedList, { data: data, getItem: (items, index) => {
                                 const typedData = items;
                                 return typedData[index];
                             }, getItemCount: (items) => {

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { View } from 'react-native';
 import { IconSize } from '../Icon';
 /**
  * Base button component
@@ -12,10 +13,9 @@ export declare const BaseButton: React.ForwardRefExoticComponent<{
     loading?: boolean;
     icon?: React.ComponentType<{
         size?: IconSize;
-        className?: string;
+        style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
     }>;
     disabled?: boolean;
-    className?: string;
     children?: React.ReactNode;
-} & Omit<import("react-native").PressableProps, "children" | "disabled"> & React.RefAttributes<import("react-native").View>>;
+} & Omit<import("../../../styles").StyledPressableProps, "children"> & React.RefAttributes<View>>;
 //# sourceMappingURL=BaseButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Button/BaseButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAgHnC;;;;GAIG;AACH,eAAO,MAAM,UAAU;;;;;;YAvGX,CAAA;iBAAsB,CAAA;;;;;4HAyKjC,CAAC"}
+{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Button/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAQ,IAAI,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAiInC;;;;GAIG;AACH,eAAO,MAAM,UAAU;;;;;;YA9GnB,CAAJ;aACU,CAAC;;;;iGA4JV,CAAC"}

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

@@ -1,132 +1,112 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cva } from 'class-variance-authority';
 import React from 'react';
-import { Text, Pressable } from 'react-native';
-import { cn } from '../../utils';
+import { Text, View } from 'react-native';
+import { LumenStyleSheet, mergeStyles } from '../../../styles';
 import { Spinner } from '../Spinner';
-const buttonVariants = {
-    root: cva('inline-flex size-fit flex-row items-center justify-center rounded-full transition-colors body-1-semi-bold', {
-        variants: {
-            appearance: {
-                base: 'bg-interactive active:bg-interactive-pressed',
-                gray: 'bg-muted active:bg-muted-pressed',
-                accent: 'bg-accent active:bg-accent-pressed',
-                transparent: 'bg-muted-transparent active:bg-muted-transparent-pressed',
-                'no-background': 'bg-transparent active:bg-base-transparent-pressed',
-                red: 'bg-error active:bg-error-pressed',
-            },
-            size: {
-                xs: 'px-12 py-8 body-2-semi-bold',
-                sm: 'px-16 py-10 body-2-semi-bold',
-                md: 'px-16 py-12',
-                lg: 'p-16',
-            },
-            isFull: {
-                true: 'w-full',
-            },
-            loading: {
-                true: '',
-            },
-            iconOnly: {
-                true: '',
-                false: '',
-            },
-            disabled: {
-                true: 'bg-disabled text-disabled active:bg-disabled',
-                false: '',
-            },
-        },
-        compoundVariants: [
-            {
-                size: 'xs',
-                iconOnly: true,
-                className: 'p-8',
-            },
-            {
-                size: 'sm',
-                iconOnly: true,
-                className: 'p-12',
-            },
-            {
-                size: 'md',
-                iconOnly: true,
-                className: 'p-12',
-            },
-            {
-                size: 'lg',
-                iconOnly: true,
-                className: 'p-16',
-            },
-            {
-                iconOnly: false,
-                className: 'gap-8',
-            },
-            {
-                appearance: 'no-background',
-                disabled: true,
-                className: 'bg-base-transparent',
-            },
-        ],
-        defaultVariants: {
-            appearance: 'base',
-            size: 'md',
-            isFull: false,
-            iconOnly: false,
-            disabled: false,
-        },
-    }),
-    label: cva('line-clamp-2 text-left text-inherit body-1-semi-bold', {
-        variants: {
-            appearance: {
-                base: 'text-on-interactive',
-                accent: 'text-on-accent',
-                red: 'text-error',
-                gray: 'text-base',
-                'no-background': 'text-base',
-                transparent: 'text-base',
+import { Pressable } from '../Utility';
+const iconSizeMap = {
+    xs: 16,
+    sm: 20,
+    md: 24,
+    lg: 24,
+};
+const useRootStyles = ({ isFull }) => {
+    return LumenStyleSheet.useCreate((t) => {
+        return {
+            root: {
+                width: isFull ? t.sizes.full : 'auto',
+                borderRadius: t.borderRadius.full,
             },
-            disabled: {
-                true: 'text-disabled',
+        };
+    }, [isFull]);
+};
+const useStyles = ({ appearance, size, disabled, pressed, iconOnly, isFull, }) => {
+    return LumenStyleSheet.useCreate((t) => {
+        const bgColors = {
+            base: t.colors.bg.interactive,
+            gray: t.colors.bg.muted,
+            accent: t.colors.bg.accent,
+            transparent: t.colors.bg.mutedTransparent,
+            'no-background': 'transparent',
+            red: t.colors.bg.error,
+        };
+        const pressedBgColors = {
+            base: t.colors.bg.interactivePressed,
+            gray: t.colors.bg.mutedPressed,
+            accent: t.colors.bg.accentPressed,
+            transparent: t.colors.bg.mutedTransparentPressed,
+            'no-background': t.colors.bg.baseTransparentPressed,
+            red: t.colors.bg.errorPressed,
+        };
+        const textColors = {
+            base: t.colors.text.onInteractive,
+            accent: t.colors.text.onAccent,
+            red: t.colors.text.error,
+            gray: t.colors.text.base,
+            'no-background': t.colors.text.base,
+            transparent: t.colors.text.base,
+        };
+        const sizeStyles = {
+            xs: { paddingH: t.spacings.s12, paddingV: t.spacings.s8 },
+            sm: { paddingH: t.spacings.s16, paddingV: t.spacings.s10 },
+            md: { paddingH: t.spacings.s16, paddingV: t.spacings.s12 },
+            lg: { paddingH: t.spacings.s16, paddingV: t.spacings.s16 },
+        };
+        const iconOnlyPadding = {
+            xs: t.spacings.s8,
+            sm: t.spacings.s10,
+            md: t.spacings.s12,
+            lg: t.spacings.s16,
+        };
+        const typography = size === 'xs' || size === 'sm'
+            ? t.typographies.body2SemiBold
+            : t.typographies.body1SemiBold;
+        const currentSizeStyle = sizeStyles[size];
+        return {
+            container: mergeStyles({
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: bgColors[appearance],
+            }, iconOnly
+                ? { padding: iconOnlyPadding[size] }
+                : {
+                    paddingHorizontal: currentSizeStyle.paddingH,
+                    paddingVertical: currentSizeStyle.paddingV,
+                    gap: t.spacings.s8,
+                }, isFull && { width: t.sizes.full }, pressed && { backgroundColor: pressedBgColors[appearance] }, disabled && { backgroundColor: t.colors.bg.disabled }, appearance === 'no-background' &&
+                disabled && { backgroundColor: 'transparent' }),
+            label: mergeStyles(typography, {
+                color: disabled ? t.colors.text.disabled : textColors[appearance],
+                textAlign: 'left',
+            }),
+            icon: {
+                flexShrink: 0,
+                color: disabled ? t.colors.text.disabled : textColors[appearance],
             },
-        },
-    }),
+        };
+    }, [appearance, size, disabled, pressed, iconOnly, isFull]);
 };
-const iconVariants = cva('shrink-0', {
-    variants: {
-        appearance: {
-            base: 'text-on-interactive',
-            accent: 'text-on-accent',
-            red: 'text-error',
-            gray: 'text-base',
-            'no-background': 'text-base',
-            transparent: 'text-base',
-        },
-        disabled: {
-            true: 'text-disabled',
-        },
-    },
-});
 /**
  * Base button component
  * @default appearance 'base'
  * @default size 'md'
  */
-export const BaseButton = React.forwardRef(({ className, children, appearance = 'base', size = 'md', isFull, loading, icon: IconProp, disabled, ...props }, ref) => {
-    const iconOnly = Boolean(IconProp && !children);
-    const iconSizeMap = {
-        xs: 16,
-        sm: 20,
-        md: 24,
-        lg: 24,
-    };
-    const calculatedIconSize = size ? iconSizeMap[size] : 24;
-    return (_jsxs(Pressable, { ref: ref, className: cn(className, buttonVariants.root({
-            appearance,
-            size,
-            isFull,
-            loading,
-            iconOnly,
-            disabled,
-        })), disabled: disabled ?? false, ...props, children: [loading && (_jsx(Spinner, { size: calculatedIconSize, className: iconVariants({ appearance, disabled }) })), !loading && IconProp && (_jsx(IconProp, { size: calculatedIconSize, className: iconVariants({ appearance, disabled }) })), children && (_jsx(Text, { className: buttonVariants.label({ appearance, disabled }), children: children }))] }));
+export const BaseButton = React.forwardRef(({ lx, style, children, appearance = 'base', size = 'md', isFull = false, loading = false, icon: IconProp, disabled = false, ...props }, ref) => {
+    const rootStyles = useRootStyles({ isFull });
+    return (_jsx(Pressable, { ref: ref, lx: lx, style: [style, rootStyles.root], disabled: disabled, accessibilityRole: 'button', accessibilityState: { disabled }, ...props, children: ({ pressed }) => (_jsx(BaseButtonContent, { appearance: appearance, size: size, disabled: disabled, pressed: pressed, isFull: isFull, loading: loading, IconProp: IconProp, children: children })) }));
 });
+const BaseButtonContent = ({ appearance, size, disabled, pressed, isFull, loading, IconProp, children, }) => {
+    const calculatedIconSize = iconSizeMap[size];
+    const iconOnly = Boolean(IconProp && !children);
+    const styles = useStyles({
+        appearance,
+        size,
+        disabled,
+        pressed,
+        iconOnly,
+        isFull,
+    });
+    return (_jsxs(View, { style: styles.container, testID: 'base-button-content', children: [loading && (_jsx(Spinner, { size: calculatedIconSize, color: styles.icon.color })), !loading && IconProp && (_jsx(IconProp, { size: calculatedIconSize, style: styles.icon })), children && (_jsx(Text, { style: styles.label, numberOfLines: 2, children: children }))] }));
+};
 BaseButton.displayName = 'BaseButton';

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