@ledgerhq/lumen-ui-rnative 0.1.7 → 0.1.9

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

@@ -1,137 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getFontSize, textFormatter } from '@ledgerhq/lumen-utils-shared';
-import { useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Pressable, StyleSheet, TextInput } from 'react-native';
-import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withSequence, withTiming, } from 'react-native-reanimated';
-import { useStyleSheet } from '../../../styles';
-import { Box } from '../Utility';
-/**
- * AmountInput component for handling numeric input with currency display.
- * This is a controlled component - both `value` and `onChange` props are required.
- * The currency text can be positioned either on the left or right side of the input.
- */
-export const AmountInput = ({ lx = {}, style, currencyText, currencyPosition = 'left', editable = true, maxIntegerLength = 9, maxDecimalLength = 9, allowDecimals = true, thousandsSeparator = true, value, onChangeText, isInvalid = false, ref, ...props }) => {
-    const inputRef = useRef(null);
-    const inputValue = String(value);
-    const [isFocused, setIsFocused] = useState(false);
-    const translateX = useSharedValue(0);
-    const animatedFontSize = useSharedValue(getFontSize(inputValue));
-    const caretOpacity = useSharedValue(0);
-    useImperativeHandle(ref, () => inputRef.current, []);
-    const styles = useStyles({
-        hasValue: !!inputValue,
-        isEditable: editable,
-        isInvalid,
-    });
-    const animatedInputStyle = useAnimatedStyle(() => ({
-        transform: [{ translateX: translateX.value }],
-        fontSize: animatedFontSize.value,
-        letterSpacing: 0,
-    }), [translateX, animatedFontSize]);
-    const animatedCurrencyStyle = useAnimatedStyle(() => ({
-        fontSize: animatedFontSize.value,
-        letterSpacing: 0,
-    }), [animatedFontSize]);
-    const animatedCaretStyle = useAnimatedStyle(() => ({
-        opacity: caretOpacity.value,
-        height: animatedFontSize.value,
-    }), [caretOpacity, animatedFontSize]);
-    useEffect(() => {
-        const newSize = getFontSize(inputValue);
-        translateX.value = withSequence(withTiming(4, { duration: 0 }), withTiming(0, {
-            duration: 250,
-            easing: Easing.bezier(0.4, 0, 0.2, 1),
-        }));
-        animatedFontSize.value = withTiming(newSize, {
-            duration: 250,
-            easing: Easing.bezier(0.4, 0, 0.2, 1),
-        });
-    }, [inputValue, animatedFontSize, translateX]);
-    useEffect(() => {
-        if (isFocused && editable) {
-            caretOpacity.value = withRepeat(withSequence(withTiming(1, { duration: 150, easing: Easing.ease }), withTiming(1, { duration: 500 }), withTiming(0, { duration: 150, easing: Easing.ease }), withTiming(0, { duration: 500 })), -1, false);
-        }
-        else {
-            caretOpacity.value = 0;
-        }
-    }, [isFocused, editable, caretOpacity]);
-    const handleChangeText = (text) => {
-        const formatted = textFormatter(text, {
-            allowDecimals,
-            thousandsSeparator,
-            maxIntegerLength,
-            maxDecimalLength,
-        });
-        onChangeText(formatted);
-    };
-    const CurrencyText = currencyText ? (_jsx(Animated.Text, { style: [styles.currency, animatedCurrencyStyle], children: currencyText })) : null;
-    const handlePress = () => {
-        if (editable) {
-            inputRef.current?.focus();
-        }
-    };
-    return (_jsxs(Box, { lx: lx, style: styles.container, children: [_jsx(TextInput, { ref: inputRef, keyboardType: 'decimal-pad', editable: editable, value: inputValue, onChangeText: handleChangeText, onFocus: (e) => {
-                    setIsFocused(true);
-                    props.onFocus?.(e);
-                }, onBlur: (e) => {
-                    setIsFocused(false);
-                    props.onBlur?.(e);
-                }, style: styles.hiddenInput, ...props }), _jsxs(Pressable, { onPress: handlePress, style: styles.pressable, accessibilityLabel: props.accessibilityLabel || 'Amount input', children: [currencyPosition === 'left' && CurrencyText, _jsx(Animated.Text, { style: [styles.displayText, animatedInputStyle, style], children: inputValue || '0' }), _jsx(Animated.View, { style: [styles.caret, animatedCaretStyle] }), currencyPosition === 'right' && CurrencyText] })] }));
-};
-const useStyles = ({ hasValue, isEditable, isInvalid, }) => {
-    return useStyleSheet((t) => ({
-        container: {
-            position: 'relative',
-        },
-        hiddenInput: {
-            position: 'absolute',
-            width: t.sizes.full,
-            height: t.sizes.full,
-            opacity: 0,
-        },
-        pressable: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        displayText: StyleSheet.flatten([
-            {
-                height: t.sizes.s56,
-                backgroundColor: 'transparent',
-                color: t.colors.text.base,
-                alignItems: 'flex-start',
-                ...t.typographies.heading0SemiBold,
-            },
-            !hasValue && {
-                color: t.colors.text.mutedSubtle,
-            },
-            !isEditable && {
-                color: t.colors.text.disabled,
-            },
-            isInvalid && {
-                color: t.colors.text.error,
-            },
-        ]),
-        currency: StyleSheet.flatten([
-            {
-                color: t.colors.text.base,
-                ...t.typographies.heading0SemiBold,
-            },
-            !hasValue && {
-                color: t.colors.text.mutedSubtle,
-            },
-            !isEditable && {
-                color: t.colors.text.disabled,
-            },
-            isInvalid && {
-                color: t.colors.text.error,
-            },
-        ]),
-        caret: {
-            marginHorizontal: t.spacings.s2,
-            width: t.sizes.s2,
-            backgroundColor: t.colors.text.active,
-        },
-    }), [hasValue, isEditable, isInvalid]);
-};
-AmountInput.displayName = 'AmountInput';

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

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,cAAc,EACd,OAAO,GAAG,cAAc,CACzB,GAAG;IACF;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;OAGG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,QAAQ,CAAC"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAuDtC;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM,mEAShB,WAAW,4CA6Cb,CAAC"}

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

