@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

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

@@ -1,16 +1,14 @@
 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 { Pressable, Text, TextInput, View, } from 'react-native';
-import Animated, { useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { Animated, StyleSheet, Text, TextInput, View } from 'react-native';
 import { useCommonTranslation } from '../../../i18n';
+import { useStyleSheet, useTheme } from '../../../styles';
 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) => {
+import { Box, Pressable } from '../Utility';
+export const BaseInput = React.forwardRef(({ lx, style, inputStyle, labelStyle, label, errorMessage, hideClearButton, onChangeText: onChangeTextProp, editable = true, prefix, suffix, ...props }, ref) => {
     const { t } = useCommonTranslation();
+    const { theme } = useTheme();
     const inputRef = useRef(null);
     useImperativeHandle(ref, () => inputRef.current);
     const [uncontrolledValue, setUncontrolledValue] = useState(props.defaultValue || '');
@@ -20,23 +18,16 @@ 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;
+    const floatingAnimation = useRef(new Animated.Value(isFloatingLabel ? 1 : 0)).current;
     useEffect(() => {
-        labelFontSize.value = withTiming(isFloatingLabel ? 10 : 14, {
-            duration: 200,
-        });
-        labelTop.value = withTiming(isFloatingLabel ? 8 : 14, {
-            duration: 200,
-        });
-    }, [isFloatingLabel, labelFontSize, labelTop]);
+        Animated.timing(floatingAnimation, {
+            toValue: isFloatingLabel ? 1 : 0,
+            duration: 150,
+            useNativeDriver: false,
+        }).start();
+    }, [isFloatingLabel, floatingAnimation]);
     const handleChangeText = useCallback((text) => {
         if (!isControlled) {
             setUncontrolledValue(text);
@@ -52,9 +43,128 @@ export const BaseInput = React.forwardRef(({ label, errorMessage, className, inp
         }
         props.onClear?.();
     };
-    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 })] }))] }));
+    const styles = useStyles({
+        hasError: !!errorMessage,
+        isFocused,
+        isEditable: editable,
+        hasLabel: !!label,
+    });
+    const floatingLabelStyles = useFloatingLabelStyles({
+        floatingAnimation,
+        hasContent,
+        showClearButton,
+        hasError: !!errorMessage,
+        isEditable: editable,
+    });
+    return (_jsxs(Box, { lx: lx, style: style, children: [_jsxs(Pressable, { style: styles.container, onPress: () => inputRef.current?.focus(), disabled: !editable, children: [prefix, _jsx(TextInput, { ref: inputRef, value: value, style: [styles.input, { lineHeight: 0 }, inputStyle], onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), onChangeText: handleChangeText, editable: editable, autoCapitalize: 'none', autoCorrect: false, selectionColor: theme.colors.text.active, placeholderTextColor: theme.colors.text.muted, ...props }), label && (_jsx(Animated.Text, { style: [
+                            floatingLabelStyles.label,
+                            floatingLabelStyles.animatedLabel,
+                            labelStyle,
+                        ], numberOfLines: 1, children: label })), (suffix || (!hideClearButton && editable)) && (_jsx(View, { style: styles.suffixContainer, children: showClearButton ? (_jsx(InteractiveIcon, { iconType: 'stroked', onPress: handleClear, accessibilityLabel: t('components.baseInput.clearInputAriaLabel'), children: _jsx(DeleteCircleFill, { size: 20 }) })) : (suffix) }))] }), errorMessage && (_jsxs(View, { style: styles.errorContainer, children: [_jsx(DeleteCircleFill, { size: 16, color: 'error' }), _jsx(Text, { style: styles.errorText, children: errorMessage })] }))] }));
 });
