@ledgerhq/lumen-ui-rnative 0.0.50 → 0.0.51

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

@@ -101,7 +101,7 @@ These tokens are **only available on the `Text` component**, in addition to view
 Preset font size, weight, line height, and letter spacing:
 
 ```tsx
-<Text typography='heading1' />
+<Text typography='heading2' />
 <Text typography='body1' />
 <Text typography='body2SemiBold' />
 ```

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.49",
+  "version": "0.0.50",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",

package/dist/src/lib/Components/BottomSheet/BottomSheetHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetHeader.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/BottomSheetHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAe,MAAM,OAAO,CAAC;AAQxC,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AA6EjD,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA0ExD,CAAC"}
+{"version":3,"file":"BottomSheetHeader.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/BottomSheetHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAe,MAAM,OAAO,CAAC;AAQxC,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AA+EjD,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA0ExD,CAAC"}

package/dist/src/lib/Components/BottomSheet/BottomSheetHeader.js

@@ -42,17 +42,19 @@ const useStyles = ({ appearance, spacing, hidden, }) => {
             },
             appearance === 'expanded' && {
                 gap: t.spacings.s4,
+                flex: 0,
             },
         ]),
         title: StyleSheet.flatten([
-            appearance === 'compact'
-                ? t.typographies.heading4SemiBold
-                : t.typographies.heading2SemiBold,
             {
                 color: t.colors.text.base,
             },
+            appearance === 'expanded' && {
+                ...t.typographies.heading3SemiBold,
+            },
             appearance === 'compact' && {
                 textAlign: 'center',
+                ...t.typographies.heading5SemiBold,
             },
         ]),
         description: StyleSheet.flatten([

package/dist/src/lib/Components/BottomSheet/useBottomSheetRef.d.ts

@@ -1,2 +1,3 @@
 export declare const useBottomSheetRef: () => import("react").RefObject<import("@gorhom/bottom-sheet/lib/typescript/types").BottomSheetMethods>;
+export { useBottomSheet } from '@gorhom/bottom-sheet';
 //# sourceMappingURL=useBottomSheetRef.d.ts.map

package/dist/src/lib/Components/BottomSheet/useBottomSheetRef.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBottomSheetRef.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/useBottomSheetRef.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,yGAI7B,CAAC"}
+{"version":3,"file":"useBottomSheetRef.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/useBottomSheetRef.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,yGAI7B,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/src/lib/Components/BottomSheet/useBottomSheetRef.js

@@ -3,3 +3,4 @@ export const useBottomSheetRef = () => {
     const bottomSheetRef = useRef(null);
     return bottomSheetRef;
 };
+export { useBottomSheet } from '@gorhom/bottom-sheet';

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

@@ -68,5 +68,5 @@ export const AllStates = {
         }, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Box, { style: {
                     flexDirection: 'row',
                     gap: 48,
-                }, children: [_jsxs(Box, { style: { gap: 16 }, children: [_jsx(Text, { typography: 'heading4', children: "Enabled" }), _jsxs(Box, { style: { gap: 8 }, children: [_jsx(Checkbox, { label: 'Unchecked', accessibilityLabel: 'Unchecked', defaultChecked: false }), _jsx(Checkbox, { label: 'Checked', defaultChecked: true })] })] }), _jsxs(Box, { style: { gap: 16 }, children: [_jsx(Text, { typography: 'heading4', children: "Disabled" }), _jsxs(Box, { style: { gap: 8 }, children: [_jsx(Checkbox, { label: 'Unchecked', disabled: true, defaultChecked: false }), _jsx(Checkbox, { label: 'Checked', disabled: true, defaultChecked: true })] })] })] }) }) })),
+                }, children: [_jsxs(Box, { style: { gap: 16 }, children: [_jsx(Text, { typography: 'heading5', children: "Enabled" }), _jsxs(Box, { style: { gap: 8 }, children: [_jsx(Checkbox, { label: 'Unchecked', accessibilityLabel: 'Unchecked', defaultChecked: false }), _jsx(Checkbox, { label: 'Checked', defaultChecked: true })] })] }), _jsxs(Box, { style: { gap: 16 }, children: [_jsx(Text, { typography: 'heading5', children: "Disabled" }), _jsxs(Box, { style: { gap: 8 }, children: [_jsx(Checkbox, { label: 'Unchecked', disabled: true, defaultChecked: false }), _jsx(Checkbox, { label: 'Checked', disabled: true, defaultChecked: true })] })] })] }) }) })),
 };

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

