@ledgerhq/lumen-ui-rnative 0.1.7 → 0.1.9

package/.storybook/docs/style-system/lx.mdx

@@ -1,144 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Style System/lx" />
-
-# lx Property
-
-The `lx` prop is a type-safe styling API that provides autocomplete for design tokens directly on components.
-
-### Overview
-
-Instead of writing raw style values, `lx` constrains you to design system tokens, ensuring consistency across your app.
-
-The `lx` prop is available on utility components that already integrate it:
-- [**Box**](/?path=/docs/utility-box--docs) - Layout container (wraps `View`)
-- [**Text**](/?path=/docs/utility-text--docs) - Typography (wraps `Text`)
-- [**Pressable**](/?path=/docs/utility-pressable--docs) - Interactive container (wraps `Pressable`)
-
-```tsx
-import { Box, Text } from '@ledgerhq/lumen-ui-rnative';
-
-<Box lx={{ padding: 's16', backgroundColor: 'accent', borderRadius: 'md' }}>
-  <Text typography='body1' lx={{ color: 'onAccent' }}>Hello</Text>
-</Box>
-```
-
----
-
-### View Style Tokens
-
-These tokens are available on `Box` and `Pressable` (and the `lx` prop of `Text` for layout).
-
-#### Spacing
-
-Used for `padding`, `margin`, `gap`, and positioning (`top`, `left`, etc.):
-
-```tsx
-<Box lx={{ 
-  padding: 's16',
-  marginTop: 's8',
-  gap: 's12',
-  paddingHorizontal: 's24',
-}} />
-```
-
-#### Sizes
-
-Used for `width`, `height`, `minWidth`, `maxWidth`, `minHeight`, `maxHeight`:
-
-```tsx
-<Box lx={{ width: 's48', height: 's48', maxWidth: 's320' }} />
-```
-
-#### Background Colors
-
-```tsx
-<Box lx={{ backgroundColor: 'accent' }} />
-<Box lx={{ backgroundColor: 'surface' }} />
-<Box lx={{ backgroundColor: 'muted' }} />
-```
-
-#### Border
-
-```tsx
-<Box lx={{ 
-  borderRadius: 'md',
-  borderWidth: 's1',
-  borderColor: 'base',
-}} />
-```
-
-#### Flex Layout
-
-Standard React Native flex properties are passed through:
-
-```tsx
-<Box lx={{
-  flex: 1,
-  flexDirection: 'row',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-}} />
-```
-
----
-
-### Text Style Tokens
-
-These tokens are **only available on the `Text` component**, in addition to view tokens.
-
-#### Text Color
-
-```tsx
-<Text lx={{ color: 'base' }} />
-<Text lx={{ color: 'muted' }} />
-<Text lx={{ color: 'interactive' }} />
-<Text lx={{ color: 'onAccent' }} />
-```
-
-#### Typography
-
-Preset font size, weight, line height, and letter spacing:
-
-```tsx
-<Text typography='heading2' />
-<Text typography='body1' />
-<Text typography='body2SemiBold' />
-```
-
-#### Text Decoration
-
-```tsx
-<Text lx={{ textDecorationLine: 'underline' }} />
-<Text lx={{ textAlign: 'center' }} />
-<Text lx={{ textTransform: 'uppercase' }} />
-```
-
----
-
-### Escape Hatch
-
-For values not covered by tokens, use the `style` prop:
-
-```tsx
-<Box 
-  lx={{ padding: 's16', borderRadius: 'md' }}
-  style={{ width: 127, shadowOpacity: 0.1 }}
-/>
-```
-
-### Pressable and Pressed State
-
-For `Pressable`, the `lx` prop only accepts static objects. Use the `style` prop for pressed-state styling:
-
-```tsx
-<Pressable
-  lx={{ padding: 's16', backgroundColor: 'accent' }}
-  style={({ pressed }) => ({ opacity: pressed ? 0.8 : 1 })}
->
-  <Text>Press me</Text>
-</Pressable>
-```
-
-See [Pressable documentation](/?path=/docs/utility-pressable--docs) for more details.
-

package/.storybook/docs/style-system/styleSystem.mdx

