ikualo-ui-kit-mobile 0.0.2

package/assets/styles/modules/identityValidation.ts

@@ -0,0 +1,88 @@
+import { StyleSheet } from 'react-native';
+import { theme } from '../../../src/config/paper.config';
+
+export const styleIdentityValidation = StyleSheet.create({
+  'identity-content': {
+    marginTop: 24,
+  },
+  'identity-validation-image': {
+    alignSelf: 'center',
+    marginTop: 26,
+  },
+  'identity-content-title': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 20,
+    lineHeight: 30,
+    color: theme.colors.boldDark,
+  },
+  'identity-content-description': {
+    fontFamily: 'MontserratRegular',
+    fontSize: 14,
+    lineHeight: 21,
+    color: theme.colors.lightBlack,
+    textAlign: 'justify',
+    marginTop: 24,
+  },
+  'identity-cards': {
+    marginTop: 24,
+  },
+  'identity-card-component': {
+    borderRadius: 8,
+  },
+  'identity-card-title': {
+    flexDirection: 'row',
+    alignContent: 'center',
+  },
+  'identity-card-image': {
+    marginRight: 16,
+    marginBottom: 8,
+  },
+  'identity-link': {
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginVertical: 16,
+  },
+  'identity-link-text': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 12,
+    lineHeight: 18,
+    textAlign: 'center',
+    color: theme.colors.lightBlack,
+    marginBottom: 32,
+  },
+  'identity-link-hyperlink': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 12,
+    lineHeight: 18,
+    color: theme.colors.primary,
+  },
+  'identity-btn': {
+    position: 'absolute',
+    bottom: 32,
+    right: 16,
+    left: 16,
+  },
+  'identity-failed-title--bold': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 18,
+    color: theme.colors.primary,
+    marginTop: 16,
+  },
+  'identity-failed-title': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 18,
+    color: theme.colors.boldBlack,
+    marginTop: 16,
+  },
+  'identity-failed-description': {
+    fontFamily: 'MontserratRegular',
+    fontSize: 14,
+    color: theme.colors.boldBlack,
+    marginVertical: 16,
+  },
+  'identity-failed-description-only': {
+    fontFamily: 'MontserratRegular',
+    fontSize: 14,
+    color: theme.colors.boldBlack,
+  },
+});

package/assets/styles/modules/legalInfo.ts

@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native';
+import { theme } from '../../../src/config/paper.config';
+
+const styleLegalInfo = StyleSheet.create({
+  'legal-info': { flex: 1 },
+  'legal-info-description': {
+    color: theme.colors.text,
+    fontFamily: 'MontserratLight',
+    fontSize: 14,
+    marginTop: 24,
+  },
+  'legal-info-cards': { gap: 8, marginTop: 32 },
+  'legal-info-check': { flexDirection: 'row', alignItems: 'center', marginBottom: 24 },
+  'legal-info-check-text': {
+    fontSize: 14,
+    color: theme.colors.text,
+    fontFamily: 'MontserratLight',
+    marginLeft: 8,
+    flexWrap: 'wrap',
+  },
+});
+
+export { styleLegalInfo };

package/assets/styles/modules/listGroup.ts

@@ -0,0 +1,57 @@
+import { StyleSheet } from 'react-native'
+import { theme } from '../../../src/config/paper.config'
+
+export const styleListGroup = StyleSheet.create({
+  "title":{
+    color: theme.colors.blackText,
+    fontFamily: 'MontserratRegular',
+    fontSize: 12,
+    lineHeight: 18
+  },
+  'accordion' :{
+    backgroundColor: theme.colors.white,
+    borderWidth: 0.5,
+    gap: 2,
+    borderColor: theme.colors.lightPrimary,
+    shadowColor: theme.colors.lightPrimary,
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.5, 
+    shadowRadius: 6,
+    elevation: 4, 
+  },
+  'container' :{
+    paddingTop: 8,
+    paddingRight: 16,
+    paddingBottom: 8,
+    paddingLeft: 16,
+    gap: 16,
+    backgroundColor: theme.colors.white,
+    borderColor: theme.colors.lightPrimary,
+    shadowColor: theme.colors.lightPrimary,
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.5, 
+    shadowRadius: 6,
+    elevation: 4, 
+    borderWidth: 0.5,
+  },
+  'rippleColor':{
+    color: theme.colors.transparent
+  },
+  'roundedTop':{
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+  },
+  "borderless":{
+    borderBottomRightRadius: 0,
+    borderBottomLeftRadius: 0,
+  },
+  "roundedBottom":{
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8,
+  },
+  'containerRoundedBottom': {
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8,
+  },
+  
+})

