@ledgerhq/lumen-ui-rnative 0.0.50 → 0.0.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/.storybook/docs/style-system/lx.mdx +1 -1
  2. package/dist/package.json +1 -1
  3. package/dist/src/i18n/locales/de.json +21 -1
  4. package/dist/src/i18n/locales/en.json +3 -0
  5. package/dist/src/i18n/locales/es.json +21 -1
  6. package/dist/src/i18n/locales/fr.json +4 -1
  7. package/dist/src/i18n/locales/ja.json +21 -1
  8. package/dist/src/i18n/locales/ko.json +21 -1
  9. package/dist/src/i18n/locales/pt.json +21 -1
  10. package/dist/src/i18n/locales/ru.json +21 -1
  11. package/dist/src/i18n/locales/th.json +21 -1
  12. package/dist/src/i18n/locales/tr.json +21 -1
  13. package/dist/src/i18n/locales/zh.json +21 -1
  14. package/dist/src/lib/Components/BottomSheet/BottomSheetHeader.d.ts.map +1 -1
  15. package/dist/src/lib/Components/BottomSheet/BottomSheetHeader.js +5 -3
  16. package/dist/src/lib/Components/BottomSheet/useBottomSheetRef.d.ts +1 -0
  17. package/dist/src/lib/Components/BottomSheet/useBottomSheetRef.d.ts.map +1 -1
  18. package/dist/src/lib/Components/BottomSheet/useBottomSheetRef.js +1 -0
  19. package/dist/src/lib/Components/Checkbox/Checkbox.stories.js +1 -1
  20. package/dist/src/lib/Components/Icon/Icon.stories.js +1 -1
  21. package/dist/src/lib/Components/Spot/Spot.js +3 -3
  22. package/dist/src/lib/Components/Spot/Spot.stories.js +1 -1
  23. package/dist/src/lib/Components/Switch/Switch.stories.js +1 -1
  24. package/dist/src/lib/Components/Tile/Tile.d.ts.map +1 -1
  25. package/dist/src/lib/Components/Tile/Tile.js +0 -1
  26. package/dist/src/lib/Components/Utility/Text/Text.d.ts +1 -1
  27. package/dist/src/lib/Components/Utility/Text/Text.js +1 -1
  28. package/package.json +2 -2
  29. package/src/i18n/locales/de.json +22 -2
  30. package/src/i18n/locales/en.json +4 -1
  31. package/src/i18n/locales/es.json +22 -2
  32. package/src/i18n/locales/fr.json +5 -2
  33. package/src/i18n/locales/ja.json +22 -2
  34. package/src/i18n/locales/ko.json +22 -2
  35. package/src/i18n/locales/pt.json +22 -2
  36. package/src/i18n/locales/ru.json +22 -2
  37. package/src/i18n/locales/th.json +22 -2
  38. package/src/i18n/locales/tr.json +22 -2
  39. package/src/i18n/locales/zh.json +22 -2
  40. package/src/lib/Components/BottomSheet/BottomSheet.mdx +26 -3
  41. package/src/lib/Components/BottomSheet/BottomSheetHeader.tsx +5 -3
  42. package/src/lib/Components/BottomSheet/useBottomSheetRef.ts +2 -0
  43. package/src/lib/Components/Checkbox/Checkbox.stories.tsx +2 -2
  44. package/src/lib/Components/Icon/Icon.stories.tsx +1 -1
  45. package/src/lib/Components/Spot/Spot.stories.tsx +1 -1
  46. package/src/lib/Components/Spot/Spot.tsx +3 -3
  47. package/src/lib/Components/Switch/Switch.stories.tsx +2 -2
  48. package/src/lib/Components/Tile/Tile.tsx +0 -1
  49. package/src/lib/Components/Utility/Text/Text.mdx +2 -1
  50. package/src/lib/Components/Utility/Text/Text.tsx +1 -1
@@ -101,7 +101,7 @@ These tokens are **only available on the `Text` component**, in addition to view
101
101
  Preset font size, weight, line height, and letter spacing:
102
102
 
103
103
  ```tsx
104
- <Text typography='heading1' />
104
+ <Text typography='heading2' />
105
105
  <Text typography='body1' />
106
106
  <Text typography='body2SemiBold' />
107
107
  ```