@@ -1,81 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import { StyleSheet, Image, View } from 'react-native';
-import { useCommonTranslation } from '../../../i18n';
-import { useStyleSheet } from '../../../styles';
-import { User } from '../../Symbols';
-import { Box } from '../Utility';
-const fallbackSizes = {
-    sm: 16,
-    md: 24,
-};
-const useStyles = ({ size }) => {
-    return useStyleSheet((t) => {
-        const sizeMap = {
-            sm: { size: t.sizes.s40, padding: t.spacings.s4 },
-            md: { size: t.sizes.s48, padding: t.spacings.s4 },
-        };
-        const notificationsMap = {
-            sm: t.sizes.s10,
-            md: t.sizes.s12,
-        };
-        return {
-            root: {
-                position: 'relative',
-                width: sizeMap[size].size,
-                height: sizeMap[size].size,
-                borderRadius: 9999,
-                backgroundColor: t.colors.bg.muted,
-                alignItems: 'center',
-                justifyContent: 'center',
-                padding: sizeMap[size].padding,
-            },
-            notification: {
-                position: 'absolute',
-                top: 0,
-                right: 0,
-                width: notificationsMap[size],
-                height: notificationsMap[size],
-                borderRadius: 9999,
-                backgroundColor: t.colors.bg.errorStrong,
-                zIndex: 1,
-            },
-            image: {
-                width: '100%',
-                height: '100%',
-                overflow: 'hidden',
-                borderRadius: 9999,
-            },
-        };
-    }, [size]);
-};
-/**
- * A circular avatar component that displays a user image or fallback icon.
- *
- * When the image fails to load or no src is provided, displays a User icon fallback.
- * Supports an optional notification indicator.
- *
- * @see {@link https://lumen-ldls.vercel.app/?path=/docs/react-native_communication-avatar--docs Storybook}
- *
- * @example
- * import { Avatar } from '@ledgerhq/lumen-ui-react';
- *
- * <Avatar src="https://example.com/photo.jpg" size="md" />
- *
- * // With notification indicator
- * <Avatar src="https://example.com/photo.jpg" showNotification />
- */
-export const Avatar = ({ lx, style, src, alt = 'avatar', size = 'md', showNotification = false, ref, ...props }) => {
-    const { t } = useCommonTranslation();
-    const [error, setError] = useState(false);
-    const shouldFallback = !src || error;
-    const styles = useStyles({ size });
-    const resolvedAlt = alt || t('components.avatar.defaultAlt');
-    const accessibilityLabel = showNotification
-        ? `${resolvedAlt}, ${t('components.avatar.notificationAriaLabel')}`
-        : resolvedAlt;
-    useEffect(() => {
-        setError(false);
-    }, [src]);
-    return (_jsxs(Box, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.root, style]), accessibilityRole: 'image', accessibilityLabel: accessibilityLabel, ...props, children: [showNotification && (_jsx(View, { style: styles.notification, accessible: false })), shouldFallback ? (_jsx(User, { size: fallbackSizes[size], accessible: false, testID: 'avatar-fallback-icon' })) : (_jsx(Image, { source: { uri: src }, style: styles.image, accessible: false, onError: () => setError(true), testID: 'avatar-image' }))] }));
-};

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

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

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

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

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

