@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.45

package/dist/src/lib/Components/Search/Search.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 { Search } from './Search';
 const meta = {
     component: Search,
@@ -13,15 +14,76 @@ const meta = {
             },
         },
     },
+    argTypes: {
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text when input is empty',
+        },
+        errorMessage: {
+            control: 'text',
+            description: 'Error message to display below input',
+        },
+        editable: {
+            control: 'boolean',
+            description: 'Whether the input is editable',
+        },
+        hideClearButton: {
+            control: 'boolean',
+            description: 'Hide the clear button',
+        },
+    },
 };
 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 SearchStory = (args) => {
+    const [query, setQuery] = useState(args.initialValue ?? '');
+    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(Search, { ...args, value: query, onChangeText: setQuery, onClear: args.onClear }) }) }));
+};
+export const Base = {
+    render: (args) => _jsx(SearchStory, { ...args }),
+    args: {
+        placeholder: 'Search products',
+        editable: true,
+        hideClearButton: false,
+    },
+};
+export const WithContent = {
+    render: (args) => _jsx(SearchStory, { ...args, initialValue: 'Search text' }),
+    args: {
+        placeholder: 'Search products',
+        editable: true,
+        hideClearButton: false,
+    },
+};
+export const WithError = {
+    render: (args) => _jsx(SearchStory, { ...args, initialValue: 'Invalid search' }),
+    args: {
+        placeholder: 'Search products',
+        errorMessage: 'Search term is invalid',
+        editable: true,
+        hideClearButton: false,
+    },
+};
+export const DisabledSearch = {
+    render: (args) => _jsx(SearchStory, { ...args, initialValue: 'Disabled search' }),
+    args: {
+        placeholder: 'Search products',
+        editable: false,
+        hideClearButton: false,
+    },
+};
+export const WithHiddenClearButton = {
+    render: (args) => _jsx(SearchStory, { ...args, initialValue: 'Search text' }),
+    args: {
+        placeholder: 'Search products',
+        editable: true,
+        hideClearButton: true,
+    },
+};
+export const WithClearCallback = {
+    render: (args) => (_jsx(SearchStory, { ...args, initialValue: 'Click clear to see callback', onClear: () => alert('Search cleared!') })),
+    args: {
+        placeholder: 'Search products',
+        editable: true,
+        hideClearButton: false,
     },
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAYvE,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAMjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA8DxC,CAAC;AAKF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6GtD,CAAC;AAGF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAsBA,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkDtD,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAUlD,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgBlD,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAIhD,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAUxD,CAAC;AAGF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAU1D,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAOvE,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAMjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA8DxC,CAAC;AAGF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAyFtD,CAAC;AAGF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAsBA,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkDtD,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAUlD,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgBlD,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAIhD,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAUxD,CAAC;AAGF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAU1D,CAAC"}

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

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '@ledgerhq/lumen-utils-shared';
 import React, { useState, useEffect, useCallback, useId } from 'react';
 import { View, Text, Pressable } from 'react-native';
-import Animated, { useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
 import { ChevronDown } from '../../Symbols';
 import { useControllableState, extractTextFromChildren } from '../../utils';
 import { SlotPressable } from '../Slot';
@@ -67,7 +66,6 @@ export const Select = ({ children, open: controlledOpen, defaultOpen = false, on
     return (_jsx(SelectContextProvider, { selectId: selectId, open: internalOpen ?? false, setOpen: setOpen, value: internalValue, onValueChange: handleValueChange, disabled: disabled, items: items, setItems: setItems, children: children }));
 };
 Select.displayName = 'Select';
-const AnimatedLabel = Animated.createAnimatedComponent(Animated.Text);
 export const SelectTrigger = ({ children, className, label, labelClassName, asChild = false, disabled: triggerDisabled, ...props }) => {
     const { selectId, setOpen, items, value, disabled: contextDisabled, label: contextLabel, onValueChange, } = useSelectSafeContext({
         consumerName: 'SelectTrigger',
@@ -100,22 +98,8 @@ export const SelectTrigger = ({ children, className, label, labelClassName, asCh
     ]);
     const hasValue = value !== undefined && value !== '';
     const isFloatingLabel = hasValue;
-    const labelFontSize = useSharedValue(hasValue ? 10 : 14);
-    const labelTop = useSharedValue(hasValue ? 10 : 16);
-    const animatedLabelStyle = useAnimatedStyle(() => ({
-        fontSize: labelFontSize.value,
-        top: labelTop.value,
-    }), []);
-    useEffect(() => {
-        labelFontSize.value = withTiming(isFloatingLabel ? 10 : 14, {
-            duration: 200,
-        });
-        labelTop.value = withTiming(isFloatingLabel ? 10 : 16, {
-            duration: 200,
-        });
-    }, [isFloatingLabel, labelFontSize, labelTop]);
     const Comp = asChild ? SlotPressable : Pressable;
-    return (_jsxs(Comp, { disabled: disabled, onPress: handlePress, className: cn(triggerStyles, disabled && 'opacity-50', className), ...props, children: [finalLabel && (_jsx(AnimatedLabel, { className: cn('absolute left-16 text-muted w-full', disabled && 'text-disabled', labelClassName), style: animatedLabelStyle, numberOfLines: 1, children: finalLabel })), _jsx(View, { className: cn('flex-1', finalLabel && hasValue && 'pt-16 pb-2', finalLabel && !hasValue && 'py-0'), children: children }), _jsx(ChevronDown, { size: 20, className: cn('text-muted ml-8', disabled && 'text-disabled') })] }));
+    return (_jsxs(Comp, { disabled: disabled, onPress: handlePress, className: cn(triggerStyles, disabled && 'opacity-50', className), ...props, children: [finalLabel && (_jsx(Text, { className: cn('absolute left-16 text-muted w-full transition-all duration-200', isFloatingLabel ? 'top-6 body-4' : 'top-14 body-2', disabled && 'text-disabled', labelClassName), numberOfLines: 1, children: finalLabel })), _jsx(View, { className: cn('flex-1', finalLabel && hasValue && 'pt-16 pb-2', finalLabel && !hasValue && 'py-0'), children: children }), _jsx(ChevronDown, { size: 20, className: cn('text-muted ml-8', disabled && 'text-disabled') })] }));
 };
 SelectTrigger.displayName = 'SelectTrigger';
 /**

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

@@ -1,23 +1,20 @@
-import Svg, { type SvgProps } from 'react-native-svg';
-import { IconSize } from '../../Components/Icon/Icon.types';
-export type SpinnerProps = SvgProps & {
-    /**
-     * The size of the spinner icon in pixels.
-     * @default 16
-     */
-    size?: IconSize;
-};
+import { View } from 'react-native';
 /**
  * A basic spinner component for loading states.
  *
  * @example
  * <Spinner />
+ *
+ * @example
+ * // With custom color
+ * <Spinner color={theme.colors.text.base} />
+ *
+ * @example
+ * // With lx props for layout
+ * <Spinner lx={{ marginTop: 's8' }} />
  */
-export declare const Spinner: import("react").ForwardRefExoticComponent<SvgProps & {
-    /**
-     * The size of the spinner icon in pixels.
-     * @default 16
-     */
-    size?: IconSize;
-} & import("react").RefAttributes<Svg>>;
+export declare const Spinner: import("react").ForwardRefExoticComponent<{
+    size?: import("../Icon").IconSize;
+    color?: string;
+} & Omit<import("../../../styles").StyledViewProps, "children"> & import("react").RefAttributes<View>>;
 //# sourceMappingURL=Spinner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAGA,OAAO,GAAG,EAAE,EAAQ,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG;IACpC;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,OAAO;IAblB;;;OAGG;WACI,QAAQ;uCAkChB,CAAC"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spinner/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,IAAI,EAAE,MAAM,cAAc,CAAC;AAQtD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,OAAO;;;sGA+CnB,CAAC"}

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

@@ -1,16 +1,44 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '@ledgerhq/lumen-utils-shared';
-import { forwardRef } from 'react';
-import { View } from 'react-native';
+import { forwardRef, useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { useCommonTranslation } from '../../../i18n';
+import { LumenStyleSheet } from '../../../styles';
+import { RuntimeConstants } from '../../utils';
+import { Box } from '../Utility';
 /**
  * A basic spinner component for loading states.
  *
  * @example
  * <Spinner />
+ *
+ * @example
+ * // With custom color
+ * <Spinner color={theme.colors.text.base} />
+ *
+ * @example
+ * // With lx props for layout
+ * <Spinner lx={{ marginTop: 's8' }} />
  */
-export const Spinner = forwardRef(({ className, size = 16, ...props }, ref) => {
+export const Spinner = forwardRef(({ lx, style, size = 16, color, ...props }, ref) => {
     const { t } = useCommonTranslation();
-    return (_jsx(View, { className: 'shrink-0 animate-spin', children: _jsx(Svg, { className: cn('text-base', className), width: size, height: size, viewBox: '0 0 16 16', fill: 'none', accessibilityLabel: t('components.spinner.loadingAriaLabel'), ref: ref, ...props, children: _jsx(Path, { d: 'M8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8', stroke: 'currentColor', strokeWidth: '1.5', strokeLinecap: 'round' }) }) }));
+    const { theme } = LumenStyleSheet.useTheme();
+    const spinValue = useRef(new Animated.Value(0)).current;
+    const strokeColor = color ?? theme.colors.text.base;
+    useEffect(() => {
+        const animation = Animated.loop(Animated.timing(spinValue, {
+            toValue: 1,
+            duration: 1000,
+            easing: Easing.linear,
+            useNativeDriver: RuntimeConstants.isNative,
+        }));
+        animation.start();
+        return () => animation.stop();
+    }, [spinValue]);
+    const spin = spinValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '360deg'],
+    });
+    return (_jsx(Box, { ref: ref, lx: { flexShrink: 0, ...lx }, style: style, ...props, children: _jsx(Animated.View, { style: { transform: [{ rotate: spin }] }, children: _jsx(Svg, { width: size, height: size, viewBox: '0 0 16 16', fill: 'none', accessibilityLabel: t('components.spinner.loadingAriaLabel'), children: _jsx(Path, { d: 'M8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8', stroke: strokeColor, strokeWidth: '1.5', strokeLinecap: 'round' }) }) }) }));
 });
+Spinner.displayName = 'Spinner';

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spinner/Spinner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAY9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,eAAO,MAAM,IAAI,EAAE,KASlB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAsCnB,CAAC"}
+{"version":3,"file":"Spinner.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spinner/Spinner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAY9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAsCnB,CAAC"}

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

@@ -18,7 +18,7 @@ export const Base = {
     args: {
         size: 40,
     },
-    render: ({ size }) => (_jsx("div", { className: 'flex items-center justify-center', children: _jsx(Spinner, { size: size }) })),
+    render: (args) => _jsx(Spinner, { ...args }),
 };
 export const Sizes = {
     argTypes: {

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { StyledViewProps } from '../../../styles';
+import { IconSize } from '../Icon';
+export type SpinnerProps = {
+    /**
+     * The size of the spinner icon in pixels.
+     * @default 16
+     */
+    size?: IconSize;
+    /**
+     * The color of the spinner stroke.
+     * @default text.base color.
+     */
+    color?: string;
+} & Omit<StyledViewProps, 'children'>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spinner/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}

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

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

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

@@ -2,12 +2,13 @@ import React from 'react';
 import { View } from 'react-native';
 import { IconSize } from '../Icon';
 export declare const Tag: React.ForwardRefExoticComponent<{
-    appearance?: "base" | "gray" | "accent" | "success" | "error" | "warning" | "disabled";
+    appearance?: "base" | "gray" | "accent" | "success" | "error" | "warning";
     icon?: React.ComponentType<{
         size?: IconSize;
         className?: string;
     }>;
     label: string;
     size?: "sm" | "lg";
+    disabled?: boolean;
 } & import("react-native").ViewProps & React.RefAttributes<View>>;
 //# sourceMappingURL=Tag.d.ts.map

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

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

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

@@ -13,16 +13,20 @@ const tagVariants = {
                 success: 'bg-success',
                 error: 'bg-error',
                 warning: 'bg-warning',
-                disabled: 'bg-disabled',
             },
             size: {
                 lg: 'h-24 px-8 py-4 body-3',
                 sm: 'h-20 px-4 py-2 body-4',
             },
+            disabled: {
+                true: 'bg-disabled',
+                false: '',
+            },
         },
         defaultVariants: {
             appearance: 'accent',
             size: 'lg',
+            disabled: false,
         },
     }),
     inner: cva('', {
@@ -34,18 +38,25 @@ const tagVariants = {
                 success: 'text-success',
                 error: 'text-error',
                 warning: 'text-warning',
-                disabled: 'text-disabled',
+            },
+            disabled: {
+                true: 'text-disabled',
+                false: '',
             },
         },
     }),
 };
