@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

package/src/lib/Components/Box/index.ts

@@ -1,2 +0,0 @@
-export * from './Box';
-export type { BoxProps } from './Box';

package/src/lib/Components/Search/Search.stories.tsx

@@ -1,38 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import { Banner } from '../Banner';
-import { Search } from './Search';
-
-const meta: Meta<typeof Search> = {
-  component: Search,
-  title: 'Input/Search',
-  parameters: {
-    docs: {
-      source: {
-        language: 'tsx',
-        format: true,
-        type: 'code',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Search>;
-
-export const WebPreviewWarning: Story = {
-  render: () => (
-    <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.',
-      },
-    },
-  },
-};

package/src/lib/Components/Search/Search.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { TextInput } from 'react-native';
-import { Search as SearchIcon } from '../../Symbols';
-import { BaseInput, type BaseInputProps } from '../BaseInput';
-import { InteractiveIcon } from '../InteractiveIcon';
-
-export type SearchProps = Omit<BaseInputProps, 'prefix' | 'label'>;
-
-export const Search = React.forwardRef<
-  React.ElementRef<typeof TextInput>,
-  SearchProps
->((props, ref) => {
-  return (
-    <BaseInput
-      ref={ref}
-      prefix={
-        <InteractiveIcon iconType='filled' disabled>
-          <SearchIcon size={20} accessible={false} />
-        </InteractiveIcon>
-      }
-      style={{ fontSize: 16, fontWeight: '500' }}
-      {...props}
-    />
-  );
-});
-
-Search.displayName = 'Search';

package/src/lib/Components/Search/index.ts

@@ -1 +0,0 @@
-export * from './Search';

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

@@ -1,94 +0,0 @@
-import React from 'react';
-import { ViewProps } from 'react-native';
-import { IconSize } from '../Icon';
-
-export type SpotAppearance =
-  | 'icon'
-  | 'bluetooth'
-  | 'check'
-  | 'error'
-  | 'warning'
-  | 'info'
-  | 'loader'
-  | 'number';
-
-/**
- * A discriminated union that enforces type-safe props based on the `appearance`.
- */
-type IconSpotProps = {
-  /**
-   * Displays a custom icon with neutral base styling.
-   *
-   * **Use case**: When you need to show a custom icon that isn't available in the predefined appearances.
-   * **Style**: Default text color with transparent background.
-   * **Required prop**: `icon` - Must provide an icon component.
-   *
-   * @example <Spot appearance="icon" icon={SettingsIcon} />
-   */
-  appearance: 'icon';
-  /**
-   * A React component to be rendered as the icon. Required when appearance is 'icon'.
-   */
-  icon: React.ComponentType<{ size?: IconSize; className?: string }>;
-};
-type NumberSpotProps = {
-  /**
-   * Displays a single digit (0-9) with number styling.
-   *
-   * **Use case**: Step indicators, counters, or numbered badges.
-   * **Style**: Heading-4 typography with base text color.
-   * **Required prop**: `number` - Must be a digit from 0 to 9.
-   *
-   * @example <Spot appearance="number" number={5} />
-   */
-  appearance: 'number';
-  /**
-   * A single digit from 0 to 9 to display. Required when appearance is 'number'.
-   */
-  number: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
-};
-
-type StatusSpotProps = {
-  /**
-   * Self-contained predefined status indicators with semantic styling.
-   *
-   * **Available options**:
-   * - `'bluetooth'` - Bluetooth connection status (blue color)
-   * - `'check'` - Success/completion state (green color)
-   * - `'error'` - Error/failure state (red color)
-   * - `'warning'` - Warning/caution state (yellow color)
-   * - `'info'` - Informational state (muted color)
-   * - `'loader'` - Loading/processing state (no color)
-   *
-   * **Use case**: Status indicators, feedback states, loading states.
-   * **Style**: Each has semantic colors and predefined icons.
-   * **Props**: No additional props required - fully self-contained.
-   *
-   * @example
-   * <Spot appearance="check" />    // Success checkmark
-   * <Spot appearance="error" />    // Error X icon
-   * <Spot appearance="loader" />   // Loading spinner
-   */
-  appearance: Exclude<SpotAppearance, 'icon' | 'number'>;
-};
-
-type DiscriminatedSpotProps = IconSpotProps | NumberSpotProps | StatusSpotProps;
-export type SpotSize = 48 | 56 | 72;
-
-export type SpotProps = DiscriminatedSpotProps &
-  ViewProps & {
-    /**
-     * Whether the spot is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * The size of the spot.
-     * @default 48
-     */
-    size?: SpotSize;
-    /**
-     * Additional CSS classes for styling.
-     */
-    className?: string;
-  };

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

@@ -1,29 +0,0 @@
-import { ComponentType } from 'react';
-import { ViewProps } from 'react-native';
-import { IconSize } from '../Icon';
-
-export type TagProps = {
-  /**
-   * The appearance of the tag.
-   */
-  appearance?:
-    | 'base'
-    | 'gray'
-    | 'accent'
-    | 'success'
-    | 'error'
-    | 'warning'
-    | 'disabled';
-  /**
-   * The icon of the tag.
-   */
-  icon?: ComponentType<{ size?: IconSize; className?: string }>;
-  /**
-   * The label of the tag.
-   */
-  label: string;
-  /**
-   * The size of the tag.
-   */
-  size?: 'sm' | 'lg';
-} & ViewProps;

package/src/lib/Components/Text/index.ts

@@ -1,2 +0,0 @@
-export * from './Text';
-export type { TextProps } from './Text';

package/src/lib/Components/_ToRemove/ToRemove.tsx

@@ -1,65 +0,0 @@
-import { Text, View } from 'react-native';
-import { LumenStyleSheet } from '../../../styles/LumenStyleSheet';
-import { LumenStyleSheetTheme } from '../../../styles/types';
-
-type Variant = 'primary' | 'secondary' | 'error';
-
-const useToRemoveStyles = (variant: Variant) => {
-  return LumenStyleSheet.useCreate((theme: LumenStyleSheetTheme) => {
-    const bgColorMap: Record<Variant, string> = {
-      primary: theme.colors.bg.accent,
-      secondary: theme.colors.bg.surface,
-      error: theme.colors.bg.error,
-    };
-
-    const textColorMap: Record<Variant, string> = {
-      primary: theme.colors.text.onAccent,
-      secondary: theme.colors.text.base,
-      error: theme.colors.text.error,
-    };
-
-    return {
-      container: {
-        backgroundColor: bgColorMap[variant],
-        padding: theme.spacings.s16,
-        borderRadius: theme.borderRadius.md,
-        gap: theme.spacings.s8,
-        boxShadow: theme.shadows.xl,
-        shadowColor: theme.colors.border.error,
-        elevation: 4,
-        width: 200,
-        minHeight: 80,
-      },
-      title: {
-        color: textColorMap[variant],
-        ...theme.typographies.body1SemiBold,
-      },
-      description: {
-        color: textColorMap[variant],
-        ...theme.typographies.body2,
-        opacity: 0.8,
-      },
-    };
-  });
-};
-
-type ToRemoveProps = {
-  variant?: Variant;
-  title?: string;
-  description?: string;
-};
-
-export const ToRemove = ({
-  variant = 'primary',
-  title = 'Card Title',
-  description = 'Description text',
-}: ToRemoveProps) => {
-  const styles = useToRemoveStyles(variant);
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>{title}</Text>
-      <Text style={styles.description}>{description}</Text>
-    </View>
-  );
-};

package/src/lib/utils/cn.ts

@@ -1,6 +0,0 @@
-import { ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}

package/src/styles/LumenStyleSheet.ts

@@ -1,25 +0,0 @@
-import { StyleSheet as NativeStyleSheet } from 'react-native';
-import type { StyleSheet as NativeStyleSheetType } from 'react-native';
-
-import { useCreate } from './create/useCreate';
-import { useTheme } from './Provider/useTheme';
-
-export type LumenStyleSheetType = {
-  absoluteFillObject: typeof NativeStyleSheetType.absoluteFillObject;
-  absoluteFill: typeof NativeStyleSheetType.absoluteFill;
-  compose: typeof NativeStyleSheetType.compose;
-  flatten: typeof NativeStyleSheetType.flatten;
-  useCreate: typeof useCreate;
-  useTheme: typeof useTheme;
-};
-
-class HybridLumenStyleSheet {
-  absoluteFillObject = NativeStyleSheet.absoluteFillObject;
-  absoluteFill = NativeStyleSheet.absoluteFill;
-  flatten = NativeStyleSheet.flatten;
-  compose = NativeStyleSheet.compose;
-  useCreate = useCreate;
-  useTheme = useTheme;
-}
-
-export const LumenStyleSheet = new HybridLumenStyleSheet();

package/src/styles/create/create.test.ts

@@ -1,261 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { ledgerLiveCoreTokens } from '@ledgerhq/lumen-design-core';
-import { create } from './create';
-
-// Custom theme for testing - simpler structure than full LumenStyleSheetTheme
-
-const customTheme = {
-  colors: {
-    bg: '#FFFFFF',
-    bgMuted: '#F5F5F5',
-    bgAccent: '#007AFF',
-    text: '#000000',
-    textMuted: '#666666',
-    border: '#E0E0E0',
-  },
-  shadows: {
-    sm: ledgerLiveCoreTokens.shadows.sm,
-  },
-  spacings: {
-    s8: 8,
-    s16: 16,
-    s24: 24,
-  },
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-} as any;
-
-describe('create', () => {
-  describe('Direct stylesheet objects', () => {
-    it('should handle static style objects', () => {
-      const styles = create(customTheme, {
-        container: {
-          flex: 1,
-          justifyContent: 'center',
-          alignItems: 'center',
-        },
-      });
-
-      expect(styles).toEqual({
-        container: {
-          flex: 1,
-          justifyContent: 'center',
-          alignItems: 'center',
-        },
-      });
-    });
-
-    it('should handle dynamic style functions in plain object', () => {
-      const styles = create(customTheme, {
-        container: (align: 'center' | 'flex-start') => ({
-          flex: 1,
-          justifyContent: 'center',
-          alignItems: align ? 'center' : 'flex-start',
-        }),
-      });
-
-      expect(styles.container('center')).toEqual({
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-      });
-    });
-  });
-
-  describe('stylesheet with theme object', () => {
-    it('should handle static style objects', () => {
-      const styles = create(customTheme, () => ({
-        container: {
-          flex: 1,
-          justifyContent: 'center',
-          alignItems: 'center',
-        },
-      }));
-
-      expect(styles).toEqual({
-        container: {
-          flex: 1,
-          justifyContent: 'center',
-          alignItems: 'center',
-        },
-      });
-    });
-
-    it('should handle theme-based static styles', () => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const styles = create(customTheme, (theme: any) => ({
-        container: {
-          backgroundColor: theme.colors.bg,
-          flex: 1,
-          justifyContent: 'center',
-          alignItems: 'center',
-        },
-      }));
-
-      expect(styles).toEqual({
-        container: {
-          backgroundColor: customTheme.colors.bg,
-          flex: 1,
-          justifyContent: 'center',
-          alignItems: 'center',
-        },
-      });
-    });
-
-    it('should handle box shadow styles', () => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const styles = create(customTheme, (theme: any) => ({
-        container: {
-          boxShadow: theme.shadows.sm,
-        },
-      }));
-
-      expect(styles).toEqual({
-        container: {
-          boxShadow: customTheme.shadows.sm,
-        },
-      });
-    });
-
-    it('should handle multiple static style objects', () => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const styles = create(customTheme, (theme: any) => ({
-        container: {
-          backgroundColor: theme.colors.bg,
-          flex: 1,
-        },
-        textContainer: {
-          flex: 1,
-          marginTop: theme.spacings.s16,
-        },
-        button: {
-          backgroundColor: theme.colors.bgAccent,
-          padding: theme.spacings.s8,
-        },
-      }));
-
-      expect(styles).toEqual({
-        container: {
-          backgroundColor: customTheme.colors.bg,
-          flex: 1,
-        },
-        textContainer: {
-          flex: 1,
-          marginTop: customTheme.spacings.s16,
-        },
-        button: {
-          backgroundColor: customTheme.colors.bgAccent,
-          padding: customTheme.spacings.s8,
-        },
-      });
-    });
-  });
-
-  describe('Dynamic function styles', () => {
-    it('should handle dynamic function with single parameter', () => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const styles = create(customTheme, (theme: any) => ({
-        container: (maxWidth: number) => ({
-          backgroundColor: theme.colors.bg,
-          flex: 1,
-          justifyContent: 'center',
-          alignItems: 'center',
-          maxWidth,
-        }),
-      }));
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      expect((styles.container as any)(100)).toEqual({
-        backgroundColor: customTheme.colors.bg,
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        maxWidth: 100,
-      });
-    });
-
-    it('should handle dynamic function with multiple parameters', () => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const styles = create(customTheme, (theme: any) => ({
-        container: (maxWidth: number, isOdd: boolean) => ({
-          backgroundColor: theme.colors.bg,
-          flex: 1,
-          justifyContent: 'center',
-          alignItems: 'center',
-          maxWidth,
-          borderBottomWidth: isOdd ? 1 : undefined,
-        }),
-      }));
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      expect((styles.container as any)(100, true)).toEqual({
-        backgroundColor: customTheme.colors.bg,
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        maxWidth: 100,
-        borderBottomWidth: 1,
-      });
-    });
-
-    it('should handle dynamic function with conditional styling', () => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const styles = create(customTheme, (theme: any) => ({
-        container: (variant: 'primary' | 'secondary') => ({
-          backgroundColor:
-            variant === 'primary'
-              ? theme.colors.bgAccent
-              : theme.colors.bgMuted,
-          flex: variant === 'primary' ? 1 : 2,
-        }),
-      }));
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      expect((styles.container as any)('primary')).toEqual({
-        backgroundColor: customTheme.colors.bgAccent,
-        flex: 1,
-      });
-    });
-
-    it('should handle mix of static and dynamic styles', () => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const styles = create(customTheme, (theme: any) => ({
-        textContainer: {
-          flex: 1,
-          marginTop: theme.spacings.s16,
-        },
-        container: (maxWidth: number, isOdd: boolean) => ({
-          backgroundColor: theme.colors.bg,
-          flex: 1,
-          justifyContent: 'center',
-          alignItems: 'center',
-          maxWidth,
-          borderBottomWidth: isOdd ? 1 : undefined,
-        }),
-        staticBox: {
-          padding: theme.spacings.s24,
-          backgroundColor: theme.colors.bgAccent,
-        },
-      }));
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      expect((styles.container as any)(100, true)).toEqual({
-        backgroundColor: customTheme.colors.bg,
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        maxWidth: 100,
-        borderBottomWidth: 1,
-      });
-
-      expect(styles.textContainer).toEqual({
-        flex: 1,
-        marginTop: customTheme.spacings.s16,
-      });
-
-      expect(styles.staticBox).toEqual({
-        padding: customTheme.spacings.s24,
-        backgroundColor: customTheme.colors.bgAccent,
-      });
-    });
-  });
-});

