ikualo-ui-kit-mobile 0.0.2

package/assets/styles/elements/buttons.ts

@@ -0,0 +1,190 @@
+import { StyleSheet } from 'react-native';
+import { theme } from '../../../src/config/paper.config';
+
+const stylesButtonContained = StyleSheet.create({
+  'btn-contained': {
+    borderRadius: 8,
+    backgroundColor: 'transparent',
+    height: 56,
+  },
+  'btn-contained-text': {
+    fontFamily: 'MontserratBold',
+    textAlign: 'center',
+    fontSize: 16,
+  },
+  'btn-contained--primary': {
+    backgroundColor: theme.colors.primary,
+    color: theme.colors.white,
+  },
+  'btn-contained--lightPrimary': {
+    backgroundColor: theme.colors.lightPrimary,
+    color: theme.colors.boldBlack,
+    borderColor: theme.colors.primary,
+  },
+
+  '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.darkGray,
+  },
+
+  'btn-contained--sm': {
+    padding: 0,
+    width: 70,
+  },
+  'btn-contained--md': {
+    paddingVertical: 3,
+    paddingHorizontal: 32,
+  },
+  'btn-contained--xl': {
+    paddingVertical: 3,
+    width: '100%',
+  },
+});
+
+const stylesButtonOutlined = StyleSheet.create({
+  'btn-outlined-text': {
+    fontFamily: 'MontserratBold',
+    textAlign: 'center',
+    fontSize: 16,
+  },
+  'btn-outlined': {
+    borderRadius: 8,
+    backgroundColor: 'transparent',
+    borderWidth: 1.5,
+    height: 56,
+  },
+  'btn-outlined--primary': {
+    borderColor: theme.colors.primary,
+    color: theme.colors.primary,
+  },
+  'btn-outlined--secondary': {
+    borderColor: theme.colors.secondary,
+    color: theme.colors.secondary,
+  },
+  'btn-outlined--dark': {
+    borderColor: theme.colors.dark,
+    color: theme.colors.dark,
+  },
+  'btn-outlined--light': {
+    borderColor: theme.colors.light,
+    color: theme.colors.light,
+  },
+  'btn-outlined--disabled': {
+    borderColor: theme.colors.disabled,
+    color: theme.colors.disabled,
+  },
+  'btn-outlined--sm': {
+    paddingVertical: 3,
+    paddingHorizontal: 10,
+  },
+  'btn-outlined--md': {
+    paddingVertical: 3,
+    paddingHorizontal: 32,
+  },
+  'btn-outlined--xl': {
+    paddingVertical: 3,
+    width: '100%',
+  },
+});
+const stylesButtonText = StyleSheet.create({
+  'btn-text': {
+    borderRadius: 8,
+    fontFamily: 'MontserratSemiBold',
+  },
+  'btn-text--primary': {
+    color: theme.colors.primary,
+    fontFamily: 'MontserratSemiBold',
+  },
+  'btn-text--secondary': {
+    color: theme.colors.secondary,
+    fontFamily: 'MontserratSemiBold',
+  },
+  'btn-text--dark': {
+    color: theme.colors.dark,
+    fontFamily: 'MontserratSemiBold',
+  },
+  'btn-text--light': {
+    color: theme.colors.light,
+    fontFamily: 'MontserratSemiBold',
+  },
+  'btn-text--disabled': {
+    color: theme.colors.disabled,
+    fontFamily: 'MontserratSemiBold',
+  },
+  'btn-text--generic': {
+    color: theme.colors.text,
+    fontFamily: 'MontserratSemiBold',
+  },
+  'btn-text--sm': {
+    padding: 0,
+    fontSize: 12,
+  },
+  'btn-text--md': {
+    padding: 2,
+    fontSize: 14,
+  },
+  'btn-text--lg': {
+    padding: 4,
+    fontSize: 16,
+  },
+  'btn-text--xl': {
+    padding: 5,
+    fontSize: 16,
+  },
+});
+const stylesBtnLightSmall = StyleSheet.create({
+  'btn-light-small': {
+    backgroundColor: theme.colors.lightPurpleBorder,
+    borderColor: theme.colors.primary,
+    borderWidth: 1,
+    borderRadius: 8,
+    maxWidth: 48,
+    minWidth: 48,
+    maxHeight: 48,
+    minHeight: 48,
+    width: 48,
+    height: 48,
+  },
+  'btn-light-small-content': {
+    alignSelf: 'center',
+    alignItems: 'center',
+    maxWidth: 48,
+    minWidth: 48,
+    maxHeight: 48,
+    minHeight: 48,
+    width: 48,
+    height: 48,
+    marginLeft: 12,
+  },
+  'btn-light-small-label': {
+    fontSize: 24,
+  },
+  'btn-light-small--disabled': {
+    backgroundColor: theme.colors.disabledButtonBackground,
+    borderColor: theme.colors.disabledButtonBorder,
+    borderRadius: 8,
+    borderWidth: 1,
+    maxWidth: 48,
+    minWidth: 48,
+    maxHeight: 48,
+    minHeight: 48,
+    width: 48,
+    height: 48,
+  },
+  'btn-light-small-label--disabled': {
+    color: theme.colors.disabledButtonBorder,
+  },
+});
+export { stylesButtonContained, stylesButtonOutlined, stylesButtonText, stylesBtnLightSmall };