package/assets/styles/modules/login.ts

@@ -0,0 +1,159 @@
+import { StyleSheet } from 'react-native';
+import { theme } from '../../../src/config/paper.config';
+
+const stylesLogin = StyleSheet.create({
+  'btn-contained': {
+    borderRadius: 8,
+  },
+  'btn-contained--primary': {
+    backgroundColor: theme.colors.primary,
+    color: theme.colors.white,
+  },
+  'btn-contained--secondary': {
+    backgroundColor: theme.colors.secondary,
+    color: theme.colors.black,
+  },
+  'btn-contained--dark': {
+    backgroundColor: theme.colors.dark,
+    color: theme.colors.white,
+  },
+  'btn-contained--light': {
+    backgroundColor: theme.colors.light,
+    color: theme.colors.black,
+  },
+  'btn-contained--disabled': {
+    backgroundColor: theme.colors.disabled,
+    color: theme.colors.white,
+  },
+  'btn-contained--sm': {
+    padding: 0,
+    fontSize: 12,
+  },
+  'btn-contained--md': {
+    padding: 2,
+    fontSize: 14,
+  },
+  'btn-contained--lg': {
+    padding: 4,
+    fontSize: 16,
+  },
+  'btn-contained--xl': {
+    padding: 5,
+    fontSize: 16,
+  },
+  landing: { flex: 1 },
+  'landing-logo': { height: 46, width: '100%', marginBottom: 24, objectFit: 'contain' },
+  'landing-title': {
+    textAlign: 'center',
+    color: 'black',
+    fontSize: 20,
+    marginBottom: 16,
+    fontFamily: 'MontserratBold',
+  },
+  'landing-text-description': {
+    textAlign: 'center',
+    color: 'black',
+    fontSize: 16,
+    fontFamily: 'MontserratLight',
+  },
+  'landing-text-description--bold': {
+    color: theme.colors.primary,
+    fontSize: 16,
+    fontFamily: 'MontserratExtraBold',
+  },
+  'landing-btn-login': { width: '100%', marginBottom: 16, height: 56 },
+  'landing-btn-create': { width: '100%', height: 56 },
+  'signin-help': {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    justifyContent: 'flex-end',
+    marginTop: 16,
+  },
+  'signin-help-text': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 12,
+    color: theme.colors.darkBlue,
+  },
+  'signin-biometric': { width: '100%', marginTop: 32, alignItems: 'center' },
+  'signin-biometric-content-btn': {
+    backgroundColor: theme.colors.black,
+    height: 44,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 16,
+    padding: 10,
+    gap: 4,
+  },
+  'signin-biometric-style-btn': { width: 'auto', borderRadius: 16 },
+  'signin-biometric-label-btn': {
+    color: theme.colors.lightBlue,
+    width: 'auto',
+    backgroundColor: 'transparent',
+    fontSize: 10,
+    fontFamily: 'MontserratSemiBold',
+  },
+  'signin-body': {
+    marginTop: 32,
+  },
+  'signin-logo': {
+    width: 300,
+    height: 80,
+    alignSelf: 'center',
+    flexDirection: 'row',
+    marginTop: 32,
+  },
+  'signin-forget-password': {
+    textAlign: 'center',
+    color: theme.colors.darkBlue,
+    fontFamily: 'MontserratSemiBold',
+    marginTop: 32,
+  },
+  'signin-create-account-title': {
+    fontSize: 12,
+    color: theme.colors.boldBlack,
+    fontFamily: 'MontserratSemiBold',
+    textAlign: 'center',
+  },
+  'signin-create-account-description': {
+    fontSize: 12,
+    color: theme.colors.boldBlack,
+    fontFamily: 'MontserratRegular',
+    textAlign: 'center',
+  },
+  'signin-create-account-btn-label': { fontSize: 16 },
+  'signin-create-account-btn-style': { marginVertical: 32 },
+  'signin-alert-error--bold': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 12,
+    color: theme.colors.lightBlack,
+  },
+  'signin-alert-error--light': {
+    fontFamily: 'MontserratRegular',
+    fontSize: 12,
+    color: theme.colors.lightBlack,
+  },
+  'signin-text-title-biometric': {
+    fontFamily: 'MontserratBold',
+    fontSize: 20,
+    color: theme.colors.boldBlack,
+    marginTop: 60,
+    marginBottom: 16,
+    width: '100%',
+    textAlign: 'center',
+  },
+  'signin-text-description-biometric--regular': {
+    fontFamily: 'MontserratLight',
+    fontSize: 18,
+    color: theme.colors.boldBlack,
+    textAlign: 'center',
+  },
+  'signin-text-description-biometric--bold': {
+    fontFamily: 'MontserratRegular',
+    fontSize: 18,
+    color: theme.colors.primary,
+  },
+  'signin-container-image': { flex: 1, justifyContent: 'center', alignItems: 'center' },
+});
+export { stylesLogin };