package/src/styles/create/create.ts

@@ -1,18 +0,0 @@
-import { LumenStyleSheetTheme } from '../types';
-import type {
-  LumenStyleSheet,
-  LumenStyleSheetExtended,
-} from '../types/create.types';
-
-export const create = <S extends LumenStyleSheet>(
-  theme: LumenStyleSheetTheme,
-  stylesheet: LumenStyleSheetExtended<S>,
-): S => {
-  // If stylesheet is a function, call it with the theme to get the stylesheet object
-  if (typeof stylesheet === 'function') {
-    return stylesheet(theme);
-  }
-
-  // Otherwise, return the stylesheet as-is
-  return stylesheet;
-};

package/src/styles/create/useCreate.ts

@@ -1,14 +0,0 @@
-import { useMemo } from 'react';
-import { useTheme } from '../Provider/useTheme';
-import type { LumenStyleSheet, LumenStyleSheetExtended } from '../types';
-import { create } from './create';
-
-export const useCreate = <S extends LumenStyleSheet>(
-  styleCreator: LumenStyleSheetExtended<S>,
-): S => {
-  const { theme } = useTheme();
-
-  return useMemo(() => {
-    return create(theme, styleCreator);
-  }, [theme, styleCreator]);
-};

package/src/styles/factories/createStyledText.tsx