package/assets/styles/elements/cards.ts

@@ -0,0 +1,105 @@
+import { StyleSheet } from 'react-native';
+import { theme } from '../../../src/config/paper.config';
+
+export const stylesCards = StyleSheet.create({
+  card: {
+    borderRadius: 4,
+    backgroundColor: theme.colors.white,
+    padding: 16,
+    borderWidth: 0.5,
+    borderColor: theme.colors.lightPrimary,
+    shadowColor: theme.colors.transparent,
+  },
+
+  'card-title': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 14,
+    lineHeight: 21,
+    color: theme.colors.blackText,
+  },
+  'card-text': {
+    fontFamily: 'MontserratRegular',
+    fontSize: 14,
+    lineHeight: 21,
+    color: theme.colors.lightBlack,
+    textAlign: 'justify',
+  },
+  'card-text--bold': {
+    fontFamily: 'MontserratSemiBold',
+    color: theme.colors.primary,
+  },
+  'card-interactive': {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    backgroundColor: theme.colors.white,
+    padding: 16,
+    borderRadius: 4,
+    shadowColor: theme.colors.primary,
+    borderTopWidth: 1,
+    borderTopColor: theme.colors.lightGray,
+    marginVertical: 4,
+  },
+  'card-interactive-icon': {
+    width: 24,
+    marginRight: 8,
+  },
+  'card-interactive-info': {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+  },
+  'card-interactive-text': {
+    color: theme.colors.text,
+    fontSize: 14,
+    fontFamily: 'MontserratSemiBold',
+  },
+  'card-interactive-description': {
+    flexDirection: 'row',
+  },
+  'card-interactive-subtext': {
+    color: theme.colors.text,
+    fontSize: 14,
+    fontFamily: 'MontserratRegular',
+  },
+  'card-interactive-highlighted': {
+    color: theme.colors.primary,
+    fontSize: 14,
+    fontFamily: 'MontserratSemiBold',
+  },
+  'card-interactive-arrow': {
+    width: 24,
+    textAlign: 'right',
+  },
+  'card-interactive-container': {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+
+  'card-list': {
+    borderWidth: 0.5,
+    padding: 16,
+    backgroundColor: theme.colors.white,
+    borderRadius: 4,
+    borderColor: theme.colors.transparent,
+    shadowColor: theme.colors.transparent,
+  },
+  'card-list-selected': {
+    backgroundColor: theme.colors.lightPurpleBorder,
+    borderColor: theme.colors.purple,
+    shadowColor: theme.colors.lightPurpleShadow,
+    shadowOffset: { width: 0, height: -1 },
+    shadowOpacity: 0.7,
+    shadowRadius: 5.4,
+    borderWidth: 2,
+  },
+  'card-list-txt': {
+    color: theme.colors.blackText,
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  'card-list-item': {
+    marginBottom: 8,
+    borderRadius: 4,
+  },
+});

package/assets/styles/elements/checkbox.ts

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+import { theme } from '../../../src/config/paper.config';
+
+const styleCheck = StyleSheet.create({
+  checkbox: {
+    borderWidth: 2,
+    borderColor: theme.colors.primary,
+    borderRadius: 4,
+    width: 20,
+    height: 20,
+    backgroundColor: 'transparent',
+    display: 'flex',
+  },
+});
+
+export { styleCheck };

package/assets/styles/elements/dialog.ts

@@ -0,0 +1,78 @@
+import { StyleSheet } from 'react-native';
+import { theme } from '../../../src/config/paper.config';
+export const stylesDialog = StyleSheet.create({
+  dialog: {
+    backgroundColor: theme.colors.white,
+  },
+  'dialog-icon': {
+    width: 24,
+    height: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
+    textAlign: 'center',
+  },
+  'dialog-title': {
+    fontSize: 16,
+    color: theme.colors.text,
+    textAlign: 'center',
+    fontFamily: 'MontserratSemiBold',
+  },
+  'dialog-select-title': {
+    fontSize: 14,
+    color: theme.colors.text,
+    textAlign: 'center',
+    fontFamily: 'MontserratSemiBold',
+    marginTop: -5,
+  },
+  'dialog-container-icon': { flexDirection: 'row', justifyContent: 'center' },
+  'dialog-text': {
+    fontSize: 14,
+    color: theme.colors.text,
+    textAlign: 'center',
+    fontFamily: 'MontserratRegular',
+  },
+  'dialog-actions': {
+    gap: 16,
+    justifyContent: 'center',
+  },
+  'dialog-down': {
+    backgroundColor: theme.colors.white,
+    position: 'absolute',
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    bottom: -50,
+    left: -25,
+    right: -25,
+  },
+  'dialog-down-btn': {
+    width: '100%',
+  },
+  'dialog-down-header': {
+    flexDirection: 'row',
+    width: '100%',
+  },
+  'dialog-down-close': {
+    position: 'absolute',
+    right: 10,
+    top: 20,
+    justifyContent: 'space-evenly',
+  },
+  'dialog-down-select-close': {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    justifyContent: 'space-evenly',
+    zIndex: 50,
+  },
+  'dialog-down-close-icon': {
+    width: 24,
+    color: theme.colors.text,
+  },
+  'dialog-content': {
+    marginBottom: 32,
+  },
+  'dialog-img': {
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+});

package/assets/styles/elements/dropdown.ts

@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native';
+import { theme } from '../../../src/config/paper.config';
+
+const styleDropdown = StyleSheet.create({
+  'dropdown-container': {
+    width: 'auto',
+    marginRight: -42,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  'dropdown-menu': { flexDirection: 'row', alignItems: 'center' },
+  'dropdown-label': { fontSize: 16, marginTop: 15 },
+  'dropdown-label-content': { width: 70 },
+  'dropdown-label-arrow': { fontSize: 24 },
+  'dropdown-label-width': { width: 10 },
+  'dropdown-overlay': {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    zIndex: 999,
+  },
+  'dropdown-menu-item': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 14,
+    color: theme.colors.boldBlack,
+  },
+});
+
+export { styleDropdown };

package/assets/styles/elements/header.ts

@@ -0,0 +1,27 @@
+import { StyleSheet } from 'react-native';
+import { theme } from '../../../src/config/paper.config';
+export const stylesHeader = StyleSheet.create({
+  header: {
+    flex: 0,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+    height: 64,
+  },
+  'header-back': {
+    borderRadius: 100,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: theme.colors.boldBlack,
+    width: 32,
+    height: 32,
+  },
+  'header-back-icon': { height: 12, width: 7.41, resizeMode: 'contain' },
+  'header-title': {
+    color: 'black',
+    fontSize: 16,
+    lineHeight: 19.5,
+    fontFamily: 'MontserratSemiBold',
+  },
+  'header-logo': { height: 32, width: 32, resizeMode: 'contain' },
+});

package/assets/styles/elements/inputs.ts

@@ -0,0 +1,190 @@
+import { StyleSheet } from 'react-native';
+import { theme } from '../../../src/config/paper.config';
+
+const styleInput = StyleSheet.create({
+  input: {
+    borderRadius: 8,
+    borderBottomColor: theme.colors.primary,
+    borderBottomWidth: 1,
+  },
+  'input-txt': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 16,
+    lineHeight: 19.5,
+    color: theme.colors.boldBlack,
+    borderTopRightRadius: 4,
+    borderTopLeftRadius: 4,
+  },
+  'input-label': {
+    backgroundColor: theme.colors.white,
+    fontSize: 16,
+    lineHeight: 24,
+    color: theme.colors.boldBlack,
+    borderRadius: 4,
+    fontFamily: 'MontserratBold',
+  },
+  'input-error-focused': {
+    backgroundColor: theme.colors.lightRed,
+    borderTopLeftRadius: 4,
+    borderTopRightRadius: 4,
+    color: theme.colors.boldBlack,
+    fontFamily: 'MontserratSemiBold',
+  },
+  'input-txt-error': {
+    fontWeight: 'normal',
+    fontSize: 12,
+    lineHeight: 14.63,
+    color: theme.colors.boldBlack,
+    marginLeft: 5,
+    borderBottomColor: theme.colors.darkRed,
+    borderTopLeftRadius: 4,
+    borderTopRightRadius: 4,
+  },
+  'input-error': {
+    flex: 1,
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    flexDirection: 'row',
+    marginTop: 10,
+    marginBottom: 10,
+    backgroundColor: theme.colors.lightRed,
+    borderTopLeftRadius: 4,
+    borderTopRightRadius: 4,
+  },
+  'input-text-underline': {
+    color: theme.colors.primary,
+  },
+  'input-text--activeUnderline': {
+    color: theme.colors.darkRed,
+  },
+  'input-text--focused': {
+    backgroundColor: theme.colors.lightPrimary,
+    borderTopRightRadius: 4,
+    borderTopLeftRadius: 4,
+  },
+  'input-text-color': {
+    color: theme.colors.primary,
+  },
+  'input-helper--error': {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 1,
+    backgroundColor: theme.colors.white,
+    gap: 16,
+    width: '100%',
+  },
+  'input-helper--error-text': {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: theme.colors.white,
+  },
+  'input-helper--error-image': { marginLeft: 8, width: 16, height: 16 },
+  'input-phone': { backgroundColor: theme.colors.white, color: theme.colors.boldBlack },
+  'input-phone-container': {
+    flexDirection: 'row',
+    borderTopLeftRadius: 4,
+    borderTopRightRadius: 4,
+    width: '100%',
+    gap: 4,
+    backgroundColor: theme.colors.white,
+  },
+  'input-phone-code': {
+    backgroundColor: 'transparent',
+    width: '20%',
+    fontSize: 14,
+    fontWeight: 'bold',
+    borderBottomColor: theme.colors.primary,
+    borderBottomWidth: 1,
+  },
+  'input-phone-icon': { paddingLeft: 24, color: theme.colors.boldBlack },
+  'input-phone-number': {
+    backgroundColor: 'transparent',
+    fontSize: 14,
+    width: '79%',
+    fontWeight: 'bold',
+    borderBottomColor: theme.colors.primary,
+    borderBottomWidth: 1,
+    color: theme.colors.text,
+  },
+  'input-phone-helper': { fontSize: 12, color: theme.colors.boldBlack, paddingLeft: 16 },
+  'input-phone-container--focused': {
+    backgroundColor: theme.colors.lightPrimary,
+    borderTopRightRadius: 4,
+    borderTopLeftRadius: 4,
+  },
+  'input-phone--focused': {
+    backgroundColor: theme.colors.lightPrimary,
+    borderBottomWidth: 4,
+    borderTopRightRadius: 4,
+    borderTopLeftRadius: 4,
+  },
+  'input-phone-list': { marginTop: -26 },
+  'input-phone-list-height': { maxHeight: '80%' },
+  'input-phone-list-item': {
+    backgroundColor: theme.colors.white,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.lightPrimary,
+    borderTopRightRadius: 4,
+    borderTopLeftRadius: 4,
+  },
+  'input-phone-list-item-text': { color: theme.colors.boldBlack, fontSize: 14, fontWeight: 'bold' },
+  'input-phone-list-item-icon': { marginLeft: 8, width: 25 },
+  'input-phone-search-container': {
+    backgroundColor: theme.colors.white,
+    marginTop: 4,
+    borderBottomWidth: 0.5,
+    borderBottomColor: theme.colors.primary,
+  },
+  'input-phone-search': {
+    color: theme.colors.boldBlack,
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 14,
+  },
+  'input-otp': {
+    backgroundColor: 'transparent',
+    maxWidth: 40,
+    maxHeight: 40,
+    borderBottomWidth: 2,
+    borderBottomColor: theme.colors.primary,
+    marginHorizontal: 8,
+    textAlign: 'center',
+    justifyContent: 'center',
+    alignItems: 'center',
+    fontSize: 16,
+    fontFamily: 'MontserratSemiBold',
+  },
+  'input-otp--invalid': {
+    borderBottomColor: theme.colors.darkRed,
+  },
+  'input-otp--invalid--focused': {
+    borderBottomColor: theme.colors.darkRed,
+    borderBottomWidth: 4,
+  },
+  'input-otp-content': {
+    color: theme.colors.boldBlack,
+  },
+  'input-otp--focused': {
+    borderBottomColor: theme.colors.primary,
+    borderBottomWidth: 4,
+  },
+  'input-password-helper---error': {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'white',
+  },
+  'input-password-helper--error-text': {
+    fontSize: 12,
+    color: theme.colors.boldBlack,
+    fontFamily: 'MontserratLight',
+    marginLeft: 8,
+    flexWrap: 'wrap',
+  },
+  'input-password-helper': {
+    color: theme.colors.boldBlack,
+    fontSize: 12,
+    fontFamily: 'MontserratRegular',
+    backgroundColor: theme.colors.white,
+  },
+});
+
+export { styleInput };

package/assets/styles/elements/pages.ts

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+import { theme } from '../../../src/config/paper.config';
+
+const stylePages = StyleSheet.create({
+  'page-basic': { flex: 1, backgroundColor: theme.colors.background },
+  'page-basic-view': {
+    flex: 1,
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+  },
+});
+
+export { stylePages };

package/assets/styles/elements/progressBar.ts

@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native';
+import { theme } from '../../../src/config/paper.config';
+
+const styleProgressBar = StyleSheet.create({
+  'progress-bar-container': {
+    width: '33%',
+  },
+  'progress-bar': {
+    backgroundColor: theme.colors.lightGray,
+    borderRadius: 20,
+    height: 8,
+    width: '100%',
+  },
+  'progress-bar-fillStyle': { backgroundColor: theme.colors.lightBlue },
+  'progress-bar-title': { fontFamily: 'MontserratSemiBold', fontSize: 12 },
+  'progress-bar-title--active': { color: theme.colors.text },
+  'progress-bar-title--inactive': { color: theme.colors.grayText },
+});
+
+export { styleProgressBar };