-export const Tag = React.forwardRef(({ className, appearance, size, icon, label, ...props }, ref) => {
+export const Tag = React.forwardRef(({ className, appearance, size, icon, label, disabled, ...props }, ref) => {
     const iconSizeMap = {
         lg: 16,
         sm: 12,
     };
     const calculatedIconSize = size ? iconSizeMap[size] : 16;
     const IconComponent = icon;
-    return (_jsxs(View, { className: cn(className, tagVariants.root({ appearance, size })), ref: ref, ...props, children: [IconComponent && (_jsx(IconComponent, { size: calculatedIconSize, className: tagVariants.inner({ appearance, className: 'shrink-0' }) })), _jsx(Text, { className: tagVariants.inner({ appearance }), children: label })] }));
+    return (_jsxs(View, { className: cn(className, tagVariants.root({ appearance, size, disabled })), ref: ref, ...props, children: [IconComponent && (_jsx(IconComponent, { size: calculatedIconSize, className: tagVariants.inner({
+                    appearance,
+                    disabled,
+                    className: 'shrink-0',
+                }) })), _jsx(Text, { className: tagVariants.inner({ appearance, disabled }), children: label })] }));
 });
 Tag.displayName = 'Tag';

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

@@ -35,7 +35,7 @@ export const Default = {
     render: (args) => _jsx(Tag, { ...args, icon: args.icon ? Check : undefined }),
 };
 export const Showcase = {
-    render: () => (_jsxs(View, { className: 'flex flex-col gap-16', children: [_jsxs(View, { className: 'flex flex-row gap-4', children: [_jsx(Tag, { appearance: 'base', label: 'Base' }), _jsx(Tag, { appearance: 'gray', label: 'Gray' }), _jsx(Tag, { appearance: 'accent', label: 'Accent' }), _jsx(Tag, { appearance: 'success', label: 'Success' }), _jsx(Tag, { appearance: 'error', label: 'Error' }), _jsx(Tag, { appearance: 'warning', label: 'Warning' }), _jsx(Tag, { appearance: 'disabled', label: 'Disabled' })] }), _jsxs(View, { className: 'flex flex-row gap-4', children: [_jsx(Tag, { appearance: 'base', label: 'Base', icon: Check }), _jsx(Tag, { appearance: 'gray', label: 'Gray', icon: Check }), _jsx(Tag, { appearance: 'accent', label: 'Accent', icon: Check }), _jsx(Tag, { appearance: 'success', label: 'Success', icon: Check }), _jsx(Tag, { appearance: 'error', label: 'Error', icon: Check }), _jsx(Tag, { appearance: 'warning', label: 'Warning', icon: Check }), _jsx(Tag, { appearance: 'disabled', label: 'Disabled', icon: Check })] })] })),
+    render: () => (_jsxs(View, { className: 'flex flex-col gap-16', children: [_jsxs(View, { className: 'flex flex-row gap-4', children: [_jsx(Tag, { appearance: 'base', label: 'Base' }), _jsx(Tag, { appearance: 'gray', label: 'Gray' }), _jsx(Tag, { appearance: 'accent', label: 'Accent' }), _jsx(Tag, { appearance: 'success', label: 'Success' }), _jsx(Tag, { appearance: 'error', label: 'Error' }), _jsx(Tag, { appearance: 'warning', label: 'Warning' }), _jsx(Tag, { label: 'Disabled', disabled: true })] }), _jsxs(View, { className: 'flex flex-row gap-4', children: [_jsx(Tag, { appearance: 'base', label: 'Base', icon: Check }), _jsx(Tag, { appearance: 'gray', label: 'Gray', icon: Check }), _jsx(Tag, { appearance: 'accent', label: 'Accent', icon: Check }), _jsx(Tag, { appearance: 'success', label: 'Success', icon: Check }), _jsx(Tag, { appearance: 'error', label: 'Error', icon: Check }), _jsx(Tag, { appearance: 'warning', label: 'Warning', icon: Check }), _jsx(Tag, { label: 'Disabled', icon: Check, disabled: true })] })] })),
 };
 export const SizesShowcase = {
     render: () => (_jsxs(View, { className: 'flex flex-row items-center gap-4', children: [_jsx(Tag, { size: 'lg', label: 'Large Tag' }), _jsx(Tag, { size: 'sm', label: 'Small Tag' })] })),

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

@@ -5,7 +5,7 @@ export type TagProps = {
     /**
      * The appearance of the tag.
      */
-    appearance?: 'base' | 'gray' | 'accent' | 'success' | 'error' | 'warning' | 'disabled';
+    appearance?: 'base' | 'gray' | 'accent' | 'success' | 'error' | 'warning';
     /**
      * The icon of the tag.
      */
@@ -21,5 +21,11 @@ export type TagProps = {
      * The size of the tag.
      */
     size?: 'sm' | 'lg';
+    /**
+     * When `true`, prevents the user from interacting with the tag.
+     *
+     * @default false
+     */
+    disabled?: boolean;
 } & ViewProps;
 //# sourceMappingURL=Tag.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tag/Tag.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,MAAM,MAAM,QAAQ,GAAG;IACrB;;OAEG;IACH,UAAU,CAAC,EACP,MAAM,GACN,MAAM,GACN,QAAQ,GACR,SAAS,GACT,OAAO,GACP,SAAS,GACT,UAAU,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9D;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB,GAAG,SAAS,CAAC"}
+{"version":3,"file":"Tag.types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tag/Tag.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,MAAM,MAAM,QAAQ,GAAG;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAC1E;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9D;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,SAAS,CAAC"}

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

@@ -3,5 +3,12 @@ import { TextInput } from './TextInput';
 declare const meta: Meta<typeof TextInput>;
 export default meta;
 type Story = StoryObj<typeof TextInput>;
-export declare const WebPreviewWarning: Story;
+export declare const Base: Story;
+export declare const WithContent: Story;
+export declare const WithError: Story;
+export declare const DisabledTextInput: Story;
+export declare const WithHiddenClearButton: Story;
+export declare const WithClearCallback: Story;
+export declare const EmailKeyboard: Story;
+export declare const PhoneKeyboard: Story;
 //# sourceMappingURL=TextInput.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TextInput/TextInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAYhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,iBAAiB,EAAE,KAgB/B,CAAC"}
+{"version":3,"file":"TextInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TextInput/TextInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC;AAE7D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAuChC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAmBxC,eAAO,MAAM,IAAI,EAAE,KAQlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KASvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAQ/B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAUnC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAc/B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC"}

package/dist/src/lib/Components/TextInput/TextInput.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 { TextInput } from './TextInput';
 const meta = {
     component: TextInput,
@@ -13,15 +14,109 @@ const meta = {
             },
         },
     },
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Floating label text',
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text when input is empty',
+        },
+        errorMessage: {
+            control: 'text',
+            description: 'Error message to display below input',
+        },
+        editable: {
+            control: 'boolean',
+            description: 'Whether the input is editable',
+        },
+        hideClearButton: {
+            control: 'boolean',
+            description: 'Hide the clear button',
+        },
+        keyboardType: {
+            control: 'select',
+            options: ['default', 'email-address', 'numeric', 'phone-pad', 'url'],
+            description: 'Keyboard type for input',
+        },
+    },
 };
 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 TextInputStory = (args) => {
+    const [value, setValue] = useState(args.initialValue ?? '');
+    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(TextInput, { ...args, value: value, onChangeText: setValue, onClear: args.onClear }) }) }));
+};
+export const Base = {
+    render: (args) => _jsx(TextInputStory, { ...args }),
+    args: {
+        label: 'Username',
+        editable: true,
+        hideClearButton: false,
+        keyboardType: 'default',
+    },
+};
+export const WithContent = {
+    render: (args) => _jsx(TextInputStory, { ...args, initialValue: 'johndoe' }),
+    args: {
+        label: 'Username',
+        editable: true,
+        hideClearButton: false,
+        keyboardType: 'default',
+    },
+};
+export const WithError = {
+    render: (args) => _jsx(TextInputStory, { ...args, initialValue: 'ab' }),
+    args: {
+        label: 'Username',
+        errorMessage: 'Username must be at least 3 characters',
+        editable: true,
+        hideClearButton: false,
+        keyboardType: 'default',
+    },
+};
+export const DisabledTextInput = {
+    render: (args) => _jsx(TextInputStory, { ...args, initialValue: 'johndoe' }),
+    args: {
+        label: 'Username',
+        editable: false,
+        hideClearButton: false,
+        keyboardType: 'default',
+    },
+};
+export const WithHiddenClearButton = {
+    render: (args) => (_jsx(TextInputStory, { ...args, initialValue: 'Content with hidden clear' })),
+    args: {
+        label: 'Label',
+        editable: true,
+        hideClearButton: true,
+        keyboardType: 'default',
+    },
+};
+export const WithClearCallback = {
+    render: (args) => (_jsx(TextInputStory, { ...args, initialValue: 'Click clear to see callback', onClear: () => alert('Input cleared!') })),
+    args: {
+        label: 'Label',
+        editable: true,
+        hideClearButton: false,
+        keyboardType: 'default',
+    },
+};
+export const EmailKeyboard = {
+    render: (args) => _jsx(TextInputStory, { ...args }),
+    args: {
+        label: 'Email',
+        editable: true,
+        hideClearButton: false,
+        keyboardType: 'email-address',
+    },
+};
+export const PhoneKeyboard = {
+    render: (args) => _jsx(TextInputStory, { ...args }),
+    args: {
+        label: 'Phone Number',
+        editable: true,
+        hideClearButton: false,
+        keyboardType: 'phone-pad',
     },
 };

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

