@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.
- package/.storybook/docs/style-system/lx.mdx +1 -1
- package/dist/package.json +1 -1
- package/dist/src/i18n/locales/de.json +21 -1
- package/dist/src/i18n/locales/en.json +3 -0
- package/dist/src/i18n/locales/es.json +21 -1
- package/dist/src/i18n/locales/fr.json +4 -1
- package/dist/src/i18n/locales/ja.json +21 -1
- package/dist/src/i18n/locales/ko.json +21 -1
- package/dist/src/i18n/locales/pt.json +21 -1
- package/dist/src/i18n/locales/ru.json +21 -1
- package/dist/src/i18n/locales/th.json +21 -1
- package/dist/src/i18n/locales/tr.json +21 -1
- package/dist/src/i18n/locales/zh.json +21 -1
- package/dist/src/lib/Components/BottomSheet/BottomSheetHeader.d.ts.map +1 -1
- package/dist/src/lib/Components/BottomSheet/BottomSheetHeader.js +5 -3
- package/dist/src/lib/Components/BottomSheet/useBottomSheetRef.d.ts +1 -0
- package/dist/src/lib/Components/BottomSheet/useBottomSheetRef.d.ts.map +1 -1
- package/dist/src/lib/Components/BottomSheet/useBottomSheetRef.js +1 -0
- package/dist/src/lib/Components/Checkbox/Checkbox.stories.js +1 -1
- package/dist/src/lib/Components/Icon/Icon.stories.js +1 -1
- package/dist/src/lib/Components/Spot/Spot.js +3 -3
- package/dist/src/lib/Components/Spot/Spot.stories.js +1 -1
- package/dist/src/lib/Components/Switch/Switch.stories.js +1 -1
- package/dist/src/lib/Components/Tile/Tile.d.ts.map +1 -1
- package/dist/src/lib/Components/Tile/Tile.js +0 -1
- package/dist/src/lib/Components/Utility/Text/Text.d.ts +1 -1
- package/dist/src/lib/Components/Utility/Text/Text.js +1 -1
- package/package.json +2 -2
- package/src/i18n/locales/de.json +22 -2
- package/src/i18n/locales/en.json +4 -1
- package/src/i18n/locales/es.json +22 -2
- package/src/i18n/locales/fr.json +5 -2
- package/src/i18n/locales/ja.json +22 -2
- package/src/i18n/locales/ko.json +22 -2
- package/src/i18n/locales/pt.json +22 -2
- package/src/i18n/locales/ru.json +22 -2
- package/src/i18n/locales/th.json +22 -2
- package/src/i18n/locales/tr.json +22 -2
- package/src/i18n/locales/zh.json +22 -2
- package/src/lib/Components/BottomSheet/BottomSheet.mdx +26 -3
- package/src/lib/Components/BottomSheet/BottomSheetHeader.tsx +5 -3
- package/src/lib/Components/BottomSheet/useBottomSheetRef.ts +2 -0
- package/src/lib/Components/Checkbox/Checkbox.stories.tsx +2 -2
- package/src/lib/Components/Icon/Icon.stories.tsx +1 -1
- package/src/lib/Components/Spot/Spot.stories.tsx +1 -1
- package/src/lib/Components/Spot/Spot.tsx +3 -3
- package/src/lib/Components/Switch/Switch.stories.tsx +2 -2
- package/src/lib/Components/Tile/Tile.tsx +0 -1
- package/src/lib/Components/Utility/Text/Text.mdx +2 -1
- 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='
|
|
104
|
+
<Text typography='heading2' />
|
|
105
105
|
<Text typography='body1' />
|
|
106
106
|
<Text typography='body2SemiBold' />
|
|
107
107
|
```
|
package/dist/package.json
CHANGED
|
@@ -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
|
}
|
|
@@ -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
|
|
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;
|
|
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 +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"}
|
|
@@ -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: '
|
|
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: '
|
|
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: '
|
|
21
|
-
56: '
|
|
22
|
-
72: '
|
|
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: '
|
|
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: '
|
|
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;
|
|
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"}
|
|
@@ -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='
|
|
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='
|
|
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.
|
|
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.
|
|
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",
|
package/src/i18n/locales/de.json
CHANGED
|
@@ -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
|
+
}
|
package/src/i18n/locales/en.json
CHANGED
package/src/i18n/locales/es.json
CHANGED
|
@@ -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
|
+
}
|
package/src/i18n/locales/fr.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"components": {
|
|
3
3
|
"addressInput": {
|
|
4
|
-
"qrCodeAriaLabel": "Scanner le QR
|
|
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
|
+
}
|
package/src/i18n/locales/ja.json
CHANGED
|
@@ -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
|
+
}
|
package/src/i18n/locales/ko.json
CHANGED
|
@@ -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
|
+
}
|
package/src/i18n/locales/pt.json
CHANGED
|
@@ -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
|
+
}
|
package/src/i18n/locales/ru.json
CHANGED
|
@@ -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
|
+
}
|
package/src/i18n/locales/th.json
CHANGED
|
@@ -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
|
+
}
|
package/src/i18n/locales/tr.json
CHANGED
|
@@ -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
|
+
}
|
package/src/i18n/locales/zh.json
CHANGED
|
@@ -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
|
-
###
|
|
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
|
-
|
|
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([
|
|
@@ -90,7 +90,7 @@ export const AllStates: Story = {
|
|
|
90
90
|
}}
|
|
91
91
|
>
|
|
92
92
|
<Box style={{ gap: 16 }}>
|
|
93
|
-
<Text typography='
|
|
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='
|
|
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='
|
|
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='
|
|
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: '
|
|
31
|
-
56: '
|
|
32
|
-
72: '
|
|
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='
|
|
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='
|
|
93
|
+
<Text typography='heading5'>Disabled</Text>
|
|
94
94
|
<Box style={{ gap: 8 }}>
|
|
95
95
|
<Switch disabled defaultChecked={false} />
|
|
96
96
|
<Switch disabled defaultChecked />
|
|
@@ -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='
|
|
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='
|
|
20
|
+
* <Text typography='heading3SemiBold' lx={{ color: 'muted' }}>
|
|
21
21
|
* Subtitle
|
|
22
22
|
* </Text>
|
|
23
23
|
*
|