+const useStyles = ({ hasError, isFocused, isEditable, hasLabel, }) => {
+    return useStyleSheet((t) => {
+        return {
+            container: StyleSheet.flatten([
+                {
+                    position: 'relative',
+                    flexDirection: 'row',
+                    height: t.sizes.s48,
+                    width: t.sizes.full,
+                    alignItems: 'center',
+                    gap: t.spacings.s8,
+                    paddingHorizontal: t.spacings.s16,
+                    borderRadius: t.borderRadius.sm,
+                    backgroundColor: t.colors.bg.muted,
+                    borderWidth: t.borderWidth.s2,
+                    borderColor: 'transparent',
+                    overflow: 'hidden',
+                },
+                hasError && {
+                    borderColor: t.colors.border.error,
+                },
+                !isEditable && {
+                    backgroundColor: t.colors.bg.disabled,
+                },
+                isFocused &&
+                    !hasError &&
+                    isEditable && { borderColor: t.colors.border.active },
+            ]),
+            input: StyleSheet.flatten([
+                {
+                    position: 'relative',
+                    flex: 1,
+                    height: t.sizes.full,
+                    width: t.sizes.full,
+                    color: t.colors.text.base,
+                    backgroundColor: t.colors.bg.muted,
+                    outlineWidth: 0,
+                    outlineColor: 'transparent',
+                    ...t.typographies.body1,
+                },
+                hasLabel && {
+                    paddingTop: t.spacings.s16,
+                    paddingBottom: t.spacings.s2,
+                    ...t.typographies.body2,
+                },
+                !isEditable && {
+                    backgroundColor: t.colors.bg.disabled,
+                    color: t.colors.text.disabled,
+                },
+            ]),
+            errorContainer: {
+                marginTop: t.spacings.s8,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: t.spacings.s2,
+            },
+            errorText: {
+                color: t.colors.text.error,
+                ...t.typographies.body3,
+            },
+            suffixContainer: {
+                minWidth: t.sizes.s20,
+                alignItems: 'center',
+                justifyContent: 'center',
+            },
+        };
+    }, [hasError, isFocused, isEditable, hasLabel]);
+};
+const useFloatingLabelStyles = ({ floatingAnimation, hasContent, showClearButton, hasError, isEditable, }) => {
+    const { theme } = useTheme();
+    const label = useStyleSheet((t) => ({
+        label: StyleSheet.flatten([
+            {
+                position: 'absolute',
+                left: t.spacings.s16,
+                width: t.sizes.full,
+                color: t.colors.text.muted,
+            },
+            hasContent &&
+                showClearButton && {
+                width: '92%',
+            },
+            !isEditable && {
+                color: t.colors.text.disabled,
+            },
+            hasError && {
+                color: t.colors.text.error,
+            },
+        ]),
+    }), [hasContent, showClearButton, hasError, isEditable]);
+    const animatedLabel = {
+        top: floatingAnimation.interpolate({
+            inputRange: [0, 1],
+            outputRange: [theme.spacings.s14, theme.spacings.s8],
+        }),
+        fontSize: floatingAnimation.interpolate({
+            inputRange: [0, 1],
+            outputRange: [
+                theme.typographies.body2.fontSize,
+                theme.typographies.body4.fontSize,
+            ],
+        }),
+    };
+    return { label: label.label, animatedLabel };
+};
 BaseInput.displayName = 'BaseInput';

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

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

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

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

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

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

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

@@ -0,0 +1,43 @@
+import { TextStyle, type StyleProp, type TextInputProps, type ViewStyle } from 'react-native';
+import { BoxProps } from '../Utility';
+export type BaseInputProps = {
+    /**
+     * The label text that floats above the input when focused or filled.
+     */
+    label?: string;
+    /**
+     * Additional styles to apply to the container element.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Additional styles to apply to the input element.
+     */
+    inputStyle?: StyleProp<TextStyle>;
+    /**
+     * Additional styles to apply to the label element.
+     */
+    labelStyle?: StyleProp<TextStyle>;
+    /**
+     * An optional error message displayed below the input.
+     */
+    errorMessage?: string;
+    /**
+     * Custom content to render after the input (right side in LTR).
+     * @example suffix={<Icon />}
+     */
+    suffix?: React.ReactNode;
+    /**
+     * Custom content to render before the input (left side in LTR).
+     * @example prefix={<Icon />}
+     */
+    prefix?: React.ReactNode;
+    /**
+     * Optional function to extend the default clear behavior with custom logic.
+     */
+    onClear?: () => void;
+    /**
+     * Hide the clear button (shown by default when input has content).
+     */
+    hideClearButton?: boolean;
+} & Omit<TextInputProps, 'style'> & BoxProps;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BaseInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC;;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,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,GAC/B,QAAQ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAmC3C,QAAA,MAA4B,qBAAqB;;;yJAG9C,CAAC;AAEJ,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;0GAgJhB,CAAC;AAGF,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA2C3C,QAAA,MAA4B,qBAAqB;;;yJAG9C,CAAC;AAEJ,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;0GAgJhB,CAAC;AAGF,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,CAAC"}

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

@@ -1,16 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import GorghomBottomSheet from '@gorhom/bottom-sheet';
 import { createSafeContext, useMergedRef } from '@ledgerhq/lumen-utils-shared';
-import { cva } from 'class-variance-authority';
-import { cssInterop } from 'nativewind';
 import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import { RuntimeConstants } from '../../utils';
 import { CustomBackdrop } from './CustomBackdrop';
 import { CustomHandle } from './CustomHandle';