@@ -1,54 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Style System/Style System" />
-
-# Style System
-
-Three approaches for styling, from constrained to fully customizable:
-
-- [**lx prop**](/?path=/docs/style-system-lx--docs) — Design tokens only → Layout composition, quick styling
-- [**useStyleSheet**](/?path=/docs/style-system-usestylesheet--docs) — Full customizability, built-in memoization → Complex styles, custom components
-- [**useTheme**](/?path=/docs/style-system-usetheme--docs) — Full customizability → Theme/color scheme control
-
----
-
-### lx Prop (Recommended)
-
-The `lx` prop is available on **all Design System components**.  
-It enables type-safe, design-token-only styling for rapid, consistent layout styling.
-
-```tsx
-import { Box, Text } from '@ledgerhq/lumen-ui-rnative';
-
-<Box lx={{ gap: 's16', backgroundColor: 'accent', borderRadius: 'md' }}>
-  <Text typography='body1' lx={{ color: 'onAccent' }}>Hello</Text>
-  <Button lx={{ marginTop: 's16' }}>Click me</Button>
-</Box>
-```
-
-### useStyleSheet
-
-Wrapper on top of useTheme to create theme-aware stylesheets with **built-in memoization**. Allow full customizability.
-
-```tsx
-import { useStyleSheet } from '@ledgerhq/lumen-ui-rnative/styles';
-
-const styles = useStyleSheet((theme) => ({
-  container: {
-    backgroundColor: theme.colors.bg.base,
-    padding: theme.spacings.s16,
-  },
-}), []);
-```
-
-### useTheme
-
-Direct design-tokens access from the theme object.
-
-```tsx
-import { useTheme } from '@ledgerhq/lumen-ui-rnative/styles';
-
-const { theme } = useTheme();
-```
-
----

package/.storybook/docs/style-system/useStyleSheet.mdx

@@ -1,83 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Style System/useStyleSheet" />
-
-# useStyleSheet
-
-`useStyleSheet` is a hook for creating memoized, theme-aware stylesheets in React Native.
-
-### Basic Usage
-
-```tsx
-import { useStyleSheet } from '@ledgerhq/lumen-ui-rnative/styles';
-import { View, Text } from 'react-native';
-
-const MyComponent = () => {
-  const styles = useStyleSheet((theme) => ({
-    container: {
-      backgroundColor: theme.colors.bg.base,
-      padding: theme.spacings.s16,
-      borderRadius: theme.borderRadius.md,
-    },
-    text: {
-      ...theme.typographies.body1,
-      color: theme.colors.text.base,
-    },
-  }), []);
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.text}>Hello World</Text>
-    </View>
-  );
-};
-```
-
-### Memoization
-
-Styles are memoized based on the dependency array (second argument). Re-renders only create new styles when dependencies change:
-
-```tsx
-const styles = useStyleSheet(
-  (theme) => ({
-    container: {
-      backgroundColor: isActive ? theme.colors.bg.accent : theme.colors.bg.base,
-      padding: theme.spacings.s16,
-    },
-  }),
-  [isActive] // Only recreate when isActive changes
-);
-```
-
-### Pressed State Pattern
-
-For Pressable components, pass `pressed` state to `useStyleSheet`:
-
-```tsx
-import { useStyleSheet } from '@ledgerhq/lumen-ui-rnative/styles';
-import { Pressable } from '@ledgerhq/lumen-ui-rnative';
-
-const InteractiveCard = () => {
-  return (
-    <Pressable lx={{ borderRadius: 'md' }}>
-      {({ pressed }) => <CardContent pressed={pressed} />}
-    </Pressable>
-  );
-};
-
-const CardContent = ({ pressed }: { pressed: boolean }) => {
-  const styles = useStyleSheet(
-    (theme) => ({
-      container: {
-        backgroundColor: pressed 
-          ? theme.colors.bg.accentPressed 
-          : theme.colors.bg.accent,
-        padding: theme.spacings.s16,
-      },
-    }),
-    [pressed]
-  );
-
-  return <View style={styles.container}>...</View>;
-};
-```

package/.storybook/docs/style-system/useTheme.mdx

@@ -1,26 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Style System/useTheme" />
-
-# useTheme
-
-The `useTheme` hook provides access to the current theme and color scheme controls.
-
-### Basic Usage
-
-```tsx
-import { useTheme } from '@ledgerhq/lumen-ui-rnative/styles';
-
-const MyComponent = () => {
-  const { theme, colorScheme } = useTheme();
-
-  return (
-    <View style={{ backgroundColor: theme.colors.bg.base }}>
-      <Text style={{ color: theme.colors.text.base }}>
-        Current mode: {colorScheme}
-      </Text>
-    </View>
-  );
-};
-```
-

package/.storybook/font.css

@@ -1 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;800&display=swap');

package/.storybook/main.ts

