ikualo-ui-kit-mobile 0.0.2

package/assets/styles/elements/select.ts

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native';
+import { theme } from '../../../src/config/paper.config';
+export const stylesSelect = StyleSheet.create({
+  'select-container': {
+    backgroundColor: theme.colors.white,
+    borderTopRightRadius: 4,
+    borderTopLeftRadius: 4,
+    paddingBottom: 16,
+  },
+  'select-container-disabled': {
+    backgroundColor: theme.colors.disabled,
+  },
+  'select-content': {
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.primary,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingBottom: 2,
+  },
+  'select-label': {
+    fontFamily: 'MontserratRegular',
+    fontSize: 12,
+    color: theme.colors.boldBlack,
+    paddingHorizontal: 16,
+    paddingTop: 5,
+  },
+  'select-placeholder': { fontFamily: 'MontserratSemiBold', fontSize: 16, color: theme.colors.boldBlack },
+  'select-list': { fontSize: 14, fontFamily: 'MontserratSemiBold', color: theme.colors.boldBlack },
+  'select-list-container': {
+    borderBottomWidth: 1,
+    borderBlockColor: theme.colors.lightPrimary,
+    padding: 16,
+  },
+});

package/assets/styles/elements/tab.ts

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+import { theme } from '../../../src/config/paper.config';
+
+export const styleTabs = StyleSheet.create({
+  'tab-container': {
+    padding: 3,
+    borderRadius: 4,
+    borderColor: theme.colors.lightGrayBackground,
+    backgroundColor: theme.colors.lightGrayBackground,
+  },
+  tab: {
+    borderRadius: 4,
+    borderColor: theme.colors.lightGrayBackground,
+    paddingVertical: 0,
+  },
+  'tab--active': {
+    backgroundColor: theme.colors.white,
+  },
+  'tab-txt': {
+    fontFamily: 'MontserratBold',
+    fontSize: 14,
+    lineHeight: 16,
+    color: theme.colors.grayText,
+  },
+  'tab-txt--active': {
+    fontFamily: 'MontserratBold',
+    fontSize: 14,
+    lineHeight: 16,
+    color: theme.colors.primary,
+  },
+});

package/assets/styles/modules/cards.ts