package/assets/styles/modules/newDevice.ts

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native';
+import { theme } from '../../../src/config/paper.config';
+
+export const styleNewDevice = StyleSheet.create({
+  'newDevice':{
+    marginTop: 16
+  },
+  'newDevice-description': {
+    fontFamily: 'MontserratLight',
+    fontSize: 14,
+    lineHeight: 17.07,
+    color: theme.colors.lightBlack,
+    textAlign: 'left',
+  },
+  'newDevice-Cards':{
+    marginTop: 24,
+  },
+  'newDevice-Card-opt2':{
+    marginTop: 8,
+  },
+
+});

package/assets/styles/modules/otp.ts

@@ -0,0 +1,114 @@
+import { StyleSheet } from 'react-native';
+import { theme } from '../../../src/config/paper.config';
+export const stylesOtp = StyleSheet.create({
+  'otp-inputs': {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    padding: 16,
+    marginHorizontal: 0,
+    marginTop: 32,
+  },
+  'otp-inputs--focused': {
+    backgroundColor: theme.colors.lightPrimary,
+    borderTopLeftRadius: 4,
+    borderTopRightRadius: 4,
+    paddingBottom: -10,
+  },
+  'otp-inputs--invalid': {
+    backgroundColor: theme.colors.lightRed,
+    borderTopLeftRadius: 4,
+    borderTopRightRadius: 4,
+  },
+  'otp-container-temp': {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    marginTop: 32,
+  },
+  'otp-timer': {
+    fontSize: 18,
+    color: theme.colors.text,
+    margin: 16,
+    fontFamily: 'MontserratSemiBold',
+  },
+  'otp-text-resend': {
+    color: theme.colors.primary,
+    fontSize: 12,
+    fontWeight: 700,
+    textAlign: 'center',
+    alignSelf: 'center',
+    marginRight: 12,
+  },
+  'otp-text-resend--disabled': {
+    color: theme.colors.disabled,
+  },
+  'otp-text-question': {
+    color: theme.colors.text,
+    fontWeight: 600,
+    paddingTop: 32,
+  },
+  'otp-container': {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+  },
+  'otp-info-email': {
+    flexDirection: 'row',
+  },
+  'otp-info-email-text': {
+    color: theme.colors.text,
+    marginHorizontal: 16,
+    marginBottom: 16,
+  },
+  'otp-info-body': {
+    flexDirection: 'column',
+    marginBottom: 16,
+  },
+  'otp-help-description': {
+    color: theme.colors.text,
+    fontSize: 14,
+  },
+  'otp-help-cards': {
+    marginTop: 16,
+  },
+  'otp-alert-text': { fontSize: 12, fontFamily: 'MontserratRegular', color: theme.colors.text },
+  'otp-alert-text--bold': { fontFamily: 'MontserratSemiBold', color: theme.colors.text },
+  'otp-helper': {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: -16,
+    backgroundColor: theme.colors.white,
+    gap: 16,
+    width: '100%',
+  },
+  'otp-helper-text--error': { fontSize: 12, color: theme.colors.text, marginRight: 16 },
+  'otp-helper-text--error--bold': { fontWeight: 'bold', fontSize: 12, color: theme.colors.text },
+  'otp-helper-image': { marginLeft: 8 },
+  'otp-content-container': {
+    marginTop: 28,
+    width: '100%',
+  },
+
+  'otp-content-title': {
+    fontSize: 20,
+    fontFamily: 'MontserratSemiBold',
+    lineHeight: 30,
+    color: theme.colors.boldDark,
+  },
+  'otp-content-description': {
+    fontSize: 14,
+    lineHeight: 21,
+    color: theme.colors.lightBlack,
+    marginTop: 24,
+    fontFamily: 'MontserratRegular',
+  },
+  'otp-content-description--bold': {
+    fontWeight: 'bold',
+    fontSize: 14,
+    lineHeight: 21,
+    color: theme.colors.lightBlack,
+  },
+});