@@ -1,50 +0,0 @@
-import { dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
-import type { StorybookConfig } from '@storybook/react-native-web-vite';
-import { mergeConfig } from 'vite';
-
-const config: StorybookConfig = {
-  stories: [
-    '../src/lib/**/*.mdx',
-    '../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)',
-    './docs/**/*.@(mdx)',
-  ],
-  addons: [
-    getAbsolutePath('@storybook/addon-themes'),
-    getAbsolutePath('@storybook/addon-docs'),
-  ],
-  framework: {
-    name: getAbsolutePath('@storybook/react-native-web-vite'),
-    options: {},
-  },
-  typescript: {
-    reactDocgen: 'react-docgen-typescript',
-  },
-
-  viteFinal: async (config) => {
-    config.resolve = config.resolve || {};
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      'react-native': 'react-native-web',
-      'react-native-svg': 'react-native-svg-web',
-      '@sbaiahmed1/react-native-blur': fileURLToPath(
-        new URL('./mocks/blur.tsx', import.meta.url),
-      ),
-    };
-
-    return mergeConfig(config, {
-      plugins: [nxViteTsPaths()],
-    });
-  },
-
-  core: {
-    disableTelemetry: true,
-  },
-};
-
-export default config;
-
-function getAbsolutePath(value: string): any {
-  return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
-}

package/.storybook/manager.ts

@@ -1,6 +0,0 @@
-import { addons } from 'storybook/manager-api';
-import theme from './theme';
-
-addons.setConfig({
-  theme,
-});

package/.storybook/mocks/blur.tsx

@@ -1,21 +0,0 @@
-import { View, ViewProps } from 'react-native';
-
-/**
- * Mock BlurView for web/storybook
- * @sbaiahmed1/react-native-blur doesn't work on web, so we use a simple View
- */
-export const BlurView = (
-  props: ViewProps & {
-    blurAmount?: number;
-    blurType?: string;
-    overlayColor?: string;
-  },
-) => {
-  const {
-    blurAmount: _blurAmount,
-    blurType: _blurType,
-    overlayColor: _overlayColor,
-    ...restProps
-  } = props;
-  return <View {...restProps} />;
-};

package/.storybook/preview-head.html

@@ -1,27 +0,0 @@
-<style>
-  body {
-    background-color: #ffffff;
-  }
-
-  .dark body {
-    background-color: #191919;
-  }
-
-  .sbdocs-preview {
-    background-color: #ffffff;
-  }
-
-  .dark .sbdocs-preview {
-    background-color: #000;
-  }
-
-  .sbdocs-a {
-    color: rgb(126, 78, 165) !important;
-    text-decoration: underline !important;
-    cursor: pointer;
-  }
-
-  .sbdocs-a:hover {
-    text-decoration: underline;
-  }
-</style>

package/.storybook/preview.tsx

@@ -1,93 +0,0 @@
-import type { Preview } from '@storybook/react-native-web-vite';
-
-import {
-  withBrandDecorator,
-  withModeDecorator,
-  withProvidersDecorator,
-  withProvidersDocsContainer,
-} from './Decorator';
-import './font.css';
-
-const preview: Preview = {
-  globalTypes: {
-    brand: {
-      name: 'Brand',
-      description: 'Global brand theme for components',
-      defaultValue: 'ledger-live',
-      toolbar: {
-        icon: 'paintbrush',
-        title: 'Brand',
-        items: ['ledger-live', 'enterprise', 'websites'],
-
-        dynamicTitle: true,
-      },
-    },
-    mode: {
-      name: 'Mode',
-      description: 'Color scheme for components',
-      defaultValue: 'light',
-      toolbar: {
-        icon: 'sun',
-        title: 'Mode',
-        items: ['light', 'dark'],
-        dynamicTitle: true,
-      },
-    },
-  },
-
-  parameters: {
-    backgrounds: {
-      options: {
-        dark: { name: 'Dark', value: '#191919' },
-        light: { name: 'Light', value: '#fafafa' },
-      },
-    },
-    initialGlobals: {
-      backgrounds: { value: 'light' },
-    },
-
-    options: {
-      storySort: {
-        order: [
-          'Getting Started',
-          ['Setup', 'Changelog'],
-          'Style System',
-          ['Style System', 'useTheme', 'useStyleSheet', 'lx'],
-          'Symbols',
-          'Action',
-          [
-            'Button',
-            'CardButton',
-            'IconButton',
-            'TileButton',
-            'Link',
-            'InteractiveIcon',
-          ],
-          'Communication',
-          'Containment',
-          'Selection',
-          'Input',
-          'Layout',
-          'Navigation',
-          'Utility',
-          'Animations',
-        ],
-      },
-    },
-    tags: ['autodocs'],
-    docs: {
-      container: withProvidersDocsContainer,
-    },
-    actions: { argTypesRegex: '^on[A-Z].*' },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
-    },
-  },
-
-  decorators: [withBrandDecorator, withModeDecorator, withProvidersDecorator],
-};
-
-export default preview;