@@ -1,26 +0,0 @@
-import { StyledViewProps } from '../../../styles';
-export type AvatarProps = {
-    /**
-     * Image source URL. When undefined or on load error, displays a fallback icon.
-     * @optional
-     */
-    src?: string;
-    /**
-     * Alternative text for the image.
-     * @optional
-     */
-    alt?: string;
-    /**
-     * The size variant of the avatar.
-     * @optional
-     * @default md
-     */
-    size?: 'sm' | 'md';
-    /**
-     * Whether to show the notifications indicator.
-     * @optional
-     * @default false
-     */
-    showNotification?: boolean;
-} & Omit<StyledViewProps, 'children'>;
-//# sourceMappingURL=types.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Avatar/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Banner/Banner.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAgFtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,MAAM;4HAYhB,WAAW;;CAyDb,CAAC"}

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

@@ -1,117 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isTextChildren } from '@ledgerhq/lumen-utils-shared';
-import { StyleSheet, Text, View } from 'react-native';
-import { useCommonTranslation } from '../../../i18n';
-import { useStyleSheet } from '../../../styles';
-import { InformationFill, CheckmarkCircleFill, WarningFill, DeleteCircleFill, Close, } from '../../Symbols';
-import { IconButton } from '../IconButton';
-import { Box } from '../Utility';
-import { Wrap } from '../Wrap';
-const iconColorMap = {
-    info: 'base',
-    success: 'success',
-    warning: 'warning',
-    error: 'error',
-};
-const useStyles = ({ appearance }) => {
-    return useStyleSheet((t) => {
-        const bgColors = {
-            info: t.colors.bg.surface,
-            success: t.colors.bg.success,
-            warning: t.colors.bg.warning,
-            error: t.colors.bg.error,
-        };
-        return {
-            root: {
-                flexDirection: 'row',
-                width: t.sizes.full,
-                alignItems: 'flex-start',
-                gap: t.spacings.s8,
-                borderRadius: t.borderRadius.md,
-                padding: t.spacings.s16,
-                backgroundColor: bgColors[appearance],
-            },
-            iconWrapper: {
-                flexShrink: 0,
-                flexDirection: 'row',
-                alignItems: 'flex-start',
-                paddingVertical: t.spacings.s4,
-            },
-            contentWrapper: {
-                marginRight: t.spacings.s8,
-                flex: 1,
-                flexDirection: 'column',
-                gap: t.spacings.s8,
-                paddingVertical: t.spacings.s4,
-            },
-            textWrapper: {
-                flexDirection: 'column',
-                gap: t.spacings.s4,
-            },
-            title: StyleSheet.flatten([
-                t.typographies.body1SemiBold,
-                {
-                    color: t.colors.text.base,
-                },
-            ]),
-            description: StyleSheet.flatten([
-                t.typographies.body2,
-                {
-                    color: t.colors.text.base,
-                },
-            ]),
-            actionsWrapper: {
-                flexDirection: 'row',
-                gap: t.spacings.s4,
-            },
-        };
-    }, [appearance]);
-};
-const iconsMap = {
-    info: InformationFill,
-    success: CheckmarkCircleFill,
-    warning: WarningFill,
-    error: DeleteCircleFill,
-};
-/**
- * A banner component for displaying informational, success, warning, or error messages with optional description, action buttons, and close button.
- *
- * The appearance determines the color scheme and icon used.
- *
- * @see {@link https://ldls.vercel.app/?path=/docs/communication-banner-overview--docs Storybook}
- * @see {@link https://ldls.vercel.app/?path=/docs/communication-banner-implementation--docs#dos-and-donts Guidelines}
- *
- * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
- * Do not use it to modify the banner's core appearance (colors, padding, etc). Use the `appearance` prop instead.
- *
- * @example
- * import { Banner } from '@ledgerhq/lumen-ui-rnative';
- *
- * // Basic info banner
- * <Banner title="Information" appearance="info" />
- *
- * // Banner with description and actions
- * <Banner
- *   title="Success"
- *   appearance="success"
- *   description="Your action was successful."
- *   primaryAction={<Button appearance="transparent" size="sm" onPress={() => {}}>Primary</Button>}
- *   secondaryAction={<Button appearance="no-background" size="sm" onPress={() => {}}>Secondary</Button>}
- * />
- *
- * // Error banner with close
- * <Banner
- *   title="Error"
- *   appearance="error"
- *   onClose={() => console.log('Close')}
- *   closeAriaLabel="Close banner"
- * />
- */
-export const Banner = ({ appearance = 'info', title, description, primaryAction, secondaryAction, lx = {}, style, onClose, closeAriaLabel, ref, ...props }) => {
-    const { t } = useCommonTranslation();
-    const styles = useStyles({ appearance });
-    const IconComponent = iconsMap[appearance];
-    const iconColor = iconColorMap[appearance];
-    return (_jsxs(Box, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.root, style]), ...props, children: [_jsx(View, { style: styles.iconWrapper, children: _jsx(IconComponent, { lx: { color: iconColor } }) }), _jsxs(View, { style: styles.contentWrapper, children: [_jsxs(View, { style: styles.textWrapper, children: [title && (_jsx(Text, { style: styles.title, numberOfLines: 2, children: title })), description && (_jsx(View, { children: _jsx(Wrap, { if: isTextChildren(description), with: (children) => (_jsx(Text, { style: styles.description, children: children })), children: description }) }))] }), (primaryAction || secondaryAction) && (_jsxs(View, { style: styles.actionsWrapper, children: [primaryAction, secondaryAction] }))] }), onClose && (_jsx(IconButton, { testID: 'banner-close-button', appearance: 'transparent', size: 'xs', icon: Close, onPress: () => onClose(), accessibilityLabel: closeAriaLabel || t('components.banner.closeAriaLabel') }))] }));
-};
-Banner.displayName = 'Banner';

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

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Banner/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACtD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,GAAG,eAAe,CAAC"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"BaseInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BaseInput/BaseInput.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,eAAO,MAAM,SAAS;2KAenB,cAAc;;CAmIhB,CAAC"}

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