package/assets/styles/modules/recoveryPassword.ts

@@ -0,0 +1,114 @@
+import { StyleSheet } from 'react-native';
+import { theme } from '../../../src/config/paper.config';
+
+const styleRecoveryPasswordContent = StyleSheet.create({
+  'recovery-password-content-container': {
+    marginTop: 10,
+  },
+
+  'recovery-password-content-title': {
+    fontSize: 20,
+    fontFamily: 'MontserratSemiBold',
+    lineHeight: 30,
+    color: theme.colors.boldDark,
+  },
+  'recovery-password-content-description': {
+    fontSize: 14,
+    lineHeight: 21,
+    color: theme.colors.lightBlack,
+    marginTop: 10,
+    fontFamily: 'MontserratLight',
+  },
+  'recovery-password-content-description--bold': {
+    fontWeight: 'bold',
+    fontSize: 14,
+    lineHeight: 21,
+    color: theme.colors.lightBlack,
+  },
+  'progress-bar-container': {
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+    width: '100%',
+    marginTop: 32,
+  },
+  'recovery-password-email-input': {
+    marginTop: 32,
+  },
+  'recovery-password-email-btn': { position: 'absolute', bottom: 32, right: 16, left: 16 },
+  'recovery-password-password-title': {
+    color: theme.colors.darkBlue,
+    fontSize: 20,
+    lineHeight: 30,
+    fontFamily: 'MontserratSemiBold',
+  },
+  'recovery-password-password-description': {
+    color: theme.colors.lightBlack,
+    lineHeight: 21,
+    fontSize: 14,
+    marginTop: 24,
+    fontFamily: 'MontserratRegular',
+  },
+  'recovery-password-password-inputs': {
+    marginTop: 32,
+  },
+  'password-validation': {
+    position: 'absolute',
+    zIndex: 50,
+    top: -145,
+    right: 2,
+    borderRadius: 16,
+    backgroundColor: theme.colors.white,
+    padding: 16,
+    borderWidth: 0.5,
+    borderColor: theme.colors.lightPrimary,
+  },
+  'password-options-container': {
+    marginTop: 8,
+  },
+  'password-options-1': {
+    marginTop: 3,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 16,
+  },
+  'password-options-title': {
+    color: theme.colors.lightBlack,
+    fontWeight: 'bold',
+    fontSize: 16,
+    lineHeight: 19.5,
+  },
+  'password-options': {
+    color: theme.colors.lightBlack,
+    fontWeight: 'light',
+    fontSize: 14,
+    lineHeight: 17.07,
+  },
+  'password-vector': {
+    resizeMode: 'contain',
+  },
+  'recovery-password-phone-text': {
+    marginBottom: 24,
+  },
+  'recovery-password-password-height': { maxHeight: '65%' },
+
+  'recovery-password-alert-text': { fontSize: 12, fontWeight: 'normal', color: theme.colors.text },
+  'recovery-password-alert-text--bold': { fontWeight: 'bold', color: theme.colors.text },
+  'recovery-password-helper': {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: -16,
+    backgroundColor: theme.colors.white,
+    gap: 16,
+    width: '100%',
+  },
+  'recovery-password-helper-text--error': { fontSize: 12, color: theme.colors.text, marginRight: 16 },
+  'recovery-password-helper-text--error--bold': {
+    fontWeight: 'bold',
+    fontSize: 12,
+    color: theme.colors.text,
+  },
+  'recovery-password-helper-image': { marginLeft: 8 },
+  'recovery-password-margin-top': { marginVertical: 32 },
+});
+
+export { styleRecoveryPasswordContent };

