@hero-design/rn 8.24.0 → 8.25.1

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 (29) hide show
  1. package/.turbo/turbo-build.log +9 -9
  2. package/es/index.js +111 -60
  3. package/lib/index.js +110 -59
  4. package/package.json +5 -5
  5. package/src/components/Carousel/CardCarousel.tsx +23 -7
  6. package/src/components/Carousel/__tests__/CardCarousel.spec.tsx +177 -70
  7. package/src/components/Carousel/__tests__/__snapshots__/CardCarousel.spec.tsx.snap +294 -1
  8. package/src/components/Collapse/index.tsx +11 -10
  9. package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap +21 -15
  10. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap +7 -5
  11. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap +7 -5
  12. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +7 -5
  13. package/src/components/Error/StyledError.tsx +2 -0
  14. package/src/components/Error/__tests__/__snapshots__/index.spec.tsx.snap +8 -0
  15. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +28 -20
  16. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +28 -20
  17. package/src/components/Spinner/AnimatedSpinner.tsx +2 -2
  18. package/src/components/TextInput/StyledTextInput.tsx +4 -0
  19. package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap +21 -1
  20. package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +112 -78
  21. package/src/components/TextInput/index.tsx +1 -4
  22. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap +14 -10
  23. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +14 -10
  24. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +9 -1
  25. package/src/theme/components/error.ts +6 -1
  26. package/src/theme/components/textInput.ts +16 -2
  27. package/types/components/Collapse/index.d.ts +1 -1
  28. package/types/theme/components/error.d.ts +4 -0
  29. package/types/theme/components/textInput.d.ts +4 -0
package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap CHANGED
@@ -88,7 +88,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
88
88
  "left": 16,
89
89
  "paddingHorizontal": 4,
90
90
  "position": "absolute",
91
- "top": -10,
91
+ "top": -5,
92
92
  "zIndex": 1,
93
93
  },
94
94
  Object {
@@ -105,13 +105,15 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
105
105
  Object {
106
106
  "color": "#001f23",
107
107
  "fontFamily": "BeVietnamPro-Regular",
108
- "fontSize": 12,
109
- "letterSpacing": 0.36,
110
- "lineHeight": 20,
108
+ "fontSize": 14,
109
+ "letterSpacing": 0.42,
110
+ "lineHeight": 22,
111
111
  },
112
112
  Array [
113
113
  Object {
114
114
  "color": "#001f23",
115
+ "fontSize": 12,
116
+ "lineHeight": 12,
115
117
  },
116
118
  Object {
117
119
  "backgroundColor": "#ffffff",
@@ -120,7 +122,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
120
122
  ]
121
123
  }
122
124
  testID="input-label"
123
- themeFontSize="small"
125
+ themeFontSize="medium"
124
126
  themeFontWeight="regular"
125
127
  themeIntent="body"
126
128
  themeState="filled"
@@ -323,7 +325,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
323
325
  "left": 16,
324
326
  "paddingHorizontal": 4,
325
327
  "position": "absolute",
326
- "top": -10,
328
+ "top": -5,
327
329
  "zIndex": 1,
328
330
  },