@@ -87,7 +87,7 @@ export const Icon = {
 export const IconSizes = {
     render: () => {
         const { theme } = useTheme();
-        return (_jsx(Box, { lx: { flexDirection: 'column', gap: 's16' }, children: sizes.map((size) => (_jsxs(Box, { lx: { flexDirection: 'column' }, children: [_jsxs(Text, { typography: 'heading3', lx: { marginBottom: 's16' }, children: ["Size ", size, "px"] }), _jsx(Box, { lx: {
+        return (_jsx(Box, { lx: { flexDirection: 'column', gap: 's16' }, children: sizes.map((size) => (_jsxs(Box, { lx: { flexDirection: 'column' }, children: [_jsxs(Text, { typography: 'heading4', lx: { marginBottom: 's16' }, children: ["Size ", size, "px"] }), _jsx(Box, { lx: {
                             flexDirection: 'row',
                             flexWrap: 'wrap',
                             gap: 's8',

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

@@ -17,9 +17,9 @@ const spotSizeMap = {
     72: 72,
 };
 const numberTypographyMap = {
-    48: 'heading4',
-    56: 'heading3',
-    72: 'heading1',
+    48: 'heading5',
+    56: 'heading4',
+    72: 'heading2',
 };
 const useStyles = ({ size, appearance, disabled, }) => {
     return useStyleSheet((t) => {

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

@@ -126,7 +126,7 @@ export const NumberVariants = {
 export const SizesShowcase = {
     render: () => {
         const sizes = [48, 56, 72];
-        return (_jsx(Box, { lx: { flexDirection: 'column', gap: 's32', padding: 's16' }, children: sizes.map((size) => (_jsxs(Box, { lx: { flexDirection: 'column', gap: 's16' }, children: [_jsxs(Text, { typography: 'heading4SemiBold', children: [size, "px"] }), _jsxs(Box, { lx: { flexDirection: 'row', gap: 's12' }, children: [_jsx(Spot, { appearance: 'icon', icon: Settings, size: size }), _jsx(Spot, { appearance: 'info', size: size }), _jsx(Spot, { appearance: 'number', number: 5, size: size })] })] }, size))) }));
+        return (_jsx(Box, { lx: { flexDirection: 'column', gap: 's32', padding: 's16' }, children: sizes.map((size) => (_jsxs(Box, { lx: { flexDirection: 'column', gap: 's16' }, children: [_jsxs(Text, { typography: 'heading5SemiBold', children: [size, "px"] }), _jsxs(Box, { lx: { flexDirection: 'row', gap: 's12' }, children: [_jsx(Spot, { appearance: 'icon', icon: Settings, size: size }), _jsx(Spot, { appearance: 'info', size: size }), _jsx(Spot, { appearance: 'number', number: 5, size: size })] })] }, size))) }));
     },
 };
 export const StatesShowcase = {

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

@@ -61,5 +61,5 @@ export const AllStates = {
         }, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Box, { style: {
                     flexDirection: 'row',
                     gap: 48,
-                }, children: [_jsxs(Box, { style: { gap: 16 }, children: [_jsx(Text, { typography: 'heading4', children: "Enabled" }), _jsxs(Box, { style: { gap: 8 }, children: [_jsx(Switch, { defaultChecked: false }), _jsx(Switch, { "aria-labelledby": '', defaultChecked: true })] })] }), _jsxs(Box, { style: { gap: 16 }, children: [_jsx(Text, { typography: 'heading4', children: "Disabled" }), _jsxs(Box, { style: { gap: 8 }, children: [_jsx(Switch, { disabled: true, defaultChecked: false }), _jsx(Switch, { disabled: true, defaultChecked: true })] })] })] }) }) })),
+                }, children: [_jsxs(Box, { style: { gap: 16 }, children: [_jsx(Text, { typography: 'heading5', children: "Enabled" }), _jsxs(Box, { style: { gap: 8 }, children: [_jsx(Switch, { defaultChecked: false }), _jsx(Switch, { "aria-labelledby": '', defaultChecked: true })] })] }), _jsxs(Box, { style: { gap: 16 }, children: [_jsx(Text, { typography: 'heading5', children: "Disabled" }), _jsxs(Box, { style: { gap: 8 }, children: [_jsx(Switch, { disabled: true, defaultChecked: false }), _jsx(Switch, { disabled: true, defaultChecked: true })] })] })] }) }) })),
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/Tile.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAc,IAAI,EAAE,MAAM,cAAc,CAAC;AAIhD,OAAO,EACL,gBAAgB,EAEhB,oBAAoB,EAEpB,aAAa,EACb,cAAc,EACf,MAAM,SAAS,CAAC;AAoDjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,IAAI;;;;;;6HAoChB,CAAC;AAkBF;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ;YAAW,aAAa;;CAM5C,CAAC;AAgBF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW;8BAA6B,gBAAgB;;CAWpE,CAAC;AAwBF;;;;GAIG;AACH,eAAO,MAAM,SAAS;8BAA6B,cAAc;;CA6BhE,CAAC;AAwBF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe;+BAIzB,oBAAoB;;CA6BtB,CAAC"}
+{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/Tile.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAc,IAAI,EAAE,MAAM,cAAc,CAAC;AAIhD,OAAO,EACL,gBAAgB,EAEhB,oBAAoB,EAEpB,aAAa,EACb,cAAc,EACf,MAAM,SAAS,CAAC;AAoDjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,IAAI;;;;;;6HAoChB,CAAC;AAkBF;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ;YAAW,aAAa;;CAM5C,CAAC;AAeF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW;8BAA6B,gBAAgB;;CAWpE,CAAC;AAwBF;;;;GAIG;AACH,eAAO,MAAM,SAAS;8BAA6B,cAAc;;CA6BhE,CAAC;AAwBF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe;+BAIzB,oBAAoB;;CA6BtB,CAAC"}

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

@@ -102,7 +102,6 @@ const useContentStyles = () => {
         container: {
             width: t.sizes.full,
             alignItems: 'center',
-            gap: t.spacings.s4,
         },
     }), []);
 };

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

@@ -15,7 +15,7 @@ import { Text as RNText } from 'react-native';
  * <Text typography='body1'>Hello World</Text>
  *
  * // With custom color
- * <Text typography='heading2SemiBold' lx={{ color: 'muted' }}>
+ * <Text typography='heading3SemiBold' lx={{ color: 'muted' }}>
  *   Subtitle
  * </Text>
  *

package/dist/src/lib/Components/Utility/Text/Text.js

@@ -16,7 +16,7 @@ import { createStyledText } from '../../../../styles';
  * <Text typography='body1'>Hello World</Text>
  *
  * // With custom color
- * <Text typography='heading2SemiBold' lx={{ color: 'muted' }}>
+ * <Text typography='heading3SemiBold' lx={{ color: 'muted' }}>
  *   Subtitle
  * </Text>
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.50",
+  "version": "0.0.51",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",

package/src/lib/Components/BottomSheet/BottomSheet.mdx

@@ -131,14 +131,14 @@ function MyComponent() {
 }
 ```
 
-### useBottomSheetRef Hook
+### BottomSheet hooks API
 
-The `useBottomSheetRef` hook provides a typed ref for programmatic control:
+The `useBottomSheetRef` hook provides a typed ref for programmatic control outside of the BottomSheet component:
 
 ```tsx
 import { useBottomSheetRef } from '@ledgerhq/lumen-ui-rnative';
 
-function MyComponent() {
+const MyComponent = () => {
   const bottomSheetRef = useBottomSheetRef();
 
   return (
@@ -149,6 +149,29 @@ function MyComponent() {
 }
 ```
 
+The `useBottomSheet` hook provides a typed ref for programmatic control inside of the BottomSheet component:
+
+```tsx
+import { useBottomSheet } from '@ledgerhq/lumen-ui-rnative';
+
+const Content = () => {
+  const { expand } = useBottomSheet();
+  return (
+    <Pressable onPress={expand}>Content</Pressable>
+  );
+};
+
+const MyComponent = () => {
+  return (
+    <BottomSheet>
+      <BottomSheetView>
+        <Content />
+      </BottomSheetView>
+    </BottomSheet>
+  );
+}
+```
+
 <table style={{width: "100%"}}>
   <thead>
     <tr>

package/src/lib/Components/BottomSheet/BottomSheetHeader.tsx

@@ -55,17 +55,19 @@ const useStyles = ({
         },
         appearance === 'expanded' && {
           gap: t.spacings.s4,
+          flex: 0,
         },
       ]),
       title: StyleSheet.flatten([
-        appearance === 'compact'
-          ? t.typographies.heading4SemiBold
-          : t.typographies.heading2SemiBold,
         {
           color: t.colors.text.base,
         },
+        appearance === 'expanded' && {
+          ...t.typographies.heading3SemiBold,
+        },
         appearance === 'compact' && {
           textAlign: 'center',
+          ...t.typographies.heading5SemiBold,
         },
       ]),
       description: StyleSheet.flatten([

package/src/lib/Components/BottomSheet/useBottomSheetRef.ts

@@ -6,3 +6,5 @@ export const useBottomSheetRef = () => {
 
   return bottomSheetRef;
 };
+
+export { useBottomSheet } from '@gorhom/bottom-sheet';

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

@@ -90,7 +90,7 @@ export const AllStates: Story = {
           }}
         >
           <Box style={{ gap: 16 }}>
-            <Text typography='heading4'>Enabled</Text>
+            <Text typography='heading5'>Enabled</Text>
             <Box style={{ gap: 8 }}>
               <Checkbox
                 label='Unchecked'
@@ -101,7 +101,7 @@ export const AllStates: Story = {
             </Box>
           </Box>
           <Box style={{ gap: 16 }}>
-            <Text typography='heading4'>Disabled</Text>
+            <Text typography='heading5'>Disabled</Text>
             <Box style={{ gap: 8 }}>
               <Checkbox label='Unchecked' disabled defaultChecked={false} />
               <Checkbox label='Checked' disabled defaultChecked />

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

@@ -143,7 +143,7 @@ export const IconSizes: StoryObj = {
       <Box lx={{ flexDirection: 'column', gap: 's16' }}>
         {sizes.map((size) => (
           <Box key={size} lx={{ flexDirection: 'column' }}>
-            <Text typography='heading3' lx={{ marginBottom: 's16' }}>
+            <Text typography='heading4' lx={{ marginBottom: 's16' }}>
               Size {size}px
             </Text>
             <Box

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

@@ -184,7 +184,7 @@ export const SizesShowcase: Story = {
       <Box lx={{ flexDirection: 'column', gap: 's32', padding: 's16' }}>
         {sizes.map((size) => (
           <Box key={size} lx={{ flexDirection: 'column', gap: 's16' }}>
-            <Text typography='heading4SemiBold'>{size}px</Text>
+            <Text typography='heading5SemiBold'>{size}px</Text>
             <Box lx={{ flexDirection: 'row', gap: 's12' }}>
               <Spot appearance='icon' icon={Settings} size={size} />
               <Spot appearance='info' size={size} />

package/src/lib/Components/Spot/Spot.tsx

@@ -27,9 +27,9 @@ const spotSizeMap: Record<SpotSize, number> = {
 } as const;
 
 const numberTypographyMap = {
-  48: 'heading4',
-  56: 'heading3',
-  72: 'heading1',
+  48: 'heading5',
+  56: 'heading4',
+  72: 'heading2',
 } as const;
 
 const useStyles = ({

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

@@ -83,14 +83,14 @@ export const AllStates: Story = {
           }}
         >
           <Box style={{ gap: 16 }}>
-            <Text typography='heading4'>Enabled</Text>
+            <Text typography='heading5'>Enabled</Text>
             <Box style={{ gap: 8 }}>
               <Switch defaultChecked={false} />
               <Switch aria-labelledby='' defaultChecked />
             </Box>
           </Box>
           <Box style={{ gap: 16 }}>
-            <Text typography='heading4'>Disabled</Text>
+            <Text typography='heading5'>Disabled</Text>
             <Box style={{ gap: 8 }}>
               <Switch disabled defaultChecked={false} />
               <Switch disabled defaultChecked />

package/src/lib/Components/Tile/Tile.tsx

@@ -179,7 +179,6 @@ const useContentStyles = () => {
       container: {
         width: t.sizes.full,
         alignItems: 'center',
-        gap: t.spacings.s4,
       },
     }),
     [],

package/src/lib/Components/Utility/Text/Text.mdx

@@ -36,6 +36,7 @@ Used for section titles like page titles.
 - `heading2`, `heading2SemiBold`
 - `heading3`, `heading3SemiBold`
 - `heading4`, `heading4SemiBold`
+- `heading5`, `heading5SemiBold`
 
 
 ### Responsive Display
@@ -56,7 +57,7 @@ import { Text } from '@ledgerhq/lumen-ui-rnative';
 <Text typography='body1'>Hello World</Text>
 
 // With custom color
-<Text typography='heading2SemiBold' lx={{ color: 'muted' }}>
+<Text typography='heading3SemiBold' lx={{ color: 'muted' }}>
   Subtitle
 </Text>
 

package/src/lib/Components/Utility/Text/Text.tsx

@@ -17,7 +17,7 @@ import { createStyledText } from '../../../../styles';
  * <Text typography='body1'>Hello World</Text>
  *
  * // With custom color
- * <Text typography='heading2SemiBold' lx={{ color: 'muted' }}>
+ * <Text typography='heading3SemiBold' lx={{ color: 'muted' }}>
  *   Subtitle
  * </Text>
  *