ikualo-ui-kit-mobile 1.9.3 → 1.9.5

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 (6) hide show
  1. package/app.json +1 -1
  2. package/assets/icons/svgs/InfoIcon.tsx +14 -9
  3. package/assets/styles/elements/alert.ts +7 -6
  4. package/assets/styles/modules/register.ts +85 -93
  5. package/package.json +2 -1
  6. package/src/elements/alerts/Alert.tsx +44 -19
package/app.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "ikualo-app-2.0",
4
4
  "slug": "ikualo-app-20",
5
5
  "owner": "ikualo",
6
- "version": "1.9.3",
6
+ "version": "1.9.5",
7
7
  "orientation": "portrait",
8
8
  "icon": "./assets/icon.png",
9
9
  "userInterfaceStyle": "automatic",
package/assets/icons/svgs/InfoIcon.tsx CHANGED
@@ -1,11 +1,16 @@
1
- import Svg, {Path } from "react-native-svg";
2
- import useStore from "../../../src/store";
1
+ import Svg, { Path } from 'react-native-svg';
2
+ import useStore from '../../../src/store';
3
3
 
4
- export const InfoIcon = (props:{style?:any}) => {
5
- const theme = useStore().theme
4
+ export const InfoIcon = (props: { style?: any }) => {
5
+ const theme = useStore().theme;
6
6
 
7
- return (
8
- <Svg width="20" height="20" viewBox="0 0 20 20" fill="none" >
9
- <Path id="Vector" d="M9 5H11V7H9V5ZM10 15C10.55 15 11 14.55 11 14V10C11 9.45 10.55 9 10 9C9.45 9 9 9.45 9 10V14C9 14.55 9.45 15 10 15ZM10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18Z" fill={theme.colors.info}/>
10
- </Svg>)
11
- };
7
+ return (
8
+ <Svg width="20" height="20" viewBox="0 0 20 20" fill="none">
9
+ <Path
10
+ id="Vector"
11
+ d="M9 5H11V7H9V5ZM10 15C10.55 15 11 14.55 11 14V10C11 9.45 10.55 9 10 9C9.45 9 9 9.45 9 10V14C9 14.55 9.45 15 10 15ZM10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18Z"
12
+ fill={theme.colors.freezed}
13
+ />
14
+ </Svg>
15
+ );
16
+ };
package/assets/styles/elements/alert.ts CHANGED
@@ -8,6 +8,7 @@ export const getStyleAlerts = (theme: ITheme) =>
8
8
  borderRadius: 4,
9
9
  borderLeftWidth: 8,
10
10
  padding: 16,
11
+ overflow: 'hidden',
11
12
  },
12
13
  'alert--absolute': {
13
14
  position: 'absolute',
@@ -22,24 +23,24 @@ export const getStyleAlerts = (theme: ITheme) =>
22
23
  width: '100%',
23
24
  },
24
25
  'alert--info': {
25
- backgroundColor: theme.colors.background_alert,
26
- borderLeftColor: theme.colors.info,
26
+ borderLeftColor: theme.colors.freezed,
27
27
  borderRadius: 16,
28
+ overflow: 'hidden',
28
29
  },
29
30
  'alert--warning': {
30
- backgroundColor: theme.colors.background_alert,
31
- borderLeftColor: theme.colors.warning,
31
+ borderLeftColor: theme.colors.orange_400,
32
32
  borderRadius: 16,
33
+ overflow: 'hidden',
33
34
  },
34
35
  'alert--success': {
35
- backgroundColor: theme.colors.background_alert,
36
36
  borderLeftColor: theme.colors.success,
37
37
  borderRadius: 16,
38
+ overflow: 'hidden',
38
39
  },
39
40
  'alert--error': {
40
- backgroundColor: theme.colors.background_alert,
41
41
  borderLeftColor: theme.colors.error,
42
42
  borderRadius: 16,
43
+ overflow: 'hidden',
43
44
  },
