@ledgerhq/lumen-ui-rnative 0.0.78 → 0.0.79

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 (9) hide show
  1. package/ai-rules/RULES.md +6 -0
  2. package/chromatic.config.json +7 -0
  3. package/dist/package.json +1 -1
  4. package/dist/src/lib/Components/BaseInput/BaseInput.js +6 -4
  5. package/dist/src/lib/Components/BottomSheet/BottomSheetHeader.d.ts.map +1 -1
  6. package/dist/src/lib/Components/BottomSheet/BottomSheetHeader.js +2 -2
  7. package/package.json +2 -2
  8. package/src/lib/Components/BaseInput/BaseInput.tsx +6 -4
  9. package/src/lib/Components/BottomSheet/BottomSheetHeader.tsx +15 -2
package/ai-rules/RULES.md CHANGED
@@ -31,9 +31,14 @@ Below is a complete list of all available Lumen React Native components. Click a
31
31
  - [Link](https://ldls.vercel.app/?path=/docs/action-link--docs) - Hyperlink component
32
32
  - [TileButton](https://ldls.vercel.app/?path=/docs/action-tilebutton--docs) - Interactive tile button
33
33
  - [AmountDisplay](https://ldls.vercel.app/?path=/docs/communication-amountdisplay--docs) - Display formatted amounts with currency
34
+ - [Avatar](https://ldls.vercel.app/?path=/docs/communication-avatar--docs) - User avatar with image, initials, or placeholder
34
35
  - [Banner](https://ldls.vercel.app/?path=/docs/communication-banner--docs) - Alert and notification banners
36
+ - [ContentBanner](https://ldls.vercel.app/?path=/docs/communication-contentbanner--docs) - Rich content banner with image support
37
+ - [PageIndicator](https://ldls.vercel.app/?path=/docs/communication-pageindicator--docs) - Step and page progress indicator
38
+ - [Skeleton](https://ldls.vercel.app/?path=/docs/communication-skeleton--docs) - Loading placeholder skeleton
35
39
  - [Spinner](https://ldls.vercel.app/?path=/docs/communication-spinner--docs) - Loading spinner indicator
36
40
  - [Spot](https://ldls.vercel.app/?path=/docs/communication-spot--docs) - Icon container with background
41
+ - [Stepper](https://ldls.vercel.app/?path=/docs/communication-stepper--docs) - Multi-step progress indicator
37
42
  - [Subheader](https://ldls.vercel.app/?path=/docs/communication-subheader--docs) - Section subheader component
38
43
  - [Tag](https://ldls.vercel.app/?path=/docs/communication-tag--docs) - Label and tag component
39
44
  - [Tooltip](https://ldls.vercel.app/?path=/docs/communication-tooltip--docs) - Tooltip overlay component
@@ -45,6 +50,7 @@ Below is a complete list of all available Lumen React Native components. Click a
45
50
  - [SearchInput](https://ldls.vercel.app/?path=/docs/input-searchinput--docs) - Search input field
46
51
  - [TextInput](https://ldls.vercel.app/?path=/docs/input-textinput--docs) - Text input field
47
52
  - [Divider](https://ldls.vercel.app/?path=/docs/layout-divider--docs) - Visual separator line
53
+ - [NavBar](https://ldls.vercel.app/?path=/docs/navigation-navbar--docs) - Top navigation bar
48
54
  - [TabBar](https://ldls.vercel.app/?path=/docs/navigation-tabbar--docs) - Bottom tab navigation bar
49
55
  - [Checkbox](https://ldls.vercel.app/?path=/docs/selection-checkbox--docs) - Checkbox input for selections
50
56
  - [Select](https://ldls.vercel.app/?path=/docs/selection-select--docs) - Dropdown select component
package/chromatic.config.json ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "onlyChanged": true,
3
+ "projectId": "Project:6995e38fbeb7afd7cb1abfa0",
4
+ "storybookBaseDir": "libs/ui-rnative",
5
+ "zip": true,
6
+ "outputDir": "./storybook-static"
7
+ }
package/dist/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ledgerhq/lumen-ui-rnative",
3
- "version": "0.0.77",
3
+ "version": "0.0.78",
4
4
  "license": "Apache-2.0",
5
5
  "keywords": [
6
6
  "react-native",
package/dist/src/lib/Components/BaseInput/BaseInput.js CHANGED
@@ -103,15 +103,17 @@ const useStyles = ({ hasError, isFocused, isEditable, hasLabel, }) => {
103
103
  outline: 'none',
104
104
  },
105
105
  hasLabel && {
106
- paddingTop: t.spacings.s16,
107
- paddingBottom: t.spacings.s2,
106
+ paddingTop: t.spacings.s20,
107
+ paddingBottom: t.spacings.s4,
108
+ paddingHorizontal: 0,
108
109
  ...t.typographies.body2,
109
110
  },
111
+ RuntimeConstants.isIOS && hasLabel && { lineHeight: 0 },
112
+ RuntimeConstants.isAndroid && { includeFontPadding: false },
110
113
  !isEditable && {
111
114
  backgroundColor: t.colors.bg.disabled,
112
115
  color: t.colors.text.disabled,
113
116
  },
114
- RuntimeConstants.isIOS && { lineHeight: 0 },
115
117
  ]),
116
118
  errorContainer: {
117
119
  marginTop: t.spacings.s8,
@@ -156,7 +158,7 @@ const useFloatingLabelStyles = ({ floatingAnimation, hasContent, showClearButton
156
158
  const animatedLabel = {
157
159
  top: floatingAnimation.interpolate({
158
160
  inputRange: [0, 1],
159
- outputRange: [theme.spacings.s14, theme.spacings.s8],
161
+ outputRange: [theme.spacings.s14, theme.spacings.s6],
160
162
  }),
161
163
  fontSize: floatingAnimation.interpolate({
162
164
  inputRange: [0, 1],
package/dist/src/lib/Components/BottomSheet/BottomSheetHeader.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BottomSheetHeader.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/BottomSheetHeader.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AA+EjD,eAAO,MAAM,iBAAiB;uEAQ3B,sBAAsB;;CAkExB,CAAC"}
1
+ {"version":3,"file":"BottomSheetHeader.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/BottomSheetHeader.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AA+EjD,eAAO,MAAM,iBAAiB;uEAQ3B,sBAAsB;;CA+ExB,CAAC"}
package/dist/src/lib/Components/BottomSheet/BottomSheetHeader.js CHANGED
@@ -90,7 +90,7 @@ export const BottomSheetHeader = ({ lx, style, title, description, appearance =
90
90
  if (!title && !description && !onBack && hideCloseButton) {
91
91
  return null;
92
92
  }
93
- const titleComponent = hasTitleSection ? (_jsxs(Box, { style: styles.textWrapper, children: [title && _jsx(Text, { style: styles.title, children: title }), description && _jsx(Text, { style: styles.description, children: description })] })) : null;
94
- return (_jsxs(Box, { ...props, lx: lx, style: [styles.root, style], children: [_jsxs(Box, { style: styles.inner, children: [_jsx(Box, { style: styles.iconPlaceholder, children: onBack && (_jsx(IconButton, { accessibilityLabel: t('components.bottomSheetHeader.goBackAriaLabel'), size: 'xs', onPress: onBack, icon: ArrowLeft, appearance: 'transparent' })) }), appearance === 'compact' && titleComponent, _jsx(Box, { style: styles.iconPlaceholder, children: !hideCloseButton && (_jsx(IconButton, { accessibilityLabel: t('components.bottomSheetHeader.closeAriaLabel'), size: 'xs', onPress: handleClose, icon: Close, appearance: 'transparent' })) })] }), appearance === 'expanded' && titleComponent] }));
93
+ const titleComponent = hasTitleSection ? (_jsxs(Box, { style: styles.textWrapper, children: [title && (_jsx(Text, { style: styles.title, testID: 'bottom-sheet-header-title', children: title })), description && (_jsx(Text, { style: styles.description, testID: 'bottom-sheet-header-description', children: description }))] })) : null;
94
+ return (_jsxs(Box, { ...props, lx: lx, style: [styles.root, style], children: [_jsxs(Box, { style: styles.inner, children: [_jsx(Box, { style: styles.iconPlaceholder, children: onBack && (_jsx(IconButton, { accessibilityLabel: t('components.bottomSheetHeader.goBackAriaLabel'), size: 'xs', onPress: onBack, icon: ArrowLeft, appearance: 'transparent', testID: 'bottom-sheet-header-back-button' })) }), appearance === 'compact' && titleComponent, _jsx(Box, { style: styles.iconPlaceholder, children: !hideCloseButton && (_jsx(IconButton, { accessibilityLabel: t('components.bottomSheetHeader.closeAriaLabel'), size: 'xs', onPress: handleClose, icon: Close, appearance: 'transparent', testID: 'bottom-sheet-header-close-button' })) })] }), appearance === 'expanded' && titleComponent] }));
95
95
  };
96
96
  BottomSheetHeader.displayName = 'BottomSheetHeader';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ledgerhq/lumen-ui-rnative",
3
- "version": "0.0.78",
3
+ "version": "0.0.79",
4
4
  "license": "Apache-2.0",
5
5
  "keywords": [
6
6
  "react-native",
@@ -37,7 +37,7 @@
37
37
  "peerDependencies": {
38
38
  "@types/react": "^19.0.0",
39
39
  "@gorhom/bottom-sheet": "^5.0.0",
40
- "@ledgerhq/lumen-design-core": "0.0.54",
40
+ "@ledgerhq/lumen-design-core": "0.0.55",
41
41
  "react": "^19.0.0",
42
42
  "react-native": "~0.79.7",
43
43
  "react-native-reanimated": "^3.0.0",
package/src/lib/Components/BaseInput/BaseInput.tsx CHANGED
@@ -213,15 +213,17 @@ const useStyles = ({
213
213
  outline: 'none',
214
214
  },
215
215
  hasLabel && {
216
- paddingTop: t.spacings.s16,
217
- paddingBottom: t.spacings.s2,
216
+ paddingTop: t.spacings.s20,
217
+ paddingBottom: t.spacings.s4,
218
+ paddingHorizontal: 0,
218
219
  ...t.typographies.body2,
219
220
  },
221
+ RuntimeConstants.isIOS && hasLabel && { lineHeight: 0 },
222
+ RuntimeConstants.isAndroid && { includeFontPadding: false },
220
223
  !isEditable && {
221
224
  backgroundColor: t.colors.bg.disabled,
222
225
  color: t.colors.text.disabled,
223
226
  },
224
- RuntimeConstants.isIOS && { lineHeight: 0 },
225
227
  ]),
226
228
  errorContainer: {
227
229
  marginTop: t.spacings.s8,
@@ -286,7 +288,7 @@ const useFloatingLabelStyles = ({
286
288
  const animatedLabel = {
287
289
  top: floatingAnimation.interpolate({
288
290
  inputRange: [0, 1],
289
- outputRange: [theme.spacings.s14, theme.spacings.s8],
291
+ outputRange: [theme.spacings.s14, theme.spacings.s6],
290
292
  }),
291
293
  fontSize: floatingAnimation.interpolate({
292
294
  inputRange: [0, 1],
package/src/lib/Components/BottomSheet/BottomSheetHeader.tsx CHANGED
@@ -121,8 +121,19 @@ export const BottomSheetHeader = ({
121
121
 
122
122
  const titleComponent = hasTitleSection ? (
123
123
  <Box style={styles.textWrapper}>
124
- {title && <Text style={styles.title}>{title}</Text>}
125
- {description && <Text style={styles.description}>{description}</Text>}
124
+ {title && (
125
+ <Text style={styles.title} testID='bottom-sheet-header-title'>
126
+ {title}
127
+ </Text>
128
+ )}
129
+ {description && (
130
+ <Text
131
+ style={styles.description}
132
+ testID='bottom-sheet-header-description'
133
+ >
134
+ {description}
135
+ </Text>
136
+ )}
126
137
  </Box>
127
138
  ) : null;
128
139
 
@@ -139,6 +150,7 @@ export const BottomSheetHeader = ({
139
150
  onPress={onBack}
140
151
  icon={ArrowLeft}
141
152
  appearance='transparent'
153
+ testID='bottom-sheet-header-back-button'
142
154
  />
143
155
  )}
144
156
  </Box>
@@ -153,6 +165,7 @@ export const BottomSheetHeader = ({
153
165
  onPress={handleClose}
154
166
  icon={Close}
155
167
  appearance='transparent'
168
+ testID='bottom-sheet-header-close-button'
156
169
  />
157
170
  )}
158
171
  </Box>