package/assets/styles/modules/register.ts

@@ -0,0 +1,99 @@
+import { StyleSheet } from 'react-native';
+import { theme } from '../../../src/config/paper.config';
+
+const styleRegisterContent = StyleSheet.create({
+  'register-content-container': {
+    marginTop: 24,
+  },
+
+  'register-content-title': {
+    fontSize: 20,
+    fontFamily: 'MontserratSemiBold',
+    lineHeight: 30,
+    color: theme.colors.boldDark,
+  },
+  'register-content-description': {
+    fontSize: 14,
+    lineHeight: 21,
+    color: theme.colors.lightBlack,
+    marginTop: 24,
+    fontFamily: 'MontserratRegular',
+  },
+  'register-content-description--bold': {
+    fontWeight: 'bold',
+    fontSize: 14,
+    lineHeight: 21,
+    color: theme.colors.lightBlack,
+  },
+  'progress-bar-container': {
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+    width: '100%',
+    marginTop: 32,
+  },
+  'register-email-input': {
+    marginTop: 32,
+  },
+  'register-email-btn': { position: 'absolute', bottom: 32, right: 16, left: 16 },
+
+  'register-password-title': {
+    color: theme.colors.darkBlue,
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 20,
+    lineHeight: 30,
+  },
+  'register-password-description': {
+    color: theme.colors.lightBlack,
+    fontFamily: 'MontserratRegular',
+    lineHeight: 21,
+    fontSize: 14,
+    marginTop: 24,
+  },
+  'register-password-inputs': {
+    marginTop: 32,
+  },
+  'password-validation': {
+    position: 'absolute',
+    zIndex: 50,
+    top: -145,
+    right: 2,
+    borderRadius: 16,
+    backgroundColor: theme.colors.white,
+    padding: 16,
+    borderWidth: 0.5,
+    borderColor: theme.colors.lightPrimary,
+  },
+  'password-options-1': {
+    marginTop: 3,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 16,
+  },
+  'password-options-title': {
+    color: theme.colors.lightBlack,
+    fontWeight: 'bold',
+    fontSize: 16,
+    lineHeight: 19.5,
+  },
+  'password-options': {
+    color: theme.colors.lightBlack,
+    fontFamily: 'MontserratLight',
+    fontSize: 14,
+    lineHeight: 17.07,
+  },
+  'password-vector': {
+    resizeMode: 'contain',
+  },
+  'register-phone-text': {
+    marginBottom: 24,
+  },
+  'register-alert-text--error': {
+    fontFamily: 'MontserratRegular',
+    fontSize: 12,
+    color: theme.colors.lightBlack,
+  },
+  'register-password-margin-top': { marginTop: 32 },
+  'register-password-margin-bottom': { marginVertical: 32 },
+});
+
+export { styleRegisterContent };