@@ -0,0 +1,310 @@
+import { StyleSheet } from 'react-native';
+import { theme } from '../../../src/config/paper.config';
+
+export const styleVirtualCard = StyleSheet.create({
+  'virtualCard-title': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 20,
+    lineHeight: 30,
+    color: theme.colors.boldDark,
+    marginTop: 24,
+  },
+  'virtualCard-items': {
+    marginTop: 16,
+  },
+  'virtualCard-screen-container': {
+    justifyContent: 'space-between',
+    flex: 1,
+  },
+  'virtualCard-screen-image': {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: 32,
+  },
+  'virtualCard-screen-content': {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  'virtualCard-name-title': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 20,
+    lineHeight: 30,
+    color: theme.colors.boldDark,
+    marginBottom: 32,
+  },
+  'virtualCard-name-container': {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+
+  'virtualCard-details': {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  'virtualCard-detail-container': {
+    marginTop: 16,
+    borderColor: theme.colors.white,
+    shadowColor: theme.colors.transparent,
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    elevation: 0,
+  },
+  'virtualCard-detail-title': {
+    color: theme.colors.darkBlue,
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 20,
+    lineHeight: 30,
+  },
+  'virtualCard-detail-subtitle': {
+    color: theme.colors.primary,
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 14,
+    lineHeight: 21,
+    marginBottom: 16,
+  },
+  'virtualCard-detail-label': {
+    color: theme.colors.lightBlack,
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 14,
+    lineHeight: 21,
+    marginBottom: 16,
+    verticalAlign: 'middle',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  'virtualCard-detail-txt': {
+    color: theme.colors.lightBlack,
+    fontFamily: 'MontserratRegular',
+    fontSize: 14,
+    lineHeight: 21,
+  },
+  'virtualCard-created-dsc': {
+    fontFamily: 'MontserratRegular',
+    fontSize: 16,
+    lineHeight: 24,
+    color: theme.colors.blackText,
+    textAlign: 'center',
+  },
+  'virtualCard-created-dialogDown': {
+    height: '50%',
+    shadowColor: theme.colors.primary,
+    shadowOffset: {
+      width: 0,
+      height: -2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 13.9,
+  },
+  'virtualCard-created-btn': {
+    marginTop: 72,
+  },
+  'virtualCard-color-text': { fontFamily: 'MontserratSemiBold', fontSize: 14, color: theme.colors.boldBlack },
+  'virtualCard-color-container': { flexDirection: 'row', gap: 16 },
+  'virtualCard-select-color': { flex: 1, justifyContent: 'space-between' },
+  'virtualCard-select-color-title': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 20,
+    color: theme.colors.boldBlack,
+    marginBottom: 32,
+  },
+});
+export const stylePhysicalCard = StyleSheet.create({
+  'physicalCard-container': { flex: 1, justifyContent: 'space-between' },
+  'physicalCard-description': {
+    fontFamily: 'MontserratRegular',
+    fontSize: 14,
+    color: theme.colors.boldBlack,
+    marginTop: 16,
+    marginBottom: 24,
+  },
+  'physicalCard-address': {
+    fontFamily: 'MontserratRegular',
+    fontSize: 14,
+    color: theme.colors.boldBlack,
+    marginBottom: 16,
+  },
+  'physicalCard-address-zip': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 14,
+    color: theme.colors.boldBlack,
+  },
+  'physicalCard-address-zip-code': {
+    fontFamily: 'MontserratRegular',
+    fontSize: 14,
+    color: theme.colors.boldBlack,
+  },
+  'physicalCard-btn-container': { flexDirection: 'row', justifyContent: 'space-evenly', marginTop: 32 },
+  'physicalCard-btn': { width: 65, height: 38 },
+  'physicalCard-name-title': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 20,
+    lineHeight: 30,
+    color: theme.colors.boldDark,
+    marginBottom: 16,
+  },
+  'physicalCard-name-subtitle': {
+    fontFamily: 'MontserratRegular',
+    fontSize: 14,
+    color: theme.colors.boldBlack,
+    marginBottom: 32,
+  },
+  'physicalCard-detail-container': { marginVertical: 24 },
+  'physicalCard-detail-title-card-name': {
+    fontSize: 14,
+    fontFamily: 'MontserratSemiBold',
+    color: theme.colors.primary,
+    marginBottom: 16,
+  },
+  'physicalCard-detail-label-name': {
+    fontSize: 14,
+    fontFamily: 'MontserratSemiBold',
+    color: theme.colors.boldBlack,
+    marginBottom: 16,
+  },
+  'physicalCard-detail-card-name': {
+    fontSize: 14,
+    fontFamily: 'MontserratRegular',
+    color: theme.colors.boldBlack,
+  },
+});
+export const styleManageCards = StyleSheet.create({
+  'manageCards-title': {
+    fontFamily: 'MontserratBold',
+    fontSize: 20,
+    color: theme.colors.boldBlack,
+    textAlign: 'center',
+    marginBottom: 14,
+    marginTop: -64,
+  },
+  'manageCards-description': {
+    fontFamily: 'MontserratRegular',
+    fontSize: 14,
+    color: theme.colors.boldBlack,
+    textAlign: 'center',
+    marginBottom: 44,
+  },
+});
+
+export const styleDebitCards = StyleSheet.create({
+  'debitCard-main':{
+    flex: 1, 
+    justifyContent: 'space-between'
+  },
+  'debitCard-subtitle': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 20,
+    color: theme.colors.boldDark,
+    lineHeight: 30,
+    textAlign: 'center',
+  },
+  'debitCard-header': {
+    marginTop: 24,
+    marginBottom: 24,
+  },
+
+  'debitCard-info': {
+    alignItems: 'center',
+    gap: 24,
+  },
+  'debitCard-homeButtons-container': {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    backgroundColor: theme.colors.white,
+    paddingTop: 8,
+    paddingRight: 16,
+    paddingBottom: 8,
+    paddingLeft: 16,
+    borderRadius: 8,
+    marginTop: 24,
+  },
+
+  'debitCard-homeButtons': {
+    alignItems: 'center',
+    flexDirection: 'column',
+    width: 83,
+    minHeight: 86,
+    paddingVertical: 8,
+    gap: 8,
+  },
+  'debitCard-homeButtons-text': {
+    color: theme.colors.lightGrayText,
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 10,
+    lineHeight: 15,
+    textAlign: 'center',
+  },
+
+  'debitCard-container': {
+    gap: 3,
+  },
+
+  'debitCard-details': {
+    borderWidth: 1,
+    borderColor: 'rgba(205, 194, 244, 0.37)',
+    borderRadius: 4,
+    shadowColor: 'transparent',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    elevation: 0,
+  },
+  'debitCard-items': {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+
+  'debitCard-item': {
+    flex: 1,
+    marginLeft: 8,
+  },
+  'debitCard-item-title': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 14,
+    lineHeight: 21,
+    color: theme.colors.lightGrayText,
+  },
+  'debitCard-item-subtitle': {
+    fontFamily: 'MonserratRegular',
+    fontSize: 12,
+    lineHeight: 18,
+    color: theme.colors.cardDsc,
+  },
+  'debitCard-item-subtitle--bold': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 12,
+    lineHeight: 18,
+    color: theme.colors.cardDsc,
+  },
+});
+
+export const styleActivatedCard = StyleSheet.create({
+  'activatedCard-buttonTitle': {
+    color: theme.colors.blackText,
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 10,
+    lineHeight: 15,
+    textAlign: 'center',
+  },
+  'activatedCard-cardTitle': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 14,
+    lineHeight: 21,
+    color: theme.colors.blackText,
+  },
+  'activatedCard-subtitle--bold': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 12,
+    lineHeight: 18,
+    color: theme.colors.primary,
+  },
+  'activatedCard-container':{
+    marginBottom: 24 
+  },
+  'activatedCard-image':{
+    alignItems: 'center', 
+    marginTop: 20
+  }
+
+});

