@ledgerhq/lumen-ui-rnative 0.1.4 → 0.1.6

package/src/lib/Components/SegmentedControl/SegmentedControl.tsx

@@ -1,12 +1,6 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-import { LayoutChangeEvent } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 import { useStyleSheet } from '../../../styles';
-import { durations, easingCurves } from '../../Animations/constants';
+import type { LumenTextStyle, LumenTypographyTokenName } from '../../../styles';
 import { Box, Pressable, Text } from '../Utility';
 import {
   SegmentedControlContextProvider,
@@ -16,8 +10,10 @@ import type {
   SegmentedControlButtonProps,
   SegmentedControlProps,
 } from './types';
-
-const ICON_SIZE = 16;
+import {
+  usePillLayout,
+  useSegmentedControlSelectedIndex,
+} from './usePillLayout';
 
 export function SegmentedControlButton({
   value,
@@ -26,32 +22,35 @@ export function SegmentedControlButton({
   onPress,
   ...props
 }: SegmentedControlButtonProps) {
-  const styles = useButtonStyles();
-  const { selectedValue, onSelectedChange } = useSegmentedControlContext();
-
+  const { selectedValue, onSelectedChange, disabled } =
+    useSegmentedControlContext();
   const selected = selectedValue === value;
+  const styles = useButtonStyles({ selected, disabled });
 
   function handlePress() {
-    onSelectedChange(value);
-    onPress?.();
+    if (!disabled) {
+      onSelectedChange(value);
+      onPress?.();
+    }
   }
 
   return (
     <Pressable
       onPress={handlePress}
-      accessibilityState={{ selected }}
+      disabled={disabled}
+      accessibilityState={{ selected, disabled }}
       style={styles.button}
       {...props}
     >
       <Box style={styles.content}>
         {Icon && (
           <Box style={styles.iconWrap}>
-            <Icon size={ICON_SIZE} />
+            <Icon size={16} color={styles.textColor} />
           </Box>
         )}
         <Text
-          typography={selected ? 'body2SemiBold' : 'body2'}
-          lx={{ color: 'base' }}
+          typography={styles.typography}
+          lx={{ color: styles.textColor }}
           style={styles.label}
         >
           {children}
@@ -63,8 +62,14 @@ export function SegmentedControlButton({
 
 SegmentedControlButton.displayName = 'SegmentedControlButton';
 
-function useButtonStyles() {
-  return useStyleSheet(
+function useButtonStyles({
+  selected,
+  disabled,
+}: {
+  selected: boolean;
+  disabled?: boolean;
+}) {
+  const styles = useStyleSheet(
     (t) => ({
       button: {
         flex: 1,
@@ -93,6 +98,12 @@ function useButtonStyles() {
     }),
     [],
   );
+  const typography: LumenTypographyTokenName = selected
+    ? 'body2SemiBold'
+    : 'body2';
+  const textColor: LumenTextStyle['color'] =
+    selected && !disabled ? 'base' : 'muted';
+  return { ...styles, typography, textColor };
 }
 
 export function SegmentedControl({
@@ -100,67 +111,31 @@ export function SegmentedControl({
   onSelectedChange,
   accessibilityLabel,
   children,
+  disabled,
+  appearance = 'background',
   ...props
 }: SegmentedControlProps) {
-  const styles = useRootStyles();
-  const pillTranslateX = useSharedValue(0);
-  const pillWidth = useSharedValue(0);
-  const pillHeight = useSharedValue(0);
-  const hasLayoutRef = useRef(false);
-
-  const getSelectedIndex = useCallback((): number => {
-    return React.Children.toArray(children).findIndex((child) => {
-      if (React.isValidElement(child) && child.props != null) {
-        return (child.props as { value?: string }).value === selectedValue;
-      }
-      return false;
-    });
-  }, [selectedValue, children]);
-
-  function onLayout(e: LayoutChangeEvent) {
-    const { width, height } = e.nativeEvent.layout;
-    const count = React.Children.count(children);
-    const slotWidth = count > 0 ? width / count : 0;
-
-    pillWidth.value = slotWidth;
-    pillHeight.value = height;
-
-    if (!hasLayoutRef.current) {
-      hasLayoutRef.current = true;
-      const index = getSelectedIndex();
-      if (index >= 0) {
-        pillTranslateX.value = index * slotWidth;
-      }
-    }
-  }
-
-  useEffect(() => {
-    if (!hasLayoutRef.current) return;
-    const index = getSelectedIndex();
-    if (index >= 0 && pillWidth.value > 0) {
-      pillTranslateX.value = withTiming(index * pillWidth.value, {
-        duration: durations['250'],
-        easing: easingCurves.bezier.default,
-      });
-    }
-  }, [pillWidth, pillTranslateX, getSelectedIndex]);
-
-  const animatedPillStyle = useAnimatedStyle(
-    () => ({
-      transform: [{ translateX: pillTranslateX.value }],
-      width: pillWidth.value,
-      height: pillHeight.value,
-    }),
-    [pillTranslateX, pillWidth, pillHeight],
+  const styles = useRootStyles({
+    disabled: Boolean(disabled),
+    appearance,
+  });
+  const selectedIndex = useSegmentedControlSelectedIndex(
+    selectedValue,
+    children,
   );
+  const { onLayout, animatedPillStyle } = usePillLayout({
+    selectedIndex,
+    children,
+  });
 
   return (
     <SegmentedControlContextProvider
-      value={{ selectedValue, onSelectedChange }}
+      value={{ selectedValue, onSelectedChange, disabled }}
     >
       <Box
         accessibilityRole='radiogroup'
         accessibilityLabel={accessibilityLabel}
+        accessibilityState={{ disabled }}
         onLayout={onLayout}
         style={styles.container}
         {...props}
@@ -177,7 +152,13 @@ export function SegmentedControl({
 
 SegmentedControl.displayName = 'SegmentedControl';
 
-function useRootStyles() {
+function useRootStyles({
+  disabled,
+  appearance,
+}: {
+  disabled: boolean;
+  appearance: 'background' | 'no-background';
+}) {
   return useStyleSheet(
     (t) => ({
       container: {
@@ -185,18 +166,21 @@ function useRootStyles() {
         alignItems: 'center',
         position: 'relative',
         width: '100%',
-        borderRadius: t.borderRadius.full,
-        backgroundColor: t.colors.bg.baseTransparent,
+        borderRadius: t.borderRadius.md,
+        backgroundColor:
+          appearance === 'background' ? t.colors.bg.surface : 'transparent',
       },
       pill: {
         position: 'absolute',
         top: 0,
         left: 0,
         borderRadius: t.borderRadius.sm,
-        backgroundColor: t.colors.bg.muted,
+        backgroundColor: disabled
+          ? t.colors.bg.baseTransparentPressed
+          : t.colors.bg.mutedTransparent,
         zIndex: 0,
       },
     }),
-    [],
+    [disabled, appearance],
   );
 }

package/src/lib/Components/SegmentedControl/SegmentedControlContext.tsx

@@ -3,6 +3,7 @@ import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
 export type SegmentedControlContextValue = {
   selectedValue: string;
   onSelectedChange: (value: string) => void;
+  disabled?: boolean;
 };
 
 const [SegmentedControlContextProvider, _useSegmentedControlSafeContext] =

package/src/lib/Components/SegmentedControl/types.ts

@@ -1,5 +1,5 @@
 import { ComponentType, ReactNode } from 'react';
-import { StyledPressableProps } from '../../../styles';
+import { LumenTextStyle, StyledPressableProps } from '../../../styles';
 import { IconSize } from '../Icon';
 import { BoxProps } from '../Utility';
 
@@ -12,18 +12,28 @@ export type SegmentedControlProps = {
    * Callback when the selected segment value changes.
    */
   onSelectedChange: (value: string) => void;
+  /**
+   * When true, the entire control is disabled (no interaction, selected uses muted styling).
+   */
+  disabled?: boolean;
+  /**
+   * Visual style of the control container: "background" shows the surface bg, "no-background" is transparent.
+   * @default 'background'
+   */
+  appearance?: 'background' | 'no-background';
   /**
    * Accessible label for the control (e.g. "File view").
    */
   accessibilityLabel?: string;
   /**
-   * Segment buttons (SegmentedControlButton). Can be wrapped (e.g. in Tooltip).
+   * Segment buttons (SegmentedControlButton).
    */
   children: ReactNode;
 } & Omit<BoxProps, 'children'>;
 
 type IconComponent = ComponentType<{
   size?: IconSize;
+  color?: LumenTextStyle['color'];
 }>;
 
 export type SegmentedControlButtonProps = {

package/src/lib/Components/SegmentedControl/usePillLayout.ts

@@ -0,0 +1,76 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { LayoutChangeEvent } from 'react-native';
+import {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { durations, easingCurves } from '../../Animations/constants';
+
+export function useSegmentedControlSelectedIndex(
+  selectedValue: string,
+  children: React.ReactNode,
+): number {
+  return useMemo(
+    () =>
+      React.Children.toArray(children).findIndex((child) => {
+        if (React.isValidElement(child) && child.props != null) {
+          return (child.props as { value?: string }).value === selectedValue;
+        }
+        return false;
+      }),
+    [selectedValue, children],
+  );
+}
+
+type UsePillLayoutParams = {
+  selectedIndex: number;
+  children: React.ReactNode;
+};
+
+export function usePillLayout({
+  selectedIndex,
+  children,
+}: UsePillLayoutParams) {
+  const pillTranslateX = useSharedValue(0);
+  const pillWidth = useSharedValue(0);
+  const pillHeight = useSharedValue(0);
+  const hasLayoutRef = useRef(false);
+
+  const onLayout = (e: LayoutChangeEvent): void => {
+    const { width, height } = e.nativeEvent.layout;
+    const count = React.Children.count(children);
+    const slotWidth = count > 0 ? width / count : 0;
+
+    pillWidth.value = slotWidth;
+    pillHeight.value = height;
+
+    if (!hasLayoutRef.current) {
+      hasLayoutRef.current = true;
+      if (selectedIndex >= 0) {
+        pillTranslateX.value = selectedIndex * slotWidth;
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (!hasLayoutRef.current) return;
+    if (selectedIndex >= 0 && pillWidth.value > 0) {
+      pillTranslateX.value = withTiming(selectedIndex * pillWidth.value, {
+        duration: durations['250'],
+        easing: easingCurves.bezier.default,
+      });
+    }
+  }, [selectedIndex, pillWidth, pillTranslateX]);
+
+  const animatedPillStyle = useAnimatedStyle(
+    () => ({
+      transform: [{ translateX: pillTranslateX.value }],
+      width: pillWidth.value,
+      height: pillHeight.value,
+    }),
+    [pillTranslateX, pillWidth, pillHeight],
+  );
+
+  return { onLayout, animatedPillStyle };
+}

package/src/lib/Components/TileButton/TileButton.tsx

@@ -38,10 +38,10 @@ const useStyles = ({
           gap: t.spacings.s8,
           padding: t.spacings.s12,
           borderRadius: t.borderRadius.md,
-          backgroundColor: t.colors.bg.muted,
+          backgroundColor: t.colors.bg.surface,
         },
         isFull && { width: t.sizes.full },
-        pressed && !disabled && { backgroundColor: t.colors.bg.mutedPressed },
+        pressed && !disabled && { backgroundColor: t.colors.bg.surfacePressed },
         disabled && { backgroundColor: t.colors.bg.disabled },
       ]),
       label: StyleSheet.flatten([

package/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import { useTheme } from 'src/styles';
+import { useTheme } from '../../../../../styles';
 import { Box } from '../../Box';
 import { Text } from '../../Text';
 import { LinearGradient } from './LinearGradient';

package/tsconfig.json

@@ -6,20 +6,7 @@
   "files": [],
   "include": [],
   "references": [
-    {
-      "path": "../design-core"
-    },
-    {
-      "path": "../utils-shared"
-    },
-    {
-      "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    },
-    {
-      "path": "./tsconfig.storybook.json"
-    }
-  ],
+    { "path": "./tsconfig.lib.json" },
+    { "path": "./tsconfig.spec.json" }
+  ]
 }

package/tsconfig.lib.json

@@ -15,6 +15,11 @@
     "src/**/*.test.tsx",
     "src/**/*.test.js",
     "src/**/*.test.jsx",
+    "src/**/*.stories.ts",
+    "src/**/*.stories.tsx",
+    "src/**/*.stories.js",
+    "src/**/*.stories.jsx",
+    "src/**/*.mdx",
     "eslint.config.js",
     "eslint.config.cjs",
     "eslint.config.mjs",

package/dist/src/lib/Animations/Pulse/Pulse.stories.d.ts

@@ -1,9 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import { Pulse } from './Pulse';
-declare const meta: Meta<typeof Pulse>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Base: Story;
-export declare const DurationShowcase: Story;
-export declare const WithAmountDisplay: Story;
-//# sourceMappingURL=Pulse.stories.d.ts.map

package/dist/src/lib/Animations/Pulse/Pulse.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Pulse.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Animations/Pulse/Pulse.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAKvE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAchC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAMC,CAAC;AAE/B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAQlB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAmC9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAY/B,CAAC"}

package/dist/src/lib/Animations/Pulse/Pulse.stories.js

@@ -1,38 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { View } from 'react-native';
-import { AmountDisplay } from '../../Components/AmountDisplay';
-import { Box, Text } from '../../Components/Utility';
-import { Pulse } from './Pulse';
-const usdFormatter = (value) => {
-    const [integerPart, decimalPart] = value.toFixed(2).split(/\.|,/);
-    return {
-        integerPart,
-        decimalPart,
-        currencyText: '$',
-        decimalSeparator: '.',
-        currencyPosition: 'start',
-    };
-};
-const meta = {
-    title: 'Animations/Pulse',
-    component: Pulse,
-    parameters: {
-        layout: 'centered',
-    },
-};
-export default meta;
-export const Base = {
-    args: {
-        duration: 2000,
-        animate: true,
-        children: (_jsx(Box, { lx: { width: 's48', height: 's48', backgroundColor: 'accent' } })),
-    },
-};
-export const DurationShowcase = {
-    render: () => (_jsxs(View, { style: { flexDirection: 'row', gap: 24, alignItems: 'center' }, children: [_jsxs(View, { style: { alignItems: 'center', gap: 8 }, children: [_jsx(Pulse, { duration: 1000, animate: true, children: _jsx(Box, { lx: { width: 's48', height: 's48', backgroundColor: 'accent' } }) }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "1000ms" })] }), _jsxs(View, { style: { alignItems: 'center', gap: 8 }, children: [_jsx(Pulse, { duration: 2000, animate: true, children: _jsx(Box, { lx: { width: 's48', height: 's48', backgroundColor: 'accent' } }) }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "2000ms" })] }), _jsxs(View, { style: { alignItems: 'center', gap: 8 }, children: [_jsx(Pulse, { duration: 3000, animate: true, children: _jsx(Box, { lx: { width: 's48', height: 's48', backgroundColor: 'accent' } }) }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "3000ms" })] })] })),
-};
-export const WithAmountDisplay = {
-    render: () => {
-        return (_jsx(View, { style: { flexDirection: 'column', alignItems: 'center', gap: 16 }, children: _jsx(AmountDisplay, { formatter: usdFormatter, value: 1234.56, loading: true }) }));
-    },
-};

package/dist/src/lib/Animations/Spin/Spin.stories.d.ts

@@ -1,9 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import { Spin } from './Spin';
-declare const meta: Meta<typeof Spin>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Base: Story;
-export declare const DurationShowcase: Story;
-export declare const WithSpinner: Story;
-//# sourceMappingURL=Spin.stories.d.ts.map

package/dist/src/lib/Animations/Spin/Spin.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Spin.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Animations/Spin/Spin.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAIvE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAMC,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAmC9B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAC"}

package/dist/src/lib/Animations/Spin/Spin.stories.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { View } from 'react-native';
-import { Spinner } from '../../Components/Spinner';
-import { Box, Text } from '../../Components/Utility';
-import { Spin } from './Spin';
-const meta = {
-    title: 'Animations/Spin',
-    component: Spin,
-    parameters: {
-        layout: 'centered',
-    },
-};
-export default meta;
-export const Base = {
-    args: {
-        duration: 1000,
-        children: (_jsx(Box, { lx: { width: 's48', height: 's48', backgroundColor: 'accent' } })),
-    },
-};
-export const DurationShowcase = {
-    render: () => (_jsxs(View, { style: { flexDirection: 'row', gap: 24, alignItems: 'center' }, children: [_jsxs(View, { style: { alignItems: 'center', gap: 8 }, children: [_jsx(Spin, { duration: 500, children: _jsx(Box, { lx: { width: 's48', height: 's48', backgroundColor: 'accent' } }) }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "500ms" })] }), _jsxs(View, { style: { alignItems: 'center', gap: 8 }, children: [_jsx(Spin, { duration: 1000, children: _jsx(Box, { lx: { width: 's48', height: 's48', backgroundColor: 'accent' } }) }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "1000ms" })] }), _jsxs(View, { style: { alignItems: 'center', gap: 8 }, children: [_jsx(Spin, { duration: 2000, children: _jsx(Box, { lx: { width: 's48', height: 's48', backgroundColor: 'accent' } }) }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "2000ms" })] })] })),
-};
-export const WithSpinner = {
-    render: () => {
-        return (_jsx(View, { style: { flexDirection: 'column', alignItems: 'center', gap: 16 }, children: _jsx(Spinner, { size: 40 }) }));
-    },
-};

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

@@ -1,13 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import { AddressInput } from './AddressInput';
-declare const meta: Meta<typeof AddressInput>;
-export default meta;
-type Story = StoryObj<typeof AddressInput>;
-export declare const Base: Story;
-export declare const WithContent: Story;
-export declare const WithCustomPrefix: Story;
-export declare const WithoutQrCode: Story;
-export declare const WithError: Story;
-export declare const DisabledAddressInput: Story;
-export declare const WithHiddenClearButton: Story;
-//# sourceMappingURL=AddressInput.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"AddressInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AddressInput/AddressInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAkCnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AA6B3C,eAAO,MAAM,IAAI,EAAE,KAQlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KASzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC;AA2BF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KASlC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KASnC,CAAC"}

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

@@ -1,128 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { View } from 'react-native';
-import { AddressInput } from './AddressInput';
-const meta = {
-    component: AddressInput,
-    title: 'Input/AddressInput',
-    parameters: {
-        docs: {
-            source: {
-                language: 'tsx',
-                format: true,
-                type: 'code',
-            },
-        },
-    },
-    argTypes: {
-        placeholder: {
-            control: 'text',
-            description: 'Placeholder text when input is empty',
-        },
-        prefix: {
-            control: 'text',
-            description: 'Custom prefix text (default: "To:")',
-        },
-        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;
-const AddressInputStory = (args) => {
-    const [address, setAddress] = useState(args.value?.toString() ?? '');
-    return (_jsx(View, { style: {
-            flex: 1,
-            minHeight: 96,
-            alignItems: 'center',
-            justifyContent: 'center',
-            padding: 24,
-        }, children: _jsx(View, { style: { width: '100%', maxWidth: 400 }, children: _jsx(AddressInput, { ...args, value: address, onChangeText: setAddress, onQrCodeClick: args.onQrCodeClick ?? (() => alert('QR code scanner opened')) }) }) }));
-};
-export const Base = {
-    render: (args) => _jsx(AddressInputStory, { ...args }),
-    args: {
-        placeholder: 'Enter address or ENS',
-        prefix: 'To:',
-        editable: true,
-        hideClearButton: false,
-    },
-};
-export const WithContent = {
-    render: (args) => _jsx(AddressInputStory, { ...args }),
-    args: {
-        placeholder: 'Enter address or ENS',
-        value: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb27',
-        prefix: 'To:',
-        editable: true,
-        hideClearButton: false,
-    },
-};
-export const WithCustomPrefix = {
-    render: (args) => _jsx(AddressInputStory, { ...args }),
-    args: {
-        placeholder: 'Enter sender address',
-        prefix: 'From:',
-        editable: true,
-        hideClearButton: false,
-    },
-};
-const AddressInputWithoutQrStory = (args) => {
-    const [address, setAddress] = useState(args.value?.toString() ?? '');
-    return (_jsx(View, { style: {
-            flex: 1,
-            minHeight: 96,
-            alignItems: 'center',
-            justifyContent: 'center',
-            padding: 24,
-        }, children: _jsx(View, { style: { width: '100%', maxWidth: 400 }, children: _jsx(AddressInput, { ...args, value: address, onChangeText: setAddress, onQrCodeClick: undefined }) }) }));
-};
-export const WithoutQrCode = {
-    render: (args) => _jsx(AddressInputWithoutQrStory, { ...args }),
-    args: {
-        placeholder: 'Enter address or ENS',
-        prefix: 'To:',
-        editable: true,
-        hideClearButton: false,
-    },
-};
-export const WithError = {
-    render: (args) => _jsx(AddressInputStory, { ...args }),
-    args: {
-        placeholder: 'Enter address or ENS',
-        value: 'invalid-address',
-        errorMessage: 'Invalid address format',
-        prefix: 'To:',
-        editable: true,
-        hideClearButton: false,
-    },
-};
-export const DisabledAddressInput = {
-    render: (args) => _jsx(AddressInputStory, { ...args }),
-    args: {
-        placeholder: 'Enter address or ENS',
-        value: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb27',
-        prefix: 'To:',
-        editable: false,
-        hideClearButton: false,
-    },
-};
-export const WithHiddenClearButton = {
-    render: (args) => _jsx(AddressInputStory, { ...args }),
-    args: {
-        placeholder: 'Enter address or ENS',
-        value: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb27',
-        prefix: 'To:',
-        editable: true,
-        hideClearButton: true,
-    },
-};

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

@@ -1,10 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import { AmountDisplay } from './AmountDisplay';
-declare const meta: Meta<typeof AmountDisplay>;
-export default meta;
-type Story = StoryObj<typeof AmountDisplay>;
-export declare const Base: Story;
-export declare const WithHideButton: Story;
-export declare const AnimationShowcase: Story;
-export declare const Loading: Story;
-//# sourceMappingURL=AmountDisplay.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"AmountDisplay.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountDisplay/AmountDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAKvE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAuChD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAiDpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AAE5C,eAAO,MAAM,IAAI,EAAE,KAWlB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAqB5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAoB/B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC"}