package/.storybook/theme.ts

@@ -1,22 +0,0 @@
-import { ThemeVars } from 'storybook/theming';
-import { create } from 'storybook/theming/create';
-import logoUrl from './docs/lumen.svg';
-
-const theme: ThemeVars = create({
-  base: 'light',
-  brandTarget: '_self',
-  brandImage: logoUrl,
-  appBg: '#fafafa',
-  appContentBg: '#ffffff',
-  appBorderRadius: 8,
-
-  textColor: '#1a1a1a',
-  textInverseColor: '#ffffff',
-
-  colorPrimary: '#2563eb',
-  colorSecondary: '#7e4ea5',
-  barBg: '#f8fafc',
-  barHoverColor: '#d4a0ff',
-});
-
-export default theme;

package/.test.env

@@ -1 +0,0 @@
-NODE_OPTIONS='--no-experimental-detect-module'

package/ai-rules/README.md

@@ -1,98 +0,0 @@
-# Lumen AI Rules for Consumers
-
-AI assistant rules to help you use `@ledgerhq/lumen-ui-rnative` correctly in your projects.
-
-## What These Rules Do
-
-These rules help AI assistants:
-
-✅ **Correct imports** - Suggest proper import paths (e.g., `/symbols` for icons)  
-✅ **Design tokens** - Use Lumen tokens via the `lx` style system  
-✅ **Component catalog** - Know which React Native components are available  
-✅ **Style system** - Use the `lx` prop with type-safe design tokens  
-✅ **Dark mode** - Understand automatic theme support
-
-## Usage by AI Tool
-
-### Cursor
-
-Add to your project's `.cursorrules` file:
-
-```
-@node_modules/@ledgerhq/lumen-ui-rnative/ai-rules/RULES.md
-```
-
-Or create `.cursor/rules/lumen-rnative.mdc`:
-
-```markdown
----
-description: Lumen UI React Native design system rules
-globs:
-alwaysApply: true
----
-
-@node_modules/@ledgerhq/lumen-ui-rnative/ai-rules/RULES.md
-```
-
-### Claude / Claude Code
-
-Reference the rules file in your conversation:
-
-```
-Use the design system rules from: node_modules/@ledgerhq/lumen-ui-rnative/ai-rules/RULES.md
-```
-
-Or copy the content from `node_modules/@ledgerhq/lumen-ui-rnative/ai-rules/RULES.md` into your custom instructions.
-
-### VS Code / GitHub Copilot
-
-Add to your workspace settings (`.vscode/settings.json`):
-
-```json
-{
-  "github.copilot.advanced": {
-    "contextFiles": ["node_modules/@ledgerhq/lumen-ui-rnative/ai-rules/RULES.md"]
-  }
-}
-```
-
-### WebStorm / JetBrains AI
-
-Add the file `node_modules/@ledgerhq/lumen-ui-rnative/ai-rules/RULES.md` to your AI Assistant settings under "Additional Context".
-
-### Manual Setup
-
-Copy the rules from `node_modules/@ledgerhq/lumen-ui-rnative/ai-rules/RULES.md` into your preferred AI assistant's configuration.
-
-## Example Results
-
-With these rules, AI assistants will suggest:
-
-```tsx
-// ❌ Without rules
-import { ArrowRight } from '@ledgerhq/lumen-ui-rnative';
-<View style={{ backgroundColor: '#f5f5f5', padding: 16 }}>
-  <Text style={{ color: '#666', fontWeight: 'bold' }}>Text</Text>
-</View>;
-
-// ✅ With rules
-import { ArrowRight } from '@ledgerhq/lumen-ui-rnative/symbols';
-<Box lx={{ backgroundColor: 'muted', padding: 16 }}>
-  <Text lx={{ color: 'muted', fontSize: 'heading-3' }}>Text</Text>
-</Box>;
-```
-
-## Auto-Sync Benefits
-
-By referencing the file from node_modules instead of copying:
-
-- ✅ Always get the latest rules when you update the package
-- ✅ No manual copy/paste needed
-- ✅ Consistent across your team
-- ✅ Rules are version-locked with your package version
-
-## Learn More
-
-- [Lumen Documentation](https://ldls.vercel.app)
-- [Package README](../README.md)
-- [Main Repository](https://github.com/LedgerHQ/lumen)