package/assets/styles/modules/home.ts

@@ -0,0 +1,289 @@
+import { StyleSheet } from 'react-native';
+import { theme } from '../../../src/config/paper.config';
+
+export const styleHome = StyleSheet.create({
+  'home-help': {
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  'home-help-txt': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 12,
+    color: theme.colors.white,
+  },
+  'home-upper': {
+    flex: 1,
+  },
+  'home-upper-header': {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 32,
+    paddingVertical: 32,
+    paddingHorizontal: 16,
+  },
+  'home-upper-txt': {
+    fontFamily: 'MontserratBold',
+    fontSize: 20,
+    lineHeight: 24,
+  },
+  'home-amount-container': {
+    alignItems: 'center',
+    marginBottom: 36,
+  },
+  'home-lower': {
+    flex: 1,
+    backgroundColor: theme.colors.background,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    marginTop: -32,
+  },
+  'home-amount-txt': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 14,
+    lineHeight: 21,
+    color: theme.colors.white,
+  },
+  'home-amount-value': {
+    marginTop: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+  },
+  'home-amount-touchable': {
+    marginLeft: 16,
+  },
+  'home-amount-value-txt': {
+    fontFamily: 'MontserratBold',
+    fontSize: 36,
+    lineHeight: 40,
+    textAlign: 'center',
+  },
+  'home-amount-img': {
+    width: 100,
+    height: 40,
+  },
+  'home-buttons': {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    marginBottom: 16,
+  },
+  'home-buttons-container': {
+    alignItems: 'center',
+  },
+  'home-buttons-text': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 10,
+    lineHeight: 15,
+    color: theme.colors.white,
+    marginTop: 8,
+  },
+  cards: {
+    gap: 24,
+  },
+  'card-container': {
+    marginVertical: 16,
+  },
+  'card-explore': {
+    backgroundColor: theme.colors.white,
+    borderColor: theme.colors.lightPrimary,
+    borderWidth: 1,
+    borderRadius: 7,
+    shadowColor: theme.colors.lightPrimary,
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.8,
+    shadowRadius: 6,
+    elevation: 4,
+  },
+  'card-explore-title-container': {
+    backgroundColor: theme.colors.boldBlue,
+    borderTopLeftRadius: 7,
+    borderTopRightRadius: 7,
+    position: 'relative',
+    overflow: 'hidden',
+    zIndex: 30,
+    height: 85,
+    justifyContent: 'center',
+  },
+  'card-explore-image': {
+    position: 'absolute',
+    width: 143.09,
+    height: 90.93,
+    top: 14,
+    right: 102,
+    borderRadius: 8,
+    borderWidth: 1,
+    transform: [{ rotate: '21.54deg' }],
+    zIndex: -10,
+  },
+  'card-explore-image-2': {
+    position: 'absolute',
+    width: 143.09,
+    height: 90.93,
+    bottom: 31,
+    right: -22,
+    transform: [{ rotate: '21.54deg' }],
+    zIndex: -10,
+    borderRadius: 8,
+    borderWidth: 1,
+  },
+  'card-explore-title': {
+    color: theme.colors.white,
+    fontFamily: 'MontserratBold',
+    fontSize: 14,
+    lineHeight: 21,
+    marginTop: 16,
+  },
+  'card-explore-subtitle': {
+    color: theme.colors.white,
+    fontFamily: 'MontserratRegular',
+    fontSize: 12,
+    lineHeight: 18,
+    marginTop: -8,
+  },
+  'card-explore-dsc': {
+    color: theme.colors.deepGray,
+    fontFamily: 'MontserratRegular',
+    fontSize: 12,
+    lineHeight: 18,
+    textAlign: 'justify',
+  },
+  'card-explore-bold-dsc': {
+    color: theme.colors.primary,
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 12,
+    lineHeight: 18,
+  },
+  paragraphSeparator: {
+    marginTop: 10,
+  },
+  'card-explorer-ria-title': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 12,
+    lineHeight: 18,
+    color: theme.colors.blackText,
+  },
+
+  'card-content-items': {
+    flexDirection: 'column',
+    gap: 16,
+    marginTop: 16,
+  },
+  'card-explore-content-item': {
+    flexDirection: 'row',
+    gap: 6,
+    alignItems: 'center',
+  },
+  'card-explore-content-txt': {
+    color: theme.colors.blackText,
+    fontFamily: 'MontserratRegular',
+    fontSize: 14,
+    lineHeight: 21,
+  },
+  'card-explore-content-txt-bold': {
+    color: theme.colors.blackText,
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 12,
+    lineHeight: 18,
+  },
+  'card-explore-virtualCards': {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  'card-explore-virtualCards-details': {
+    flex: 1,
+    marginLeft: 8,
+  },
+  'card-explore-virtualCards-title': {
+    fontFamily: 'MontserratSemiBold',
+    color: theme.colors.blackText,
+    fontSize: 14,
+    lineHeight: 21,
+  },
+  'card-explore-virtualCards-subtitle': {
+    fontFamily: 'MontserratRegular',
+    color: theme.colors.cardDsc,
+    fontSize: 14,
+    lineHeight: 21,
+  },
+  'card-explore-virtualCards-subtitle-bold': {
+    color: theme.colors.primary,
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 14,
+    lineHeight: 21,
+  },
+  'card-movement-transactions': {
+    borderColor: theme.colors.white,
+    marginBottom: 8,
+  },
+  'card-movement-row': {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  'card-movement-details': {
+    flex: 1,
+    gap: 3,
+    marginLeft: 8,
+  },
+  'card-movement-title': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 14,
+    lineHeight: 21,
+    color: theme.colors.primary,
+  },
+  'card-movement-dsc': {
+    fontFamily: 'MontserratRegular',
+    fontSize: 12,
+    lineHeight: 18,
+    color: theme.colors.cardDsc,
+  },
+  'card-movement-date': {
+    color: theme.colors.blackText,
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 14,
+    lineHeight: 21,
+  },
+  'card-movement-amount': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 12,
+    lineHeight: 18,
+  },
+  'home-footer-container': {
+    backgroundColor: theme.colors.white,
+    borderBlockColor: theme.colors.lightPurpleBorder,
+    borderTopWidth: 1,
+    shadowColor: theme.colors.lightPurpleShadow,
+    shadowOffset: { width: 0, height: -1 },
+    shadowOpacity: 0.7,
+    shadowRadius: 5.4,
+    height: 80,
+    paddingLeft: 28,
+    paddingRight: 28,
+    justifyContent: 'center',
+  },
+  'home-footer-items': {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  'home-footer-item': {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 16,
+    paddingBottom: 16,
+    width: 82,
+  },
+  'home-footer-txt': {
+    marginTop: 5,
+    color: theme.colors.darkGray,
+  },
+  'home-footer--active': {
+    borderTopWidth: 3,
+    borderTopColor: theme.colors.blackText,
+  },
+  'home-footer-txt--active': {
+    color: theme.colors.blackText,
+    marginTop: 5,
+  },
+});