package/dist/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ledgerhq/lumen-ui-rnative",
3
- "version": "0.0.49",
3
+ "version": "0.0.51",
4
4
  "license": "Apache-2.0",
5
5
  "keywords": [
6
6
  "react-native",
@@ -1,3 +1,23 @@
1
1
  {
2
- "components": {}
2
+ "components": {
3
+ "addressInput": {
4
+ "qrCodeAriaLabel": "QR-Code scannen"
5
+ },
6
+ "baseInput": {
7
+ "clearInputAriaLabel": "Eingabe löschen"
8
+ },
9
+ "spinner": {
10
+ "loadingAriaLabel": "Wird geladen"
11
+ },
12
+ "bottomSheetHeader": {
13
+ "goBackAriaLabel": "Zurück",
14
+ "closeAriaLabel": "Schließen"
15
+ },
16
+ "banner": {
17
+ "closeAriaLabel": "Schließen"
18
+ },
19
+ "link": {
20
+ "opensInNewTabAriaLabel": "(Öffnet in neuem Tab)"
21
+ }
22
+ }
3
23
  }
@@ -15,6 +15,9 @@
15
15
  },
16
16
  "banner": {
17
17
  "closeAriaLabel": "Close"
18
+ },
19
+ "link": {
20
+ "opensInNewTabAriaLabel": "(opens in a new tab)"
18
21
  }
19
22
  }
20
23
  }
@@ -1,3 +1,23 @@
1
1
  {
2
- "components": {}
2
+ "components": {
3
+ "addressInput": {
4
+ "qrCodeAriaLabel": "Escanear código QR"
5
+ },
6
+ "baseInput": {
7
+ "clearInputAriaLabel": "Borrar entrada"
8
+ },
9
+ "spinner": {
10
+ "loadingAriaLabel": "Cargando"
11
+ },
12
+ "bottomSheetHeader": {
13
+ "goBackAriaLabel": "Volver",
14
+ "closeAriaLabel": "Cerrar"
15
+ },
16
+ "banner": {
17
+ "closeAriaLabel": "Cerrar"
18
+ },
19
+ "link": {
20
+ "opensInNewTabAriaLabel": "(se abre en una pestaña nueva)"
21
+ }
22
+ }
3
23
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "components": {
3
3
  "addressInput": {
4
- "qrCodeAriaLabel": "Scanner le QR code"
4
+ "qrCodeAriaLabel": "Scanner le code QR"
5
5
  },
6
6
  "baseInput": {
7
7
  "clearInputAriaLabel": "Effacer la saisie"
@@ -15,6 +15,9 @@
15
15
  },
16
16
  "banner": {
17
17
  "closeAriaLabel": "Fermer"
18
+ },
19
+ "link": {
20
+ "opensInNewTabAriaLabel": "(s'ouvre dans un nouvel onglet)"
18
21
  }
19
22
  }
20
23
  }
@@ -1,3 +1,23 @@
1
1
  {
2
- "components": {}
2
+ "components": {
3
+ "addressInput": {
4
+ "qrCodeAriaLabel": "QRコードをスキャン"
5
+ },
6
+ "baseInput": {
7
+ "clearInputAriaLabel": "インプットを削除"
8
+ },
9
+ "spinner": {
10
+ "loadingAriaLabel": "読み込み中"
11
+ },
12
+ "bottomSheetHeader": {
13
+ "goBackAriaLabel": "戻る",
14
+ "closeAriaLabel": "閉じる"
15
+ },
16
+ "banner": {
17
+ "closeAriaLabel": "閉じる"
18
+ },
19
+ "link": {
20
+ "opensInNewTabAriaLabel": "(新しいタブで開く)"
21
+ }
22
+ }
3
23
  }
@@ -1,3 +1,23 @@
1
1
  {
2
- "components": {}
2
+ "components": {
3
+ "addressInput": {
4
+ "qrCodeAriaLabel": "QR 코드 스캔"
5
+ },
6
+ "baseInput": {
7
+ "clearInputAriaLabel": "입력 값 지우기"
8
+ },
9
+ "spinner": {
10
+ "loadingAriaLabel": "로딩중"
11
+ },
12
+ "bottomSheetHeader": {
13
+ "goBackAriaLabel": "돌아가기",
14
+ "closeAriaLabel": "닫기"
15
+ },
16
+ "banner": {
17
+ "closeAriaLabel": "닫기"
18
+ },
19
+ "link": {
20
+ "opensInNewTabAriaLabel": "(새 탭에서 열기)"
21
+ }
22
+ }
3
23
  }