329
331
  Object {
@@ -340,13 +342,15 @@ exports[`TimePickerAndroid renders correctly 1`] = `
340
342
  Object {
341
343
  "color": "#001f23",
342
344
  "fontFamily": "BeVietnamPro-Regular",
343
- "fontSize": 12,
344
- "letterSpacing": 0.36,
345
- "lineHeight": 20,
345
+ "fontSize": 14,
346
+ "letterSpacing": 0.42,
347
+ "lineHeight": 22,
346
348
  },
347
349
  Array [
348
350
  Object {
349
351
  "color": "#001f23",
352
+ "fontSize": 12,
353
+ "lineHeight": 12,
350
354
  },
351
355
  Object {
352
356
  "backgroundColor": "#ffffff",
@@ -355,7 +359,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
355
359
  ]
356
360
  }
357
361
  testID="input-label"
358
- themeFontSize="small"
362
+ themeFontSize="medium"
359
363
  themeFontWeight="regular"
360
364
  themeIntent="body"
361
365
  themeState="filled"
package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap CHANGED
@@ -88,7 +88,7 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
88
88
  "left": 16,
89
89
  "paddingHorizontal": 4,
90
90
  "position": "absolute",
91
- "top": -10,
91
+ "top": -5,
92
92
  "zIndex": 1,
93
93
  },
94
94
  Object {
@@ -105,13 +105,15 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
105
105
  Object {
106
106
  "color": "#001f23",
107
107
  "fontFamily": "BeVietnamPro-Regular",
108
- "fontSize": 12,
109
- "letterSpacing": 0.36,
110
- "lineHeight": 20,
108
+ "fontSize": 14,
109
+ "letterSpacing": 0.42,
110
+ "lineHeight": 22,
111
111
  },
112
112
  Array [
113
113
  Object {
114
114
  "color": "#001f23",
115
+ "fontSize": 12,
116
+ "lineHeight": 12,
115
117
  },
116
118
  Object {
117
119
  "backgroundColor": "#ffffff",
@@ -120,7 +122,7 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
120
122
  ]
121
123
  }
122
124
  testID="input-label"
123
- themeFontSize="small"
125
+ themeFontSize="medium"
124
126
  themeFontWeight="regular"
125
127
  themeIntent="body"
126
128
  themeState="filled"
@@ -323,7 +325,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
323
325
  "left": 16,
324
326
  "paddingHorizontal": 4,
325
327
  "position": "absolute",
326
- "top": -10,
328
+ "top": -5,
327
329
  "zIndex": 1,
328
330
  },
329
331
  Object {
@@ -340,13 +342,15 @@ exports[`TimePickerIOS renders correctly 1`] = `
340
342
  Object {
341
343
  "color": "#001f23",
342
344
  "fontFamily": "BeVietnamPro-Regular",
343
- "fontSize": 12,
344
- "letterSpacing": 0.36,
345
- "lineHeight": 20,
345
+ "fontSize": 14,
346
+ "letterSpacing": 0.42,
347
+ "lineHeight": 22,
346
348
  },
347
349
  Array [
348
350
  Object {
349
351
  "color": "#001f23",
352
+ "fontSize": 12,
353
+ "lineHeight": 12,
350
354
  },
351
355
  Object {
352
356
  "backgroundColor": "#ffffff",
@@ -355,7 +359,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
355
359
  ]
356
360
  }
357
361
  testID="input-label"
358
- themeFontSize="small"
362
+ themeFontSize="medium"
359
363
  themeFontWeight="regular"
360
364
  themeIntent="body"
361
365
  themeState="filled"
package/src/theme/__tests__/__snapshots__/index.spec.ts.snap CHANGED
@@ -436,6 +436,10 @@ Object {
436
436
  "description": "RebondGrotesque",
437
437
  "title": "RebondGrotesque-SemiBold",
438
438
  },
439
+ "lineHeight": Object {
440
+ "description": 26,
441
+ "title": 32,
442
+ },
439
443
  "sizes": Object {
440
444
  "image": 176,
441
445
  },
@@ -980,10 +984,14 @@ Object {
980
984
  "labelInsideTextInput": 16,
981
985
  "maxLength": 12,
982
986
  "text": 16,
987
+ "topLabel": 12,
983
988
  },
984
989
  "fonts": Object {
985
990
  "text": "BeVietnamPro-Regular",
986
991
  },
992
+ "lineHeights": Object {
993
+ "topLabel": 12,
994
+ },
987
995
  "radii": Object {
988
996
  "container": 8,
989
997
  },
@@ -1003,7 +1011,7 @@ Object {
1003
1011
  "labelInsideTextInputMarginTop": -2,
1004
1012
  "labelLeft": 16,
1005
1013
  "labelPaddingBottom": 8,
1006
- "labelTop": -10,
1014
+ "labelTop": -5,
1007
1015
  "maxLengthLabelMarginLeft": 4,
1008
1016
  },
1009
1017
  },