44
45
  'alert-container-text': {
45
46
  flexDirection: 'row',
package/assets/styles/modules/register.ts CHANGED
@@ -1,97 +1,89 @@
1
1
  import { StyleSheet } from 'react-native';
2
2
  import { ITheme } from '../../../src/models';
3
- export const getStyleRegisterContent =(theme: ITheme) =>StyleSheet.create({
4
- 'register-content-container': {
5
- marginTop: 24,
6
- },
3
+ export const getStyleRegisterContent = (theme: ITheme) =>
4
+ StyleSheet.create({
5
+ 'register-content-container': {
6
+ marginTop: 24,
7
+ },
7
8
 
8
- 'register-content-title': {
9
- fontSize: 20,
10
- fontFamily: 'MontserratSemiBold',
11
- lineHeight: 30,
12
- color: theme.colors.boldDark,
13
- },
14
- 'register-content-description': {
15
- fontSize: 14,
16
- lineHeight: 21,
17
- color: theme.colors.lightBlack,
18
- marginTop: 24,
19
- fontFamily: 'MontserratRegular',
20
- },
21
- 'register-content-description--bold': {
22
- fontWeight: 'bold',
23
- fontSize: 14,
24
- lineHeight: 21,
25
- color: theme.colors.lightBlack,
26
- },
27
- 'progress-bar-container': {
28
- justifyContent: 'space-between',
29
- flexDirection: 'row',
30
- width: '100%',
31
- marginTop: 32,
32
- },
33
- 'register-email-input': {
34
- marginTop: 32,
35
- },
36
- 'register-email-btn': { position: 'absolute', bottom: 32, right: 16, left: 16 },
37
-
38
- 'register-password-title': {
39
- color: theme.colors.darkBlue,
40
- fontFamily: 'MontserratSemiBold',
41
- fontSize: 20,
42
- lineHeight: 30,
43
- },
44
- 'register-password-description': {
45
- color: theme.colors.lightBlack,
46
- fontFamily: 'MontserratRegular',
47
- lineHeight: 21,
48
- fontSize: 14,
49
- marginTop: 24,
50
- },
51
- 'register-password-inputs': {
52
- marginTop: 32,
53
- },
54
- 'password-validation': {
55
- position: 'absolute',
56
- zIndex: 50,
57
- top: -145,
58
- right: 2,
59
- borderRadius: 16,
60
- backgroundColor: theme.colors.white,
61
- padding: 16,
62
- borderWidth: 0.5,
63
- borderColor: theme.colors.lightPrimary,
64
- },
65
- 'password-options-1': {
66
- marginTop: 3,
67
- flexDirection: 'row',
68
- alignItems: 'center',
69
- gap: 16,
70
- },
71
- 'password-options-title': {
72
- color: theme.colors.lightBlack,
73
- fontWeight: 'bold',
74
- fontSize: 16,
75
- lineHeight: 19.5,
76
- },
77
- 'password-options': {
78
- color: theme.colors.lightBlack,
79
- fontFamily: 'MontserratLight',
80
- fontSize: 14,
81
- lineHeight: 17.07,
82
- },
83
- 'password-vector': {
84
- resizeMode: 'contain',
85
- },
86
- 'register-phone-text': {
87
- marginBottom: 24,
88
- },
89
- 'register-alert-text--error': {
90
- fontFamily: 'MontserratRegular',
91
- fontSize: 12,
92
- color: theme.colors.lightBlack,
93
- },
94
- 'register-password-margin-top': { marginTop: 32 },
95
- 'register-password-margin-bottom': { marginVertical: 32 },
96
- });
9
+ 'register-content-title': {
10
+ fontSize: 20,
11
+ fontFamily: 'MontserratSemiBold',
12
+ lineHeight: 30,
13
+ },
14
+ 'register-content-description': {
15
+ fontSize: 14,
16
+ lineHeight: 21,
17
+ marginTop: 24,
18
+ fontFamily: 'MontserratRegular',
19
+ },
20
+ 'register-content-description--bold': {
21
+ fontWeight: 'bold',
22
+ fontSize: 14,
23
+ lineHeight: 21,
24
+ },
25
+ 'progress-bar-container': {
26
+ justifyContent: 'space-between',
27
+ flexDirection: 'row',
28
+ width: '100%',
29
+ marginTop: 32,
30
+ },
31
+ 'register-email-input': {
32
+ marginTop: 32,
33
+ },
34
+ 'register-email-btn': { position: 'absolute', bottom: 32, right: 16, left: 16 },
97
35
 
36
+ 'register-password-title': {
37
+ fontFamily: 'MontserratSemiBold',
38
+ fontSize: 20,
39
+ lineHeight: 30,
40
+ },
41
+ 'register-password-description': {
42
+ fontFamily: 'MontserratRegular',
43
+ lineHeight: 21,
44
+ fontSize: 14,
45
+ marginTop: 24,
46
+ },
47
+ 'register-password-inputs': {
48
+ marginTop: 32,
49
+ },
50
+ 'password-validation': {
51
+ position: 'absolute',
52
+ zIndex: 50,
53
+ top: -145,
54
+ right: 2,
55
+ borderRadius: 16,
56
+ backgroundColor: theme.colors.white_50,
57
+ padding: 16,
58
+ borderWidth: 0.5,
59
+ borderColor: theme.colors.primary_300,
60
+ },
61
+ 'password-options-1': {
62
+ marginTop: 3,
63
+ flexDirection: 'row',
64
+ alignItems: 'center',
65
+ gap: 16,
66
+ },
67
+ 'password-options-title': {
68
+ fontWeight: 'bold',
69
+ fontSize: 16,
70
+ lineHeight: 19.5,
71
+ },
72
+ 'password-options': {
73
+ fontFamily: 'MontserratLight',
74
+ fontSize: 14,
75
+ lineHeight: 17.07,
76
+ },
77
+ 'password-vector': {
78
+ resizeMode: 'contain',
79
+ },
80
+ 'register-phone-text': {
81
+ marginBottom: 24,
82
+ },
83
+ 'register-alert-text--error': {
84
+ fontFamily: 'MontserratRegular',
85
+ fontSize: 12,
86
+ },
87
+ 'register-password-margin-top': { marginTop: 32 },
88
+ 'register-password-margin-bottom': { marginVertical: 32 },
89
+ });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ikualo-ui-kit-mobile",
3
- "version": "1.9.3",
3
+ "version": "1.9.5",
4
4
  "main": "src/index.ts",
5
5
  "scripts": {
6
6
  "start": "expo start",
@@ -16,6 +16,7 @@
16
16
  "@react-navigation/stack": "^6.3.29",
17
17
  "expo": "~52.0.20",
18
18
  "expo-application": "~6.0.1",
19
+ "expo-blur": "~14.0.3",
19
20
  "expo-linear-gradient": "~14.0.1",
20
21
  "expo-updates": "~0.26.10",
21
22
  "react": "^18.3.1",
package/src/elements/alerts/Alert.tsx CHANGED
@@ -7,6 +7,7 @@ import { IFAlertInfo } from '../../models';
7
7
  import { InfoIcon, SuccessIcon, WarningIcon } from '../../../assets/icons/svgs';
8
8
  import { Text } from '../../';
9
9
  import MaterialIcons from '@expo/vector-icons/MaterialIcons';
10
+ import { BlurView } from 'expo-blur';
10
11
 
11
12
  export const Alert = (props: IFAlertInfo) => {
12
13
  const { text, title, type, onClose, miliSeconds, customStyles, position = 'absolute' } = props;
@@ -30,7 +31,10 @@ export const Alert = (props: IFAlertInfo) => {
30
31
  <>
31
32
  {position === 'absolute' ? (
32
33
  <Portal>
33
- <Animated.View
34
+ <BlurView
35
+ intensity={80}
36
+ tint={theme.dark ? 'light' : 'dark'}
37
+ experimentalBlurMethod="dimezisBlurView"
34
38
  style={[
35
39
  styleAlerts['alert'],
36
40
  styleAlerts['alert--absolute'],
@@ -38,32 +42,53 @@ export const Alert = (props: IFAlertInfo) => {
38
42
  customStyles,
39
43
  ]}
40
44
  >
41
- <View style={styleAlerts['alert-container-text']}>
42
- {icons.find((icon) => icon.name === type)?.icon}
43
- <Text fontWeight={'MontserratBold700'} fontSize={14} color={theme.colors.white_50}>
44
- {title}
45
- </Text>
46
- </View>
47
- {text && <View style={styleAlerts['alert-body']}>{text}</View>}
48
- </Animated.View>
45
+ <Animated.View
46
+ style={[
47
+ styleAlerts['alert'],
48
+ styleAlerts['alert--absolute'],
49
+ styleAlerts[`alert--${type}`],
50
+ customStyles,
51
+ ]}
52
+ >
53
+ <View style={styleAlerts['alert-container-text']}>
54
+ {icons.find((icon) => icon.name === type)?.icon}
55
+ <Text fontWeight={'MontserratBold700'} fontSize={14} color={theme.colors.white_50}>
56
+ {title}
57
+ </Text>
58
+ </View>
59
+ {text && <View style={styleAlerts['alert-body']}>{text}</View>}
60
+ </Animated.View>
61
+ </BlurView>
49
62
  </Portal>
50
63
  ) : (
51
- <Animated.View
64
+ <BlurView
65
+ intensity={80}
66
+ tint={theme.dark ? 'light' : 'dark'}
67
+ experimentalBlurMethod="dimezisBlurView"
52
68
  style={[
53
69
  styleAlerts['alert'],
54
- styleAlerts['alert--relative'],
70
+ styleAlerts['alert--absolute'],
55
71
  styleAlerts[`alert--${type}`],
56
72
  customStyles,
57
73
  ]}
58
74
  >
59
- <View style={styleAlerts['alert-container-text']}>
60
- {icons.find((icon) => icon.name === type)?.icon}
61
- <Text fontWeight={'MontserratBold700'} fontSize={14} color={theme.colors.white_50}>
62
- {title}
63
- </Text>
64
- </View>
65
- {text && <View style={styleAlerts['alert-body']}>{text}</View>}
66
- </Animated.View>
75
+ <Animated.View
76
+ style={[
77
+ styleAlerts['alert'],
78
+ styleAlerts['alert--relative'],
79
+ styleAlerts[`alert--${type}`],
80
+ customStyles,
81
+ ]}
82
+ >
83
+ <View style={styleAlerts['alert-container-text']}>
84
+ {icons.find((icon) => icon.name === type)?.icon}
85
+ <Text fontWeight={'MontserratBold700'} fontSize={14} color={theme.colors.white_50}>
86
+ {title}
87
+ </Text>
88
+ </View>
89
+ {text && <View style={styleAlerts['alert-body']}>{text}</View>}
90
+ </Animated.View>
91
+ </BlurView>
67
92
  )}
68
93
  </>
69
94
  );