@@ -1,3 +1,23 @@
1
1
  {
2
- "components": {}
2
+ "components": {
3
+ "addressInput": {
4
+ "qrCodeAriaLabel": "Escanear QR Code"
5
+ },
6
+ "baseInput": {
7
+ "clearInputAriaLabel": "Limpar input"
8
+ },
9
+ "spinner": {
10
+ "loadingAriaLabel": "Carregando"
11
+ },
12
+ "bottomSheetHeader": {
13
+ "goBackAriaLabel": "Voltar",
14
+ "closeAriaLabel": "Fechar"
15
+ },
16
+ "banner": {
17
+ "closeAriaLabel": "Fechar"
18
+ },
19
+ "link": {
20
+ "opensInNewTabAriaLabel": "(abre em uma nova aba)"
21
+ }
22
+ }
3
23
  }
@@ -1,3 +1,23 @@
1
1
  {
2
- "components": {}
2
+ "components": {
3
+ "addressInput": {
4
+ "qrCodeAriaLabel": "Сканировать QR-код"
5
+ },
6
+ "baseInput": {
7
+ "clearInputAriaLabel": "Очистить поле"
8
+ },
9
+ "spinner": {
10
+ "loadingAriaLabel": "Загрузка"
11
+ },
12
+ "bottomSheetHeader": {
13
+ "goBackAriaLabel": "Назад",
14
+ "closeAriaLabel": "Закрыть"
15
+ },
16
+ "banner": {
17
+ "closeAriaLabel": "Закрыть"
18
+ },
19
+ "link": {
20
+ "opensInNewTabAriaLabel": "(открывается в новой вкладке)"
21
+ }
22
+ }
3
23
  }
@@ -1,3 +1,23 @@
1
1
  {
2
- "components": {}
2
+ "components": {
3
+ "addressInput": {
4
+ "qrCodeAriaLabel": "สแกน QR Code"
5
+ },
6
+ "baseInput": {
7
+ "clearInputAriaLabel": "ล้างอินพุต"
8
+ },
9
+ "spinner": {
10
+ "loadingAriaLabel": "กำลังโหลด"
11
+ },
12
+ "bottomSheetHeader": {
13
+ "goBackAriaLabel": "ย้อนกลับ",
14
+ "closeAriaLabel": "ปิด"
15
+ },
16
+ "banner": {
17
+ "closeAriaLabel": "ปิด"
18
+ },
19
+ "link": {
20
+ "opensInNewTabAriaLabel": "(เปิดในแท็บใหม่)"
21
+ }
22
+ }
3
23
  }
@@ -1,3 +1,23 @@
1
1
  {
2
- "components": {}
2
+ "components": {
3
+ "addressInput": {
4
+ "qrCodeAriaLabel": "Karekodu okut"
5
+ },
6
+ "baseInput": {
7
+ "clearInputAriaLabel": "Girdiyi temizle"
8
+ },
9
+ "spinner": {
10
+ "loadingAriaLabel": "Yükleniyor"
11
+ },
12
+ "bottomSheetHeader": {
13
+ "goBackAriaLabel": "Geri dön",
14
+ "closeAriaLabel": "Kapat"
15
+ },
16
+ "banner": {
17
+ "closeAriaLabel": "Kapat"
18
+ },
19
+ "link": {
20
+ "opensInNewTabAriaLabel": "(yeni sekmede açılır)"
21
+ }
22
+ }
3
23
  }
@@ -1,3 +1,23 @@
1
1
  {
2
- "components": {}
2
+ "components": {
3
+ "addressInput": {
4
+ "qrCodeAriaLabel": "扫描二维码"
5
+ },
6
+ "baseInput": {
7
+ "clearInputAriaLabel": "清空输入框"
8
+ },
9
+ "spinner": {
10
+ "loadingAriaLabel": "加载中"
11
+ },
12
+ "bottomSheetHeader": {
13
+ "goBackAriaLabel": "返回",
14
+ "closeAriaLabel": "关闭"
15
+ },
16
+ "banner": {
17
+ "closeAriaLabel": "关闭"
18
+ },
19
+ "link": {
20
+ "opensInNewTabAriaLabel": "(在新选项卡中打开)"
21
+ }
22
+ }
3
23
  }
