@ledgerhq/lumen-ui-rnative 0.1.10 → 0.1.12

package/dist/module/lib/Components/ThemeProvider/ThemeProvider.test.js

@@ -1,33 +1,35 @@
 "use strict";
 
 import { describe, expect, it } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, screen } from '@testing-library/react-native';
-import { Text } from 'react-native';
+import { ChevronBigLeft, Wallet } from "../../Symbols/index.js";
+import { Button } from "../Button/index.js";
+import { Spot } from "../Spot/index.js";
+import { Tile } from "../Tile/Tile.js";
+import { Box, Text } from "../Utility/index.js";
 import { ThemeProvider } from "./ThemeProvider.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const themes = {
-  light: {
-    typographies: {
-      xs: {}
-    }
-  },
-  dark: {
-    typographies: {
-      xs: {}
-    }
-  }
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 describe('ThemeProvider', () => {
   it('renders children correctly', () => {
-    render(/*#__PURE__*/_jsx(ThemeProvider, {
-      themes: themes,
-      children: /*#__PURE__*/_jsx(Text, {
+    render(/*#__PURE__*/_jsxs(ThemeProvider, {
+      themes: ledgerLiveThemes,
+      children: [/*#__PURE__*/_jsx(Button, {
         testID: "child",
         children: "Hello World"
-      })
+      }), /*#__PURE__*/_jsx(Tile, {
+        children: "Tile"
+      }), /*#__PURE__*/_jsx(Spot, {
+        appearance: "icon",
+        icon: Wallet
+      }), /*#__PURE__*/_jsx(Box, {
+        children: /*#__PURE__*/_jsx(Text, {
+          children: "Text"
+        })
+      }), /*#__PURE__*/_jsx(ChevronBigLeft, {})]
     }));
-    expect(screen.getByTestId('child'));
-    expect(screen.getByText('Hello World'));
+    expect(screen.getByTestId('child')).toBeTruthy();
+    expect(screen.getByText('Hello World')).toBeTruthy();
   });
 });
 //# sourceMappingURL=ThemeProvider.test.js.map

package/dist/module/lib/Components/ThemeProvider/ThemeProvider.test.js.map

@@ -1 +1 @@
-{"version":3,"names":["describe","expect","it","render","screen","Text","ThemeProvider","jsx","_jsx","themes","light","typographies","xs","dark","children","testID","getByTestId","getByText"],"sourceRoot":"../../../../../src","sources":["lib/Components/ThemeProvider/ThemeProvider.test.tsx"],"mappings":";;AAAA,SAASA,QAAQ,EAAEC,MAAM,EAAEC,EAAE,QAAQ,eAAe;AACpD,SAASC,MAAM,EAAEC,MAAM,QAAQ,+BAA+B;AAC9D,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,aAAa,QAAQ,oBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEhD,MAAMC,MAAW,GAAG;EAClBC,KAAK,EAAE;IACLC,YAAY,EAAE;MACZC,EAAE,EAAE,CAAC;IACP;EACF,CAAC;EACDC,IAAI,EAAE;IACJF,YAAY,EAAE;MACZC,EAAE,EAAE,CAAC;IACP;EACF;AACF,CAAC;AAEDZ,QAAQ,CAAC,eAAe,EAAE,MAAM;EAC9BE,EAAE,CAAC,4BAA4B,EAAE,MAAM;IACrCC,MAAM,cACJK,IAAA,CAACF,aAAa;MAACG,MAAM,EAAEA,MAAO;MAAAK,QAAA,eAC5BN,IAAA,CAACH,IAAI;QAACU,MAAM,EAAC,OAAO;QAAAD,QAAA,EAAC;MAAW,CAAM;IAAC,CAC1B,CACjB,CAAC;IAEDb,MAAM,CAACG,MAAM,CAACY,WAAW,CAAC,OAAO,CAAC,CAAC;IACnCf,MAAM,CAACG,MAAM,CAACa,SAAS,CAAC,aAAa,CAAC,CAAC;EACzC,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["describe","expect","it","ledgerLiveThemes","render","screen","ChevronBigLeft","Wallet","Button","Spot","Tile","Box","Text","ThemeProvider","jsx","_jsx","jsxs","_jsxs","themes","children","testID","appearance","icon","getByTestId","toBeTruthy","getByText"],"sourceRoot":"../../../../../src","sources":["lib/Components/ThemeProvider/ThemeProvider.test.tsx"],"mappings":";;AAAA,SAASA,QAAQ,EAAEC,MAAM,EAAEC,EAAE,QAAQ,eAAe;AACpD,SAASC,gBAAgB,QAAQ,6BAA6B;AAC9D,SAASC,MAAM,EAAEC,MAAM,QAAQ,+BAA+B;AAC9D,SAASC,cAAc,EAAEC,MAAM,QAAQ,wBAAe;AACtD,SAASC,MAAM,QAAQ,oBAAW;AAClC,SAASC,IAAI,QAAQ,kBAAS;AAC9B,SAASC,IAAI,QAAQ,iBAAc;AACnC,SAASC,GAAG,EAAEC,IAAI,QAAQ,qBAAY;AACtC,SAASC,aAAa,QAAQ,oBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEhDjB,QAAQ,CAAC,eAAe,EAAE,MAAM;EAC9BE,EAAE,CAAC,4BAA4B,EAAE,MAAM;IACrCE,MAAM,cACJa,KAAA,CAACJ,aAAa;MAACK,MAAM,EAAEf,gBAAiB;MAAAgB,QAAA,gBACtCJ,IAAA,CAACP,MAAM;QAACY,MAAM,EAAC,OAAO;QAAAD,QAAA,EAAC;MAAW,CAAQ,CAAC,eAC3CJ,IAAA,CAACL,IAAI;QAAAS,QAAA,EAAC;MAAI,CAAM,CAAC,eACjBJ,IAAA,CAACN,IAAI;QAACY,UAAU,EAAC,MAAM;QAACC,IAAI,EAAEf;MAAO,CAAE,CAAC,eACxCQ,IAAA,CAACJ,GAAG;QAAAQ,QAAA,eACFJ,IAAA,CAACH,IAAI;UAAAO,QAAA,EAAC;QAAI,CAAM;MAAC,CACd,CAAC,eACNJ,IAAA,CAACT,cAAc,IAAE,CAAC;IAAA,CACL,CACjB,CAAC;IAEDL,MAAM,CAACI,MAAM,CAACkB,WAAW,CAAC,OAAO,CAAC,CAAC,CAACC,UAAU,CAAC,CAAC;IAChDvB,MAAM,CAACI,MAAM,CAACoB,SAAS,CAAC,aAAa,CAAC,CAAC,CAACD,UAAU,CAAC,CAAC;EACtD,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}

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

@@ -1,12 +1,10 @@
 "use strict";
 
-import { createSafeContext, isTextChildren } from '@ledgerhq/lumen-utils-shared';
+import { DisabledProvider, isTextChildren, useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from "../../../styles/index.js";
-import { Spot } from "../Spot/index.js";
 import { Box, Pressable, Text } from "../Utility/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const [TileProvider, useTileContext] = createSafeContext('Tile');
 const useRootStyles = ({
   appearance,
   disabled,
@@ -55,12 +53,13 @@ const useRootStyles = ({
  * Do not use it to modify the tile's core appearance (colors, padding, etc). Use the `appearance` prop instead.
  *
  * @example
- * // Basic tile with spot and content
- * import { Tile, TileSpot, TileContent, TileTitle, TileDescription } from '@ledgerhq/lumen-ui-rnative';
+ * // Basic tile with icon and content
+ * import { Tile, TileContent, TileTitle, TileDescription } from '@ledgerhq/lumen-ui-rnative';
+ * import { Spot } from '@ledgerhq/lumen-ui-rnative';
  * import { Wallet } from '@ledgerhq/lumen-ui-rnative/symbols';
  *
  * <Tile appearance="card" onPress={() => console.log('Pressed!')}>
- *   <TileSpot appearance="icon" icon={Wallet} />
+ *   <Spot appearance="icon" icon={Wallet} />
  *   <TileContent>
  *     <TileTitle>My Wallet</TileTitle>
  *     <TileDescription>Description</TileDescription>
@@ -68,29 +67,37 @@ const useRootStyles = ({
  * </Tile>
  *
  * @example
- * // With custom content and long press
- * import { Tile, TileSpot, TileContent, TileTitle, Tag } from '@ledgerhq/lumen-ui-rnative';
+ * // With trailing content (Tags)
+ * import { Tile, TileContent, TileTitle, TileTrailingContent, Tag } from '@ledgerhq/lumen-ui-rnative';
  * import { Bitcoin } from '@ledgerhq/lumen-ui-rnative/symbols';
  *
  * <Tile appearance="card" onLongPress={() => console.log('Long pressed')}>
- *   <TileSpot appearance="icon" icon={Bitcoin} />
+ *   <Spot appearance="icon" icon={Bitcoin} />
  *   <TileContent>
  *     <TileTitle>Bitcoin</TileTitle>
+ *     <TileTrailingContent>
+ *       <Tag label="Active" />
+ *     </TileTrailingContent>
  *   </TileContent>
- *   <Tag label="Active" />
  * </Tile>
  */
 export const Tile = ({
   lx = {},
   style,
   appearance = 'no-background',
-  disabled = false,
+  disabled: disabledProp = false,
   centered = false,
   children,
   ref,
   ...props
 }) => {
-  return /*#__PURE__*/_jsx(TileProvider, {
+  const disabled = useDisabledContext({
+    consumerName: 'Tile',
+    mergeWith: {
+      disabled: disabledProp
+    }
+  });
+  return /*#__PURE__*/_jsx(DisabledProvider, {
     value: {
       disabled
     },
@@ -111,7 +118,7 @@ export const Tile = ({
         pressed
       }) => /*#__PURE__*/_jsx(TilePressableContent, {
         appearance: appearance,
-        disabled: disabled,
+        disabled: !!disabled,
         pressed: pressed,
         centered: centered,
         children: children
@@ -138,31 +145,6 @@ const TilePressableContent = ({
     children: children
   });
 };
-
-/**
- * A spot adapter for use within Tile. Automatically inherits the disabled state from the parent Tile.
- *
- * @example
- * <Tile>
- *   <TileSpot appearance="icon" icon={Settings} />
- * </Tile>
- */
-export const TileSpot = ({
-  size = 48,
-  ...props
-}) => {
-  const {
-    disabled
-  } = useTileContext({
-    consumerName: 'TileSpot',
-    contextRequired: true
-  });
-  return /*#__PURE__*/_jsx(Spot, {
-    ...props,
-    size: size,
-    disabled: disabled
-  });
-};
 const useContentStyles = () => {
   return useStyleSheet(t => ({
     container: {
@@ -171,17 +153,18 @@ const useContentStyles = () => {
     }
   }), []);
 };
-TileSpot.displayName = 'TileSpot';
-
 /**
- * A container for grouping TileTitle and TileDescription with consistent spacing.
+ * A container for grouping TileTitle, TileDescription and TileTrailingContent with consistent spacing.
  * Use this to wrap text content within a Tile.
  *
  * @example
  * <Tile>
  *   <TileContent>
  *     <TileTitle>My Title</TileTitle>
- *     <TileDescription>My Description</TileDescription>
+ *     <TileDescription>Description</TileDescription>
+ *     <TileTrailingContent>
+ *       <Tag label="Active" />
+ *     </TileTrailingContent>
  *   </TileContent>
  * </Tile>
  */
@@ -226,9 +209,7 @@ export const TileTitle = ({
   lx,
   style
 }) => {
-  const {
-    disabled
-  } = useTileContext({
+  const disabled = useDisabledContext({
     consumerName: 'TileTitle',
     contextRequired: true
   });
@@ -287,9 +268,7 @@ export const TileDescription = ({
   lx,
   style
 }) => {
-  const {
-    disabled
-  } = useTileContext({
+  const disabled = useDisabledContext({
     consumerName: 'TileDescription',
     contextRequired: true
   });

package/dist/module/lib/Components/Tile/Tile.js.map

@@ -1 +1 @@
-{"version":3,"names":["createSafeContext","isTextChildren","StyleSheet","View","useStyleSheet","Spot","Box","Pressable","Text","jsx","_jsx","TileProvider","useTileContext","useRootStyles","appearance","disabled","pressed","centered","t","bgColors","colors","bg","baseTransparent","card","surface","pressedBgColors","baseTransparentPressed","surfacePressed","container","flatten","position","flexDirection","overflow","width","flex","alignItems","gap","spacings","s8","paddingHorizontal","paddingVertical","s12","borderRadius","sm","backgroundColor","justifyContent","Tile","lx","style","children","ref","props","value","accessibilityRole","accessibilityState","TilePressableContent","displayName","styles","TileSpot","size","consumerName","contextRequired","useContentStyles","sizes","full","TileContent","testID","useTitleStyles","text","typographies","body2SemiBold","textAlign","color","base","TileTitle","numberOfLines","useDescriptionStyles","body3","muted","TileDescription","useTrailingContentStyles","marginTop","s4","TileTrailingContent"],"sourceRoot":"../../../../../src","sources":["lib/Components/Tile/Tile.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["DisabledProvider","isTextChildren","useDisabledContext","StyleSheet","View","useStyleSheet","Box","Pressable","Text","jsx","_jsx","useRootStyles","appearance","disabled","pressed","centered","t","bgColors","colors","bg","baseTransparent","card","surface","pressedBgColors","baseTransparentPressed","surfacePressed","container","flatten","position","flexDirection","overflow","width","flex","alignItems","gap","spacings","s8","paddingHorizontal","paddingVertical","s12","borderRadius","sm","backgroundColor","justifyContent","Tile","lx","style","disabledProp","children","ref","props","consumerName","mergeWith","value","accessibilityRole","accessibilityState","TilePressableContent","displayName","styles","useContentStyles","sizes","full","TileContent","testID","useTitleStyles","text","typographies","body2SemiBold","textAlign","color","base","TileTitle","contextRequired","numberOfLines","useDescriptionStyles","body3","muted","TileDescription","useTrailingContentStyles","marginTop","s4","TileTrailingContent"],"sourceRoot":"../../../../../src","sources":["lib/Components/Tile/Tile.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Components/Tile/Tile.mdx

@@ -26,11 +26,11 @@ Tile components are compact, card-like interactive elements designed for horizon
 
 ## Anatomy
 
-- **TileSpot**: Visual icon or element at the top
-- **TileContent**: Container for title, description, and trailing content
+- **Tile**: Root container; direct children are laid out vertically (e.g. Spot, TileContent)
+- **TileContent**: Container for title, description and trailing content
   - **TileTitle**: The main label of the item (required)
   - **TileDescription (optional)**: Provides additional context
-  - **TileTrailingContent (optional)**: Container for trailing content like Tags, Text, etc.
+  - **TileTrailingContent (optional)**: Container for Tags, labels, or other supplementary content
 
 ## Properties
 
@@ -94,10 +94,10 @@ Install and set up the library with our [Setup Guide →](?path=/docs/getting-st
 ```tsx
 import {
   Tile,
-  TileSpot,
   TileContent,
   TileTitle,
   TileDescription,
+  Spot,
 } from '@ledgerhq/lumen-ui-rnative';
 import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
 
@@ -108,7 +108,7 @@ function MyComponent() {
       onPress={() => console.log('Primary action')}
       onLongPress={() => console.log('Secondary action')}
     >
-      <TileSpot appearance='icon' icon={Settings} />
+      <Spot appearance='icon' icon={Settings} />
       <TileContent>
         <TileTitle>Settings</TileTitle>
         <TileDescription>Manage preferences</TileDescription>
@@ -122,20 +122,22 @@ function MyComponent() {
 
 ### With Trailing Content (Tags, etc.)
 
+Use TileTrailingContent inside TileContent to wrap Tags or other supplementary content.
+
 ```tsx
 import {
   Tile,
-  TileSpot,
   TileContent,
   TileTitle,
   TileDescription,
   TileTrailingContent,
   Tag,
+  Spot,
 } from '@ledgerhq/lumen-ui-rnative';
 import { Bitcoin } from '@ledgerhq/lumen-ui-rnative/symbols';
 
 <Tile appearance='card'>
-  <TileSpot appearance='icon' icon={Bitcoin} />
+  <Spot appearance='icon' icon={Bitcoin} />
   <TileContent>
     <TileTitle>Bitcoin</TileTitle>
     <TileDescription>BTC</TileDescription>
@@ -150,7 +152,7 @@ import { Bitcoin } from '@ledgerhq/lumen-ui-rnative/symbols';
 
 ```tsx
 <Tile disabled>
-  <TileSpot appearance='icon' icon={Settings} />
+  <Spot appearance='icon' icon={Settings} />
   <TileContent>
     <TileTitle>Settings</TileTitle>
     <TileDescription>Unavailable</TileDescription>
@@ -163,13 +165,14 @@ import { Bitcoin } from '@ledgerhq/lumen-ui-rnative/symbols';
 Use the `centered` prop to vertically center the tile content. This is useful when a tile has less content than its neighbors in a grid, like a "Show more" tile that needs to align with richer tiles.
 
 ```tsx
-import { ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols';
+import { ChevronRight, CryptoBitcoinCoin } from '@ledgerhq/lumen-ui-rnative/symbols';
+import { Spot, Tile, TileContent, TileTitle, TileDescription, TileTrailingContent, Tag } from '@ledgerhq/lumen-ui-rnative';
 import { View } from 'react-native';
 
 // In a grid where other tiles have more content
 <View style={{ flexDirection: 'row', gap: 8 }}>
   <Tile appearance='card'>
-    <TileSpot appearance='coin' icon='btc' />
+    <Spot appearance='icon' icon={CryptoBitcoinCoin} />
     <TileContent>
       <TileTitle>Title</TileTitle>
       <TileDescription>Description</TileDescription>
@@ -181,7 +184,7 @@ import { View } from 'react-native';
 
   {/* Show more tile with centered content */}
   <Tile appearance='card' centered>
-    <TileSpot appearance='icon' icon={ChevronRight} />
+    <Spot appearance='icon' icon={ChevronRight} />
     <TileContent>
       <TileTitle>Show more</TileTitle>
     </TileContent>
@@ -194,14 +197,15 @@ import { View } from 'react-native';
 ```tsx
 import {
   Tile,
-  TileSpot,
   TileContent,
   TileTitle,
   TileDescription,
+  Spot,
 } from '@ledgerhq/lumen-ui-rnative';
+import { CryptoBitcoinCoin } from '@ledgerhq/lumen-ui-rnative/symbols';
 
 <Tile onPress={() => console.log('Clicked!')}>
-  <TileSpot appearance='coin' icon='btc' />
+  <Spot appearance='icon' icon={CryptoBitcoinCoin} />
   <TileContent>
     <TileTitle>Bitcoin</TileTitle>
     <TileDescription>BTC</TileDescription>
@@ -213,17 +217,21 @@ import {
 
 ```tsx
 import { ScrollView } from 'react-native';
+import { Tile, TileContent, TileTitle, TileDescription, Spot } from '@ledgerhq/lumen-ui-rnative';
 
 <ScrollView horizontal>
-  {items.map((item) => (
-    <Tile key={item.id} lx={{ width: 's128', flexShrink: 0 }}>
-      <TileSpot appearance='icon' icon={item.icon} />
-      <TileContent>
-        <TileTitle>{item.title}</TileTitle>
-        <TileDescription>{item.description}</TileDescription>
-      </TileContent>
-    </Tile>
-  ))}
+  {items.map((item) => {
+    const Icon = item.icon;
+    return (
+      <Tile key={item.id} lx={{ width: 's128', flexShrink: 0 }}>
+        <Spot appearance='icon' icon={Icon} />
+        <TileContent>
+          <TileTitle>{item.title}</TileTitle>
+          <TileDescription>{item.description}</TileDescription>
+        </TileContent>
+      </Tile>
+    );
+  })}
 </ScrollView>;
 ```
 
@@ -234,7 +242,7 @@ import { ScrollView } from 'react-native';
   onPress={() => console.log('Primary action')}
   onLongPress={() => console.log('Secondary action - show menu')}
 >
-  <TileSpot appearance='icon' icon={Settings} />
+  <Spot appearance='icon' icon={Settings} />
   <TileContent>
     <TileTitle>Settings</TileTitle>
     <TileDescription>Long press for options</TileDescription>
@@ -251,13 +259,13 @@ import { ScrollView } from 'react-native';
 <DoVsDontRow>
   <DoBlockItem
     title='Use TileTrailingContent for additional elements'
-    description='Wrap Tags, labels, or supplementary content inside TileTrailingContent within TileContent for proper 4px spacing.'
+    description='Wrap Tags, labels, or supplementary content inside TileTrailingContent within TileContent for proper spacing.'
   >
 
 ```tsx
 {/* prettier-ignore */}
 <Tile>
-  <TileSpot appearance="icon" icon={Settings} />
+  <Spot appearance="icon" icon={Settings} />
   <TileContent>
     <TileTitle>Title</TileTitle>
     <TileDescription>Description</TileDescription>
@@ -277,7 +285,7 @@ import { ScrollView } from 'react-native';
 ```tsx
 {/* prettier-ignore */}
 <Tile>
-  <TileSpot appearance="icon" icon={Settings} />
+  <Spot appearance="icon" icon={Settings} />
   <TileContent>
     <TileTitle>Title</TileTitle>
     <TileDescription>Description</TileDescription>