@@ -38,7 +38,7 @@ const tileVariants = {
             disabled: false,
         },
     }),
-    title: cva('body-3-semi-bold w-full truncate text-center', {
+    title: cva('w-full truncate text-center body-3-semi-bold', {
         variants: {
             disabled: {
                 true: 'text-disabled',
@@ -49,7 +49,7 @@ const tileVariants = {
             disabled: false,
         },
     }),
-    description: cva('body-3 w-full overflow-hidden truncate text-center', {
+    description: cva('w-full overflow-hidden truncate text-center body-3', {
         variants: {
             disabled: {
                 true: 'text-disabled',

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

@@ -15,10 +15,10 @@ export const Base = {
     render: () => (_jsxs(_Fragment, { children: [_jsx(View, { className: 'flex min-h-400 items-center justify-center p-24', children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Press me" }) }), _jsx(TooltipContent, { title: 'My tooltip title', content: _jsx(Text, { children: "This is a helpful tooltip" }) })] }) }), _jsx(GlobalTooltipBottomSheet, {})] })),
 };
 export const WithCustomContent = {
-    render: () => (_jsxs(_Fragment, { children: [_jsx(View, { className: 'flex min-h-400 items-center justify-center p-24', children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Press me" }) }), _jsx(TooltipContent, { title: 'My tooltip title', content: _jsxs(View, { className: 'flex items-start gap-12', children: [_jsx(Text, { className: 'text-muted', children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }), _jsx(Button, { size: 'xs', appearance: 'accent', children: "Custom tooltip action" })] }) })] }) }), _jsx(GlobalTooltipBottomSheet, {})] })),
+    render: () => (_jsxs(_Fragment, { children: [_jsx(View, { className: 'flex min-h-400 items-center justify-center p-24', children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Press me" }) }), _jsx(TooltipContent, { title: 'My tooltip title', content: _jsxs(View, { className: 'flex items-start gap-12', children: [_jsx(Text, { className: 'text-muted', children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }), _jsx(Button, { size: 'sm', appearance: 'accent', children: "Custom tooltip action" })] }) })] }) }), _jsx(GlobalTooltipBottomSheet, {})] })),
 };
 export const WithMultipleTooltips = {
-    render: () => (_jsxs(_Fragment, { children: [_jsxs(View, { className: 'flex min-h-400 flex-row items-center justify-center gap-16 p-24', children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Tooltip 1" }) }), _jsx(TooltipContent, { title: 'First', content: _jsx(Text, { children: "First tooltip content" }) })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Tooltip 2" }) }), _jsx(TooltipContent, { title: 'Second', content: _jsx(Text, { children: "Second tooltip content" }) })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(InteractiveIcon, { iconType: 'filled', "aria-label": 'Info', children: _jsx(Information, {}) }) }), _jsx(TooltipContent, { title: 'Third', content: _jsx(Text, { children: "Third tooltip content" }) })] })] }), _jsx(GlobalTooltipBottomSheet, {})] })),
+    render: () => (_jsxs(_Fragment, { children: [_jsxs(View, { className: 'flex min-h-400 flex-row items-center justify-center gap-16 p-24', children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Tooltip 1" }) }), _jsx(TooltipContent, { title: 'First', content: _jsx(Text, { children: "First tooltip content" }) })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Tooltip 2" }) }), _jsx(TooltipContent, { title: 'Second', content: _jsx(Text, { children: "Second tooltip content" }) })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(InteractiveIcon, { iconType: 'filled', accessibilityLabel: 'Info', children: _jsx(Information, {}) }) }), _jsx(TooltipContent, { title: 'Third', content: _jsx(Text, { children: "Third tooltip content" }) })] })] }), _jsx(GlobalTooltipBottomSheet, {})] })),
 };
 export const WithChangeCallback = {
     render: () => {

package/dist/src/lib/Components/Utility/Box/Box.d.ts

@@ -0,0 +1,39 @@
+import { View } from 'react-native';
+import { type StyledViewProps } from '../../../../styles';
+/**
+ * Box - A layout primitive component with token-constrained style props.
+ *
+ * Box is a View wrapper that accepts design token-based style props directly,
+ * providing type-safe styling with autocomplete for spacing, sizes, colors, etc.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/layout-box--docs Storybook}
+ *
+ * @example
+ * ```tsx
+ * import { Box } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * // Basic usage with token props
+ * <Box lx={{ width: 's400', marginTop: 's4', gap: 's12', alignItems: 'center' }}>
+ *   <Text>Content</Text>
+ * </Box>
+ *
+ * // With background and border
+ * <Box
+ *   lx={{
+ *    padding: 's16',
+ *    backgroundColor: 'surface',
+ *    borderRadius: 'md',
+ *    borderColor: 'muted',
+ *    borderWidth: 1
+ *   }}
+ * >
+ *   <Text>Card content</Text>
+ * </Box>
+ *
+ * // style prop for complete override
+ * <Box lx={{ marginTop: 's4' }} style={{ width: 127 }} />
+ * ```
+ */
+export declare const Box: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("../../../../styles").LumenViewStyleLX & import("react-native").ViewProps & import("react").RefAttributes<View>>>;
+export type BoxProps = StyledViewProps;
+//# sourceMappingURL=Box.d.ts.map

package/dist/src/lib/Components/Utility/Box/Box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,GAAG,wMAAyB,CAAC;AAE1C,MAAM,MAAM,QAAQ,GAAG,eAAe,CAAC"}