@@ -1 +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"}
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;AA+EjD,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA0ExD,CAAC"}
@@ -42,17 +42,19 @@ const useStyles = ({ appearance, spacing, hidden, }) => {
42
42
  },
43
43
  appearance === 'expanded' && {
44
44
  gap: t.spacings.s4,
45
+ flex: 0,
45
46
  },
46
47
  ]),
47
48
  title: StyleSheet.flatten([
48
- appearance === 'compact'
49
- ? t.typographies.heading4SemiBold
50
- : t.typographies.heading2SemiBold,
51
49
  {
52
50
  color: t.colors.text.base,
53
51
  },
52
+ appearance === 'expanded' && {
53
+ ...t.typographies.heading3SemiBold,
54
+ },
54
55
  appearance === 'compact' && {
55
56
  textAlign: 'center',
57
+ ...t.typographies.heading5SemiBold,
56
58
  },
57
59
  ]),
58
60
  description: StyleSheet.flatten([
@@ -1,2 +1,3 @@
1
1
  export declare const useBottomSheetRef: () => import("react").RefObject<import("@gorhom/bottom-sheet/lib/typescript/types").BottomSheetMethods>;
2
+ export { useBottomSheet } from '@gorhom/bottom-sheet';
2
3
  //# sourceMappingURL=useBottomSheetRef.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useBottomSheetRef.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/useBottomSheetRef.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,yGAI7B,CAAC"}
1
+ {"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"}
@@ -3,3 +3,4 @@ export const useBottomSheetRef = () => {
3
3
  const bottomSheetRef = useRef(null);
4
4
  return bottomSheetRef;
5
5
  };
6
+ export { useBottomSheet } from '@gorhom/bottom-sheet';
@@ -68,5 +68,5 @@ export const AllStates = {
68
68
  }, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Box, { style: {
69
69
  flexDirection: 'row',
70
70
  gap: 48,
71
- }, 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 })] })] })] }) }) })),
71
+ }, 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 })] })] })] }) }) })),
72
72
  };
@@ -87,7 +87,7 @@ export const Icon = {
87
87
  export const IconSizes = {
88
88
  render: () => {
89
89
  const { theme } = useTheme();
90
- 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: {
90
+ 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: {
91
91
  flexDirection: 'row',
92
92
  flexWrap: 'wrap',
93
93
  gap: 's8',
@@ -17,9 +17,9 @@ const spotSizeMap = {
17
17
  72: 72,
18
18
  };
19
19
  const numberTypographyMap = {
20
- 48: 'heading4',
21
- 56: 'heading3',
22
- 72: 'heading1',
20
+ 48: 'heading5',
21
+ 56: 'heading4',
22
+ 72: 'heading2',
23
23
  };
24
24
  const useStyles = ({ size, appearance, disabled, }) => {
25
25
  return useStyleSheet((t) => {
@@ -126,7 +126,7 @@ export const NumberVariants = {
126
126
  export const SizesShowcase = {
127
127
  render: () => {
128
128
  const sizes = [48, 56, 72];
129
- 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))) }));
129
+ 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))) }));
130
130
  },
131
131
  };
132
132
  export const StatesShowcase = {
@@ -61,5 +61,5 @@ export const AllStates = {
61
61
  }, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Box, { style: {
62
62
  flexDirection: 'row',
63
63
  gap: 48,
64
- }, 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 })] })] })] }) }) })),
64
+ }, 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 })] })] })] }) }) })),
65
65
  };
@@ -1 +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"}
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;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"}
@@ -102,7 +102,6 @@ const useContentStyles = () => {
102
102
  container: {
103
103
  width: t.sizes.full,
104
104
  alignItems: 'center',
105
- gap: t.spacings.s4,
106
105
  },
107
106
  }), []);
108
107
  };
@@ -15,7 +15,7 @@ import { Text as RNText } from 'react-native';
15
15
  * <Text typography='body1'>Hello World</Text>
16
16
  *
17
17
  * // With custom color
18
- * <Text typography='heading2SemiBold' lx={{ color: 'muted' }}>
18
+ * <Text typography='heading3SemiBold' lx={{ color: 'muted' }}>
19
19
  * Subtitle
20
20
  * </Text>
21
21
  *
@@ -16,7 +16,7 @@ import { createStyledText } from '../../../../styles';
16
16
  * <Text typography='body1'>Hello World</Text>