package/src/theme/components/error.ts CHANGED
@@ -34,7 +34,12 @@ const getErrorTheme = (theme: GlobalTheme) => {
34
34
  description: theme.fonts.playful.regular,
35
35
  };
36
36
 
37
- return { fontSizes, colors, sizes, space, fonts };
37
+ const lineHeight = {
38
+ title: theme.lineHeights.xxxlarge,
39
+ description: theme.lineHeights.xlarge,
40
+ };
41
+
42
+ return { fontSizes, colors, sizes, space, fonts, lineHeight };
38
43
  };
39
44
 
40
45
  export default getErrorTheme;
package/src/theme/components/textInput.ts CHANGED
@@ -46,7 +46,7 @@ const getTextInputTheme = (theme: GlobalTheme) => {
46
46
  const space = {
47
47
  containerPadding: theme.space.medium,
48
48
  labelLeft: theme.space.medium,
49
- labelTop: theme.lineHeights.small / -2,
49
+ labelTop: theme.lineHeights.small / -4,
50
50
  labelPaddingBottom: theme.space.small,
51
51
  labelHorizontalPadding: theme.space.xsmall,
52
52
  inputHorizontalMargin: theme.space.small,
@@ -68,6 +68,7 @@ const getTextInputTheme = (theme: GlobalTheme) => {
68
68
  error: theme.fontSizes.small,
69
69
  maxLength: theme.fontSizes.small,
70
70
  asteriskLabel: theme.fontSizes.large,
71
+ topLabel: theme.fontSizes.small,
71
72
  };
72
73
 
73
74
  const borderWidths = {
@@ -87,7 +88,20 @@ const getTextInputTheme = (theme: GlobalTheme) => {
87
88
  textInputMaxHeight: theme.sizes['15xlarge'],
88
89
  };
89
90
 
90
- return { colors, space, fonts, fontSizes, borderWidths, radii, sizes };
91
+ const lineHeights = {
92
+ topLabel: theme.lineHeights.large / 2,
93
+ };
94
+
95
+ return {
96
+ colors,
97
+ space,
98
+ fonts,
99
+ fontSizes,
100
+ borderWidths,
101
+ radii,
102
+ sizes,
103
+ lineHeights,
104
+ };
91
105
  };
92
106
 
93
107
  export default getTextInputTheme;
package/types/components/Collapse/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
2
1
  import type { ReactNode } from 'react';
2
+ import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
3
3
  export interface CollapseProps extends ViewProps {
4
4
  children: ReactNode;
5
5
  /**
package/types/theme/components/error.d.ts CHANGED
@@ -28,5 +28,9 @@ declare const getErrorTheme: (theme: GlobalTheme) => {
28
28
  title: string;
29
29
  description: string;
30
30
  };
31
+ lineHeight: {
32
+ title: number;
33
+ description: number;
34
+ };
31
35
  };
32
36
  export default getErrorTheme;
package/types/theme/components/textInput.d.ts CHANGED
@@ -64,6 +64,7 @@ declare const getTextInputTheme: (theme: GlobalTheme) => {
64
64
  error: number;
65
65
  maxLength: number;
66
66
  asteriskLabel: number;
67
+ topLabel: number;
67
68
  };
68
69
  borderWidths: {
69
70
  container: {
@@ -79,5 +80,8 @@ declare const getTextInputTheme: (theme: GlobalTheme) => {
79
80
  textareaHeight: number;
80
81
  textInputMaxHeight: number;
81
82
  };
83
+ lineHeights: {
84
+ topLabel: number;
85
+ };
82
86
  };
83
87
  export default getTextInputTheme;