@@ -1,173 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useImperativeHandle, useRef, useState, } from 'react';
-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 { RuntimeConstants } from '../../utils';
-import { InteractiveIcon } from '../InteractiveIcon';
-import { Box, Pressable } from '../Utility';
-export const BaseInput = ({ lx, style, containerStyle, inputStyle, labelStyle, label, errorMessage, hideClearButton, onChangeText: onChangeTextProp, editable = true, prefix, suffix, ref, ...props }) => {
-    const { t } = useCommonTranslation();
-    const { theme } = useTheme();
-    const inputRef = useRef(null);
-    useImperativeHandle(ref, () => inputRef.current);
-    const [uncontrolledValue, setUncontrolledValue] = useState(props.defaultValue || '');
-    const [isFocused, setIsFocused] = useState(false);
-    const isControlled = props.value !== undefined;
-    const value = isControlled ? props.value : uncontrolledValue;
-    const hasContent = isControlled
-        ? !!props.value && props.value.length > 0
-        : uncontrolledValue.length > 0;
-    const isFloatingLabel = isFocused || hasContent;
-    const showClearButton = hasContent && editable && !hideClearButton;
-    const floatingAnimation = useRef(new Animated.Value(isFloatingLabel ? 1 : 0)).current;
-    useEffect(() => {
-        Animated.timing(floatingAnimation, {
-            toValue: isFloatingLabel ? 1 : 0,
-            duration: 150,
-            useNativeDriver: false,
-        }).start();
-    }, [isFloatingLabel, floatingAnimation]);
-    const handleChangeText = useCallback((text) => {
-        if (!isControlled) {
-            setUncontrolledValue(text);
-        }
-        onChangeTextProp?.(text);
-    }, [isControlled, onChangeTextProp]);
-    const handleClear = () => {
-        if (!isControlled) {
-            setUncontrolledValue('');
-        }
-        else {
-            onChangeTextProp?.('');
-        }
-        props.onClear?.();
-    };
-    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: StyleSheet.flatten([styles.container, containerStyle]), onPress: () => inputRef.current?.focus(), disabled: !editable, children: [prefix, _jsx(TextInput, { ref: inputRef, value: value, style: StyleSheet.flatten([styles.input, 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 && {
-                    borderWidth: 1,
-                    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,
-                    outline: 'none',
-                },
-                hasLabel && {
-                    paddingTop: t.spacings.s20,
-                    paddingBottom: t.spacings.s4,
-                    paddingHorizontal: 0,
-                    ...t.typographies.body2,
-                },
-                RuntimeConstants.isIOS && hasLabel && { lineHeight: 0 },
-                RuntimeConstants.isAndroid && { includeFontPadding: false },
-                !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.s6],
-        }),
-        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.map

@@ -1 +0,0 @@
-{"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,2 +0,0 @@
-export * from './BaseInput';
-export * from './types';

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

@@ -1 +0,0 @@
-{"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,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC;;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/BaseInput/types.js

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

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

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