17
17
  *
18
18
  * // With custom color
19
- * <Text typography='heading2SemiBold' lx={{ color: 'muted' }}>
19
+ * <Text typography='heading3SemiBold' lx={{ color: 'muted' }}>
20
20
  * Subtitle
21
21
  * </Text>
22
22
  *
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ledgerhq/lumen-ui-rnative",
3
- "version": "0.0.50",
3
+ "version": "0.0.52",
4
4
  "license": "Apache-2.0",
5
5
  "keywords": [
6
6
  "react-native",
@@ -33,7 +33,7 @@
33
33
  },
34
34
  "peerDependencies": {
35
35
  "@gorhom/bottom-sheet": "^5.0.0",
36
- "@ledgerhq/lumen-design-core": "0.0.39",
36
+ "@ledgerhq/lumen-design-core": "0.0.40",
37
37
  "react": "~18.3.1",
38
38
  "react-native": "~0.77.3",
39
39
  "react-native-reanimated": "^3.0.0",
@@ -1,3 +1,23 @@
1
1
  {
2
- "components": {}
3
- }
2
+ "components": {
3
+ "addressInput": {
4
+ "qrCodeAriaLabel": "QR-Code scannen"
5
+ },
6
+ "baseInput": {
7
+ "clearInputAriaLabel": "Eingabe löschen"
8
+ },
9
+ "spinner": {
10
+ "loadingAriaLabel": "Wird geladen"
11
+ },
12
+ "bottomSheetHeader": {
13
+ "goBackAriaLabel": "Zurück",
14
+ "closeAriaLabel": "Schließen"
15
+ },
16
+ "banner": {
17
+ "closeAriaLabel": "Schließen"
18
+ },
19
+ "link": {
20
+ "opensInNewTabAriaLabel": "(Öffnet in neuem Tab)"
21
+ }
22
+ }
23
+ }
@@ -15,6 +15,9 @@
15
15
  },
16
16
  "banner": {
17
17
  "closeAriaLabel": "Close"
18
+ },
19
+ "link": {
20
+ "opensInNewTabAriaLabel": "(opens in a new tab)"
18
21
  }
19
22
  }
20
- }
23
+ }
@@ -1,3 +1,23 @@
1
1
  {
2
- "components": {}
3
- }
2
+ "components": {
3
+ "addressInput": {
4
+ "qrCodeAriaLabel": "Escanear código QR"
5
+ },
6
+ "baseInput": {
7
+ "clearInputAriaLabel": "Borrar entrada"
8
+ },
9
+ "spinner": {
10
+ "loadingAriaLabel": "Cargando"
11
+ },
12
+ "bottomSheetHeader": {
13
+ "goBackAriaLabel": "Volver",
14
+ "closeAriaLabel": "Cerrar"
15
+ },
16
+ "banner": {
17
+ "closeAriaLabel": "Cerrar"
18
+ },
19
+ "link": {
20
+ "opensInNewTabAriaLabel": "(se abre en una pestaña nueva)"
21
+ }
22
+ }
23
+ }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "components": {
3
3
  "addressInput": {
4
- "qrCodeAriaLabel": "Scanner le QR code"
4
+ "qrCodeAriaLabel": "Scanner le code QR"
5
5
  },
6
6
  "baseInput": {
7
7
  "clearInputAriaLabel": "Effacer la saisie"
@@ -15,6 +15,9 @@
15
15
  },
16
16
  "banner": {
17
17
  "closeAriaLabel": "Fermer"
18
+ },
19
+ "link": {
20
+ "opensInNewTabAriaLabel": "(s'ouvre dans un nouvel onglet)"
18
21
  }
19
22
  }