-const StyledGorghomBottomSheet = cssInterop(GorghomBottomSheet, {
-    className: 'style',
-    backgroundClassName: 'backgroundStyle',
-});
 const OFFSET_TOP = 25;
 const FULL_HEIGHT = RuntimeConstants.insetDimensions.height;
 const FULL_WITH_OFFSET = FULL_HEIGHT - OFFSET_TOP;
@@ -24,16 +20,26 @@ const MAX_DYNAMIC_CONTENT_SIZE = {
     full: FULL_HEIGHT,
     fullWithOffset: FULL_WITH_OFFSET,
 };
-const bottomSheetVariants = {
-    root: cva('mb-16 w-full flex-1 rounded-t-xl bg-canvas-sheet', {
-        variants: {
-            shadow: {
-                true: 'shadow-lg shadow-base',
-                false: '',
+const useStyles = ({ shadow }) => {
+    return useStyleSheet((t) => ({
+        root: StyleSheet.flatten([
+            {
+                marginBottom: t.spacings.s16,
+                width: t.sizes.full,
+                flex: 1,
+                borderTopLeftRadius: t.borderRadius.xl,
+                borderTopRightRadius: t.borderRadius.xl,
+                backgroundColor: t.colors.bg.canvasSheet,
+            },
+            shadow && {
+                boxShadow: t.shadows.lg,
             },
+        ]),
+        background: {
+            marginBottom: t.spacings.s16,
+            backgroundColor: t.colors.bg.canvasSheet,
         },
-    }),
-    background: cva('mb-16 bg-canvas-sheet'),
+    }), [shadow]);
 };
 const [BottomSheetProvider, useBottomSheetContext] = createSafeContext('BottomSheet');
 const BottomSheet = forwardRef(({ onOpen, onClose, onBack, onAnimate, children, hideCloseButton = false, enablePanDownToClose = true, enableDynamicSizing = false, enableBlurKeyboardOnGesture = true, enableHandlePanningGesture = true, maxDynamicContentSize = undefined, detached = false, hideBackdrop = false, backdropPressBehavior = 'close', onBackdropPress, onChange, snapPoints = 'fullWithOffset', ...props }, ref) => {
@@ -41,6 +47,7 @@ const BottomSheet = forwardRef(({ onOpen, onClose, onBack, onAnimate, children,
     const innerRef = useRef(null);
     const mergedRefs = useMergedRef(ref, innerRef);
     const [isOpen, setIsOpen] = useState(false);
+    const styles = useStyles({ shadow: hideBackdrop && isOpen });
     /**
      * Match the snap points to the preset or the custom snap points array
      */
@@ -83,10 +90,8 @@ const BottomSheet = forwardRef(({ onOpen, onClose, onBack, onAnimate, children,
             setIsOpen(newIsOpen);
         }
         onAnimate?.(fromIndex, toIndex, fromPosition, toPosition);
-    }, [onAnimate]);
-    return (_jsx(BottomSheetProvider, { value: { onBack, hideCloseButton }, children: _jsx(StyledGorghomBottomSheet, { ...props, ref: mergedRefs, className: bottomSheetVariants.root({
-                shadow: hideBackdrop && isOpen,
-            }), backgroundClassName: bottomSheetVariants.background(), onChange: handleChange, onAnimate: handleAnimate, 
+    }, [isOpen, onAnimate]);
+    return (_jsx(BottomSheetProvider, { value: { onBack, hideCloseButton }, children: _jsx(GorghomBottomSheet, { ...props, ref: mergedRefs, style: styles.root, backgroundStyle: styles.background, onChange: handleChange, onAnimate: handleAnimate, 
             /**
              * Configuration
              */

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/BottomSheet.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAU5C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgE0B,CAAC;AAErC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,IAAI,EAAE,KA2ClB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAyC3B,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,KAiC5C,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAoCzC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAoC1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAkCxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAoDzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAkE7B,CAAC"}
+{"version":3,"file":"BottomSheet.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/BottomSheet.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAU5C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgE0B,CAAC;AAErC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,IAAI,EAAE,KAmDlB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAiD3B,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,KAwC5C,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KA2CzC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA4C1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA2CxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAoEzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAkF7B,CAAC"}

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Text, View } from 'react-native';
 import { Button } from '../Button';
+import { Box, Text } from '../Utility';
 import { BottomSheet } from './BottomSheet';
 import { BottomSheetHeader } from './BottomSheetHeader';
 import { BottomSheetFlatList, BottomSheetScrollView, BottomSheetView, BottomSheetVirtualizedList, } from './Scrollables';
@@ -86,7 +86,13 @@ 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(Box, { lx: {
+                height: 's320',
+                width: 'full',
+                alignItems: 'center',
+                justifyContent: 'center',
+                paddingTop: 's32',
+            }, 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(Box, { lx: { flexDirection: 'column', gap: 's12' }, children: Array.from({ length: 3 }).map((_, index) => (_jsx(Text, { typography: 'body2', lx: { color: '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 +107,13 @@ 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(Box, { lx: {
+                height: 's320',
+                width: 'full',
+                alignItems: 'center',
+                justifyContent: 'center',
+                paddingTop: 's32',
+            }, 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(Box, { lx: { flexDirection: 'column', gap: 's12' }, children: _jsx(Text, { typography: 'body2', lx: { color: '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! 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 +123,12 @@ 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(Box, { lx: {
+                height: 's320',
+                width: 'full',
+                alignItems: 'center',
+                justifyContent: '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(Box, { lx: { flexDirection: 'column', gap: 's12' }, children: Array.from({ length: 5 }).map((_, index) => (_jsxs(Text, { typography: 'body2', lx: { color: 'base' }, children: ["Item ", index + 1, ": Lorem ipsum, dolor sit amet consectetur adipisicing elit."] }, index))) })] }) })] }));
     },
 };
 export const DynamicSizingWithSnapPoints = {
@@ -121,7 +138,12 @@ 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(Box, { lx: {
+                height: 's320',
+                width: 'full',
+                alignItems: 'center',
+                justifyContent: '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(Box, { lx: { flexDirection: 'column', gap: 's12' }, children: Array.from({ length: 3 }).map((_, index) => (_jsxs(Text, { typography: 'body2', lx: { color: 'base' }, children: ["Item ", index + 1, ": Lorem ipsum, dolor sit amet consectetur adipisicing elit."] }, index))) })] }) })] }));
     },
 };
 export const PreventClose = {
@@ -133,7 +155,13 @@ 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(Box, { lx: {
+                height: 's320',
+                width: 'full',
+                alignItems: 'center',
+                justifyContent: 'center',
+                paddingTop: 's32',
+            }, 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(Box, { lx: { flexDirection: 'column', gap: 's12' }, children: Array.from({ length: 3 }).map((_, index) => (_jsxs(Text, { typography: 'body2', lx: { color: '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 +170,14 @@ 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(Box, { lx: {
+                height: 's320',
+                width: 'full',
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: 'base',
+                paddingTop: 's32',
+            }, 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(Box, { lx: { flexDirection: 'column', gap: 's12' }, children: Array.from({ length: 20 }).map((_, index) => (_jsxs(Text, { typography: 'body2', lx: { color: '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,9 +191,21 @@ 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(Box, { lx: {
+                height: 's320',
+                width: 'full',
+                alignItems: 'center',
+                justifyContent: 'center',
+                paddingTop: 's32',
+            }, 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 })] }));
+                                return (_jsxs(Box, { lx: {
+                                        flexDirection: 'column',
+                                        gap: 's4',
+                                        borderBottomWidth: 's1',
+                                        borderColor: 'base',
+                                        paddingVertical: 's12',
+                                    }, children: [_jsx(Text, { typography: 'body2SemiBold', lx: { color: 'base' }, children: typedItem.title }), _jsx(Text, { typography: 'body3', lx: { color: 'muted' }, children: typedItem.description })] }));
                             } })] })] }));
     },
 };
@@ -179,7 +226,13 @@ 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(Box, { lx: {
+                height: 's320',
+                width: 'full',
+                alignItems: 'center',
+                justifyContent: 'center',
+                paddingTop: 's32',
+            }, 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) => {
@@ -187,7 +240,13 @@ export const VirtualizedList = {
                                 return typedData.length;
                             }, 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 })] }));
+                                return (_jsxs(Box, { lx: {
+                                        flexDirection: 'column',
+                                        gap: 's4',
+                                        borderBottomWidth: 's1',
+                                        borderColor: 'base',
+                                        paddingVertical: 's12',
+                                    }, children: [_jsx(Text, { typography: 'body2SemiBold', lx: { color: 'base' }, children: typedItem.title }), _jsx(Text, { typography: 'body3', lx: { color: 'muted' }, children: typedItem.description })] }));
                             } })] })] }));
     },
 };

package/dist/src/lib/Components/BottomSheet/BottomSheetHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetHeader.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/BottomSheetHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAe,MAAM,OAAO,CAAC;AAOxC,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAiDjD,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAmFxD,CAAC"}
+{"version":3,"file":"BottomSheetHeader.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/BottomSheetHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAe,MAAM,OAAO,CAAC;AAQxC,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AA6EjD,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA0ExD,CAAC"}