@@ -1,76 +0,0 @@
-import React, { forwardRef, memo, MemoExoticComponent } from 'react';
-import type { Text, TextProps, TextStyle } from 'react-native';
-import { useTheme } from '../Provider/useTheme';
-import {
-  resolveTextStyle,
-  extractLumenTextStyleProps,
-} from '../resolveStyle/resolveStyle';
-import type { LumenTextProps } from '../types';
-
-type TextRef = React.ElementRef<typeof Text>;
-type ReturnComponentType = MemoExoticComponent<
-  React.ForwardRefExoticComponent<
-    React.PropsWithoutRef<LumenTextProps> & React.RefAttributes<TextRef>
-  >
->;
-
-/**
- * Factory function to create a styled Text component.
- *
- * Creates a component that accepts token-constrained style props directly,
- * plus a `typo` prop for typography presets, resolving them to actual
- * values at runtime using the current theme.
- *
- * @param Component - The base Text-like component to wrap
- *
- * @example
- * ```tsx
- * import { Text } from 'react-native';
- * import { createStyledText } from '@ledgerhq/lumen-ui-rnative/styles';
- *
- * // Create a basic Text
- * const StyledText = createStyledText(Text);
- *
- * // Usage - token props and typo are resolved
- * <StyledText typo='body1'>Hello World</StyledText>
- * <StyledText typo='heading2SemiBold' marginTop='s8' color='muted'>
- *   Subtitle
- * </StyledText>
- *
- * // style prop for escape hatch
- * <StyledText typo='body1' style={{ letterSpacing: 2 }} />
- * ```
- */
-export const createStyledText = (
-  Component: React.ComponentType<LumenTextProps>,
-): ReturnComponentType => {
-  const StyledComponent = memo(
-    forwardRef<TextRef, LumenTextProps>((props, ref) => {
-      const { theme } = useTheme();
-      const { lumenStyle, rest } = extractLumenTextStyleProps(props);
-      const resolvedStyle = resolveTextStyle(theme, lumenStyle);
-
-      const { style: propsStyle, ...componentProps } = rest;
-      const finalStyle = propsStyle
-        ? ([resolvedStyle, propsStyle] as TextStyle[])
-        : resolvedStyle;
-
-      return (
-        <Component
-          {...({ ...componentProps, ref, style: finalStyle } as TextProps & {
-            ref: React.Ref<Text>;
-          })}
-        />
-      );
-    }),
-  );
-
-  // Set display name for debugging
-  const componentName =
-    (Component as { displayName?: string }).displayName ||
-    (Component as { name?: string }).name ||
-    'Component';
-  StyledComponent.displayName = `StyledText(${componentName})`;
-
-  return StyledComponent;
-};