20
- }
23
+ }
@@ -1,3 +1,23 @@
1
1
  {
2
- "components": {}
3
- }
2
+ "components": {
3
+ "addressInput": {
4
+ "qrCodeAriaLabel": "QRコードをスキャン"
5
+ },
6
+ "baseInput": {
7
+ "clearInputAriaLabel": "インプットを削除"
8
+ },
9
+ "spinner": {
10
+ "loadingAriaLabel": "読み込み中"
11
+ },
12
+ "bottomSheetHeader": {
13
+ "goBackAriaLabel": "戻る",
14
+ "closeAriaLabel": "閉じる"
15
+ },
16
+ "banner": {
17
+ "closeAriaLabel": "閉じる"
18
+ },
19
+ "link": {
20
+ "opensInNewTabAriaLabel": "(新しいタブで開く)"
21
+ }
22
+ }
23
+ }
@@ -1,3 +1,23 @@
1
1
  {
2
- "components": {}
3
- }
2
+ "components": {
3
+ "addressInput": {
4
+ "qrCodeAriaLabel": "QR 코드 스캔"
5
+ },
6
+ "baseInput": {
7
+ "clearInputAriaLabel": "입력 값 지우기"
8
+ },
9
+ "spinner": {
10
+ "loadingAriaLabel": "로딩중"
11
+ },
12
+ "bottomSheetHeader": {
13
+ "goBackAriaLabel": "돌아가기",
14
+ "closeAriaLabel": "닫기"
15
+ },
16
+ "banner": {
17
+ "closeAriaLabel": "닫기"
18
+ },
19
+ "link": {
20
+ "opensInNewTabAriaLabel": "(새 탭에서 열기)"
21
+ }
22
+ }
23
+ }
@@ -1,3 +1,23 @@
1
1
  {
2
- "components": {}
3
- }
2
+ "components": {
3
+ "addressInput": {
4
+ "qrCodeAriaLabel": "Escanear QR Code"
5
+ },
6
+ "baseInput": {
7
+ "clearInputAriaLabel": "Limpar input"
8
+ },
9
+ "spinner": {
10
+ "loadingAriaLabel": "Carregando"
11
+ },
12
+ "bottomSheetHeader": {
13
+ "goBackAriaLabel": "Voltar",
14
+ "closeAriaLabel": "Fechar"
15
+ },
16
+ "banner": {
17
+ "closeAriaLabel": "Fechar"
18
+ },
19
+ "link": {
20
+ "opensInNewTabAriaLabel": "(abre em uma nova aba)"
21
+ }
22
+ }
23
+ }
@@ -1,3 +1,23 @@
1
1
  {
2
- "components": {}
3
- }
2
+ "components": {
3
+ "addressInput": {
4
+ "qrCodeAriaLabel": "Сканировать QR-код"
5
+ },
6
+ "baseInput": {
7
+ "clearInputAriaLabel": "Очистить поле"
8
+ },
9
+ "spinner": {
10
+ "loadingAriaLabel": "Загрузка"
11
+ },
12
+ "bottomSheetHeader": {
13
+ "goBackAriaLabel": "Назад",
14
+ "closeAriaLabel": "Закрыть"
15
+ },
16
+ "banner": {
17
+ "closeAriaLabel": "Закрыть"
18
+ },
19
+ "link": {
20
+ "opensInNewTabAriaLabel": "(открывается в новой вкладке)"
21
+ }
22
+ }
23
+ }
@@ -1,3 +1,23 @@
1
1
  {
2
- "components": {}
3
- }
2
+ "components": {
3
+ "addressInput": {
4
+ "qrCodeAriaLabel": "สแกน QR Code"
5
+ },
6
+ "baseInput": {
7
+ "clearInputAriaLabel": "ล้างอินพุต"
8
+ },
9
+ "spinner": {
10
+ "loadingAriaLabel": "กำลังโหลด"
11
+ },
12
+ "bottomSheetHeader": {
13
+ "goBackAriaLabel": "ย้อนกลับ",
14
+ "closeAriaLabel": "ปิด"
15
+ },
16
+ "banner": {
17
+ "closeAriaLabel": "ปิด"
18
+ },
19
+ "link": {
20
+ "opensInNewTabAriaLabel": "(เปิดในแท็บใหม่)"
21
+ }
22
+ }
23
+ }
@@ -1,3 +1,23 @@
1
1
  {
2
- "components": {}
3
- }
2
+ "components": {
3
+ "addressInput": {
4
+ "qrCodeAriaLabel": "Karekodu okut"
5
+ },
6
+ "baseInput": {
7
+ "clearInputAriaLabel": "Girdiyi temizle"
8
+ },
9
+ "spinner": {
10
+ "loadingAriaLabel": "Yükleniyor"
11
+ },
12
+ "bottomSheetHeader": {
13
+ "goBackAriaLabel": "Geri dön",
14
+ "closeAriaLabel": "Kapat"
15
+ },
16
+ "banner": {
17
+ "closeAriaLabel": "Kapat"
18
+ },
19
+ "link": {
20
+ "opensInNewTabAriaLabel": "(yeni sekmede açılır)"
21
+ }
22
+ }
23
+ }
@@ -1,3 +1,23 @@
1
1
  {
2
- "components": {}
3
- }
2
+ "components": {
3
+ "addressInput": {
4
+ "qrCodeAriaLabel": "扫描二维码"
5
+ },
6
+ "baseInput": {
7
+ "clearInputAriaLabel": "清空输入框"
8
+ },
9
+ "spinner": {
10
+ "loadingAriaLabel": "加载中"
11
+ },
12
+ "bottomSheetHeader": {
13
+ "goBackAriaLabel": "返回",
14
+ "closeAriaLabel": "关闭"
15
+ },
16
+ "banner": {
17
+ "closeAriaLabel": "关闭"
18
+ },
19
+ "link": {
20
+ "opensInNewTabAriaLabel": "(在新选项卡中打开)"
21
+ }
22
+ }
23
+ }
@@ -131,14 +131,14 @@ function MyComponent() {
131
131
  }
132
132
  ```
133
133
 
134
- ### useBottomSheetRef Hook
134
+ ### BottomSheet hooks API
135
135
 
136
- The `useBottomSheetRef` hook provides a typed ref for programmatic control:
136
+ The `useBottomSheetRef` hook provides a typed ref for programmatic control outside of the BottomSheet component:
137
137
 
138
138
  ```tsx
139
139
  import { useBottomSheetRef } from '@ledgerhq/lumen-ui-rnative';
140
140
 
141
- function MyComponent() {
141
+ const MyComponent = () => {
142
142
  const bottomSheetRef = useBottomSheetRef();
143
143
 
144
144
  return (
@@ -149,6 +149,29 @@ function MyComponent() {
149
149
  }
150
150
  ```
151
151
 
152
+ The `useBottomSheet` hook provides a typed ref for programmatic control inside of the BottomSheet component:
153
+
154
+ ```tsx
155
+ import { useBottomSheet } from '@ledgerhq/lumen-ui-rnative';
156
+
157
+ const Content = () => {
158
+ const { expand } = useBottomSheet();
159
+ return (
160
+ <Pressable onPress={expand}>Content</Pressable>
161
+ );
162
+ };
163
+
164
+ const MyComponent = () => {
165
+ return (
166
+ <BottomSheet>
167
+ <BottomSheetView>
168
+ <Content />
169
+ </BottomSheetView>
170
+ </BottomSheet>
171
+ );
172
+ }
173
+ ```
174
+
152
175
  <table style={{width: "100%"}}>
153
176
  <thead>
154
177
  <tr>
@@ -55,17 +55,19 @@ const useStyles = ({
55
55
  },
56
56
  appearance === 'expanded' && {
57
57
  gap: t.spacings.s4,
58
+ flex: 0,
58
59
  },
59
60
  ]),
60
61
  title: StyleSheet.flatten([
61
- appearance === 'compact'
62
- ? t.typographies.heading4SemiBold
63
- : t.typographies.heading2SemiBold,
64
62
  {
65
63
  color: t.colors.text.base,
66
64
  },
65
+ appearance === 'expanded' && {
66
+ ...t.typographies.heading3SemiBold,
67
+ },
67
68
  appearance === 'compact' && {
68
69
  textAlign: 'center',
70
+ ...t.typographies.heading5SemiBold,
69
71
  },
70
72
  ]),
71
73
  description: StyleSheet.flatten([
@@ -6,3 +6,5 @@ export const useBottomSheetRef = () => {
6
6
 
7
7
  return bottomSheetRef;
8
8
  };
9
+
10
+ export { useBottomSheet } from '@gorhom/bottom-sheet';
@@ -90,7 +90,7 @@ export const AllStates: Story = {
90
90
  }}
91
91
  >
92
92
  <Box style={{ gap: 16 }}>
93
- <Text typography='heading4'>Enabled</Text>
93
+ <Text typography='heading5'>Enabled</Text>
94
94
  <Box style={{ gap: 8 }}>
95
95
  <Checkbox
96
96
  label='Unchecked'
@@ -101,7 +101,7 @@ export const AllStates: Story = {
101
101
  </Box>
102
102
  </Box>
103
103
  <Box style={{ gap: 16 }}>
104
- <Text typography='heading4'>Disabled</Text>
104
+ <Text typography='heading5'>Disabled</Text>
105
105
  <Box style={{ gap: 8 }}>
106
106
  <Checkbox label='Unchecked' disabled defaultChecked={false} />
107
107
  <Checkbox label='Checked' disabled defaultChecked />
@@ -143,7 +143,7 @@ export const IconSizes: StoryObj = {
143
143
  <Box lx={{ flexDirection: 'column', gap: 's16' }}>
144
144
  {sizes.map((size) => (
145
145
  <Box key={size} lx={{ flexDirection: 'column' }}>
146
- <Text typography='heading3' lx={{ marginBottom: 's16' }}>
146
+ <Text typography='heading4' lx={{ marginBottom: 's16' }}>
147
147
  Size {size}px
148
148
  </Text>
149
149
  <Box
@@ -184,7 +184,7 @@ export const SizesShowcase: Story = {
184
184
  <Box lx={{ flexDirection: 'column', gap: 's32', padding: 's16' }}>
185
185
  {sizes.map((size) => (
186
186
  <Box key={size} lx={{ flexDirection: 'column', gap: 's16' }}>
187
- <Text typography='heading4SemiBold'>{size}px</Text>
187
+ <Text typography='heading5SemiBold'>{size}px</Text>
188
188
  <Box lx={{ flexDirection: 'row', gap: 's12' }}>
189
189
  <Spot appearance='icon' icon={Settings} size={size} />
190
190
  <Spot appearance='info' size={size} />
@@ -27,9 +27,9 @@ const spotSizeMap: Record<SpotSize, number> = {
27
27
  } as const;
28
28
 
29
29
  const numberTypographyMap = {
30
- 48: 'heading4',
31
- 56: 'heading3',
32
- 72: 'heading1',
30
+ 48: 'heading5',
31
+ 56: 'heading4',
32
+ 72: 'heading2',
33
33
  } as const;
34
34
 
35
35
  const useStyles = ({
@@ -83,14 +83,14 @@ export const AllStates: Story = {
83
83
  }}
84
84
  >
85
85
  <Box style={{ gap: 16 }}>
86
- <Text typography='heading4'>Enabled</Text>
86
+ <Text typography='heading5'>Enabled</Text>
87
87
  <Box style={{ gap: 8 }}>
88
88
  <Switch defaultChecked={false} />
89
89
  <Switch aria-labelledby='' defaultChecked />
90
90
  </Box>
91
91
  </Box>
92
92
  <Box style={{ gap: 16 }}>
93
- <Text typography='heading4'>Disabled</Text>
93
+ <Text typography='heading5'>Disabled</Text>
94
94
  <Box style={{ gap: 8 }}>
95
95
  <Switch disabled defaultChecked={false} />
96
96
  <Switch disabled defaultChecked />
@@ -179,7 +179,6 @@ const useContentStyles = () => {
179
179
  container: {
180
180
  width: t.sizes.full,
181
181
  alignItems: 'center',
182
- gap: t.spacings.s4,
183
182
  },
184
183
  }),
185
184
  [],
@@ -36,6 +36,7 @@ Used for section titles like page titles.
36
36
  - `heading2`, `heading2SemiBold`
37
37
  - `heading3`, `heading3SemiBold`
38
38
  - `heading4`, `heading4SemiBold`
39
+ - `heading5`, `heading5SemiBold`
39
40
 
40
41
 
41
42
  ### Responsive Display
@@ -56,7 +57,7 @@ import { Text } from '@ledgerhq/lumen-ui-rnative';
56
57
  <Text typography='body1'>Hello World</Text>
57
58
 
58
59
  // With custom color
59
- <Text typography='heading2SemiBold' lx={{ color: 'muted' }}>
60
+ <Text typography='heading3SemiBold' lx={{ color: 'muted' }}>
60
61
  Subtitle
61
62
  </Text>
62
63
 
@@ -17,7 +17,7 @@ import { createStyledText } from '../../../../styles';
17
17
  * <Text typography='body1'>Hello World</Text>
18
18
  *
19
19
  * // With custom color
20
- * <Text typography='heading2SemiBold' lx={{ color: 'muted' }}>
20
+ * <Text typography='heading3SemiBold' lx={{ color: 'muted' }}>
21
21
  * Subtitle
22
22
  * </Text>
23
23
  *