ikualo-ui-kit-mobile 1.2.2 → 1.2.4

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 (4) hide show
  1. package/assets/styles/elements/inputs.ts +173 -173
  2. package/package.json +1 -1
  3. package/src/config/paper.config.ts +4 -0
  4. package/src/elements/views/Views.tsx +52 -38
package/assets/styles/elements/inputs.ts CHANGED
@@ -1,176 +1,176 @@
1
1
  import { StyleSheet } from 'react-native';
2
2
  import { ITheme } from '../../../src/models';
3
- export const getStyleInput = (theme: ITheme) => StyleSheet.create({
4
- input: {
5
- borderRadius: 8,
6
- borderBottomColor: theme.colors.border_dark,
7
- borderBottomWidth: 1,
8
- },
9
- 'input-txt': {
10
- fontFamily: 'MontserratRegular',
11
- fontSize: 16,
12
- lineHeight: 19.5,
13
- color: theme.colors.text_p,
14
- borderTopRightRadius: 4,
15
- borderTopLeftRadius: 4,
16
- },
17
- 'input-label': {
18
- backgroundColor: 'transparent',
19
- fontSize: 16,
20
- color: theme.colors.text_p,
21
- borderRadius: 4,
22
- fontFamily: 'MontserratRegular',
23
- },
24
- 'input-error-focused': {
25
- backgroundColor: theme.colors.background_error,
26
- borderTopLeftRadius: 4,
27
- borderTopRightRadius: 4,
28
- color: theme.colors.text_p,
29
- fontFamily: 'MontserratSemiBold',
30
- },
31
- 'input-txt-error': {
32
- fontFamily: 'MontserratRegular',
33
- fontSize: 12,
34
- lineHeight: 14.63,
35
- color: theme.colors.text_p,
36
- marginLeft: 5,
37
- borderBottomColor: theme.colors.error,
38
- borderTopLeftRadius: 4,
39
- borderTopRightRadius: 4,
40
- },
41
- 'input-error': {
42
- flex: 1,
43
- alignItems: 'flex-start',
44
- justifyContent: 'flex-start',
45
- flexDirection: 'row',
46
- marginTop: 10,
47
- marginBottom: 10,
48
- backgroundColor: 'transparent',
49
- borderTopLeftRadius: 4,
50
- borderTopRightRadius: 4,
51
- },
52
- 'input-text-underline': {
53
- color: theme.colors.border_dark,
54
- },
55
- 'input-text--activeUnderline': {
56
- color: theme.colors.error,
57
- },
58
- 'input-text--focused': {
59
- backgroundColor: theme.colors.background_focus,
60
- borderTopRightRadius: 4,
61
- borderTopLeftRadius: 4,
62
- },
63
- 'input-text-color': {
64
- color: theme.colors.text_p,
65
- },
66
- 'input-helper--error': {
67
- flexDirection: 'row',
68
- alignItems: 'center',
69
- marginTop: 1,
70
- backgroundColor: theme.colors.background_app,
71
- gap: 16,
72
- width: '100%',
73
- },
74
- 'input-helper--error-text': {
75
- flexDirection: 'row',
76
- alignItems: 'center',
77
- backgroundColor: 'transparent',
78
- paddingTop: 4,
79
- paddingRight: 16,
80
- },
81
- 'input-helper--error-image': { marginLeft: 8, width: 16, height: 16 },
82
- 'input-phone': { backgroundColor: theme.colors.background_app, color: theme.colors.text_p },
83
- 'input-phone-container': {
84
- flexDirection: 'row',
85
- borderTopLeftRadius: 4,
86
- borderTopRightRadius: 4,
87
- width: '100%',
88
- gap: 4,
89
- backgroundColor: theme.colors.background_app,
90
- },
91
- 'input-phone-code': {
92
- backgroundColor: 'transparent',
93
- width: '20%',
94
- fontSize: 14,
95
- fontWeight: 'bold',
96
- borderBottomColor: theme.colors.border_dark,
97
- borderBottomWidth: 1,
98
- },
99
- 'input-phone-icon': { paddingLeft: 24, color: theme.colors.text_p },
100
- 'input-phone-number': {
101
- backgroundColor: 'transparent',
102
- fontSize: 14,
103
- width: '79%',
104
- fontWeight: 'bold',
105
- borderBottomColor: theme.colors.border_dark,
106
- borderBottomWidth: 1,
107
- color: theme.colors.text_p,
108
- },
109
- 'input-phone-helper': { fontSize: 12, color: theme.colors.text_p, paddingLeft: 16 },
110
- 'input-phone-container--focused': {
111
- backgroundColor: theme.colors.background_focus,
112
- borderTopRightRadius: 4,
113
- borderTopLeftRadius: 4,
114
- },
115
- 'input-phone--focused': {
116
- backgroundColor: theme.colors.background_focus,
117
- borderBottomWidth: 4,
118
- borderTopRightRadius: 4,
119
- borderTopLeftRadius: 4,
120
- },
121
- 'input-phone-list': { marginTop: -26 },
122
- 'input-phone-list-height': { maxHeight: '80%' },
123
- 'input-phone-list-item': {
124
- backgroundColor: theme.colors.background_focus,
125
- borderBottomWidth: 1,
126
- borderBottomColor: theme.colors.border,
127
- borderTopRightRadius: 4,
128
- borderTopLeftRadius: 4,
129
- },
130
- 'input-phone-list-item-text': { color: theme.colors.text_p, fontSize: 14, fontWeight: 'bold' },
131
- 'input-phone-list-item-icon': { marginLeft: 8, width: 25 },
132
- 'input-phone-search-container': {
133
- backgroundColor: theme.colors.background_app,
134
- marginTop: 4,
135
- borderBottomWidth: 0.5,
136
- borderBottomColor: theme.colors.border_dark,
137
- },
138
- 'input-phone-search': {
139
- color: theme.colors.text_p,
140
- fontFamily: 'MontserratSemiBold',
141
- fontSize: 14,
142
- },
143
-
144
- 'input-password-helper---error': {
145
- flexDirection: 'row',
146
- alignItems: 'center',
147
- backgroundColor: theme.colors.background_app,
148
- paddingTop: 4,
149
- },
150
- 'input-password-helper--error-text': {
151
- fontSize: 12,
152
- color: theme.colors.text_p,
153
- fontFamily: 'MontserratLight',
154
- marginLeft: 8,
155
- flexWrap: 'wrap',
156
- },
157
- 'input-password-helper': {
158
- color: theme.colors.text_p,
159
- fontSize: 12,
160
- fontFamily: 'MontserratRegular',
161
- backgroundColor: theme.colors.background_app,
162
- paddingTop: 4,
163
- },
164
- 'input--disabeld': {
165
- color: theme.colors.text_btn_disabled,
166
- fontFamily: 'MontserratMedium',
167
- },
168
- 'input-label--disabled': {
169
- fontFamily: 'MontserratMedium',
170
- },
171
- 'input-checkbox': {
172
- width: 24,
173
- height: 24,
174
- }
175
- });
3
+ export const getStyleInput = (theme: ITheme) =>
4
+ StyleSheet.create({
5
+ input: {
6
+ borderRadius: 8,
7
+ borderBottomColor: theme.colors.border_dark,
8
+ borderBottomWidth: 1,
9
+ },
10
+ 'input-txt': {
11
+ fontFamily: 'MontserratRegular',
12
+ fontSize: 16,
13
+ lineHeight: 19.5,
14
+ color: theme.colors.text_p,
15
+ borderTopRightRadius: 4,
16
+ borderTopLeftRadius: 4,
17
+ },
18
+ 'input-label': {
19
+ backgroundColor: 'transparent',
20
+ fontSize: 16,
21
+ color: theme.colors.text_p,
22
+ borderRadius: 4,
23
+ fontFamily: 'MontserratRegular',
24
+ },
25
+ 'input-error-focused': {
26
+ backgroundColor: theme.colors.background_error,
27
+ borderTopLeftRadius: 4,
28
+ borderTopRightRadius: 4,
29
+ color: theme.colors.text_p,
30
+ fontFamily: 'MontserratSemiBold',
31
+ },
32
+ 'input-txt-error': {
33
+ fontFamily: 'MontserratRegular',
34
+ fontSize: 12,
35
+ lineHeight: 14.63,
36
+ color: theme.colors.text_p,
37
+ marginLeft: 5,
38
+ borderBottomColor: theme.colors.error,
39
+ borderTopLeftRadius: 4,
40
+ borderTopRightRadius: 4,
41
+ },
42
+ 'input-error': {
43
+ flex: 1,
44
+ alignItems: 'flex-start',
45
+ justifyContent: 'flex-start',
46
+ flexDirection: 'row',
47
+ marginTop: 10,
48
+ marginBottom: 10,
49
+ backgroundColor: 'transparent',
50
+ borderTopLeftRadius: 4,
51
+ borderTopRightRadius: 4,
52
+ },
53
+ 'input-text-underline': {
54
+ color: theme.colors.border_dark,
55
+ },
56
+ 'input-text--activeUnderline': {
57
+ color: theme.colors.error,
58
+ },
59
+ 'input-text--focused': {
60
+ backgroundColor: theme.colors.background_focus,
61
+ borderTopRightRadius: 4,
62
+ borderTopLeftRadius: 4,
63
+ },
64
+ 'input-text-color': {
65
+ color: theme.colors.text_p,
66
+ },
67
+ 'input-helper--error': {
68
+ flexDirection: 'row',
69
+ alignItems: 'center',
70
+ marginTop: 1,
71
+ backgroundColor: theme.colors.background_app,
72
+ gap: 16,
73
+ width: '100%',
74
+ },
75
+ 'input-helper--error-text': {
76
+ flexDirection: 'row',
77
+ alignItems: 'center',
78
+ backgroundColor: 'transparent',
79
+ paddingTop: 4,
80
+ paddingRight: 16,
81
+ },
82
+ 'input-helper--error-image': { marginLeft: 8, width: 16, height: 16 },
83
+ 'input-phone': { backgroundColor: theme.colors.background_app, color: theme.colors.text_p },
84
+ 'input-phone-container': {
85
+ flexDirection: 'row',
86
+ borderTopLeftRadius: 4,
87
+ borderTopRightRadius: 4,
88
+ width: '100%',
89
+ gap: 4,
90
+ backgroundColor: theme.colors.background_app,
91
+ },
92
+ 'input-phone-code': {
93
+ backgroundColor: 'transparent',
94
+ width: '20%',
95
+ fontSize: 14,
96
+ fontWeight: 'bold',
97
+ borderBottomColor: theme.colors.border_dark,
98
+ borderBottomWidth: 1,
99
+ },
100
+ 'input-phone-icon': { paddingLeft: 24, color: theme.colors.text_p },
101
+ 'input-phone-number': {
102
+ backgroundColor: 'transparent',
103
+ fontSize: 14,
104
+ width: '79%',
105
+ fontWeight: 'bold',
106
+ borderBottomColor: theme.colors.border_dark,
107
+ borderBottomWidth: 1,
108
+ color: theme.colors.text_p,
109
+ },
110
+ 'input-phone-helper': { fontSize: 12, color: theme.colors.text_p, paddingLeft: 16 },
111
+ 'input-phone-container--focused': {
112
+ backgroundColor: theme.colors.background_focus,
113
+ borderTopRightRadius: 4,
114
+ borderTopLeftRadius: 4,
115
+ },
116
+ 'input-phone--focused': {
117
+ backgroundColor: theme.colors.background_focus,
118
+ borderBottomWidth: 4,
119
+ borderTopRightRadius: 4,
120
+ borderTopLeftRadius: 4,
121
+ },
122
+ 'input-phone-list': { marginTop: -26 },
123
+ 'input-phone-list-height': { maxHeight: '80%' },
124
+ 'input-phone-list-item': {
125
+ backgroundColor: theme.colors.background_focus,
126
+ borderBottomWidth: 1,
127
+ borderBottomColor: theme.colors.border,
128
+ borderTopRightRadius: 4,
129
+ borderTopLeftRadius: 4,
130
+ },
131
+ 'input-phone-list-item-text': { color: theme.colors.text_p, fontSize: 14, fontWeight: 'bold' },
132
+ 'input-phone-list-item-icon': { marginLeft: 8, width: 25 },
133
+ 'input-phone-search-container': {
134
+ backgroundColor: theme.colors.background_app,
135
+ marginTop: 4,
136
+ borderBottomWidth: 0.5,
137
+ borderBottomColor: theme.colors.border_dark,
138
+ },
139
+ 'input-phone-search': {
140
+ color: theme.colors.text_p,
141
+ fontFamily: 'MontserratSemiBold',
142
+ fontSize: 14,
143
+ },
176
144
 
145
+ 'input-password-helper---error': {
146
+ flexDirection: 'row',
147
+ alignItems: 'center',
148
+ backgroundColor: theme.colors.transparent,
149
+ paddingTop: 4,
150
+ },
151
+ 'input-password-helper--error-text': {
152
+ fontSize: 12,
153
+ color: theme.colors.text_p,
154
+ fontFamily: 'MontserratLight',
155
+ marginLeft: 8,
156
+ flexWrap: 'wrap',
157
+ },
158
+ 'input-password-helper': {
159
+ color: theme.colors.text_p,
160
+ fontSize: 12,
161
+ fontFamily: 'MontserratRegular',
162
+ backgroundColor: theme.colors.transparent,
163
+ paddingTop: 4,
164
+ },
165
+ 'input--disabeld': {
166
+ color: theme.colors.text_btn_disabled,
167
+ fontFamily: 'MontserratMedium',
168
+ },
169
+ 'input-label--disabled': {
170
+ fontFamily: 'MontserratMedium',
171
+ },
172
+ 'input-checkbox': {
173
+ width: 24,
174
+ height: 24,
175
+ },
176
+ });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ikualo-ui-kit-mobile",
3
- "version": "1.2.2",
3
+ "version": "1.2.4",
4
4
  "main": "src/index.ts",
5
5
  "scripts": {
6
6
  "start": "expo start",
package/src/config/paper.config.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { Appearance } from 'react-native';
2
2
  import { DefaultTheme } from 'react-native-paper';
3
+
3
4
  const colors = {
4
5
  dark_home: '#120B25',
5
6
  dark_800: '#1D1F24',
@@ -215,3 +216,6 @@ export const lightTheme = {
215
216
  let currentTheme = Appearance.getColorScheme() === 'dark' ? darkTheme : lightTheme;
216
217
 
217
218
  export const getGlobalTheme = () => currentTheme;
219
+ export const setGlobalTheme = (theme: 'light' | 'dark' | 'system') => {
220
+ Appearance.setColorScheme(theme !== 'system' ? theme : null);
221
+ };
package/src/elements/views/Views.tsx CHANGED
@@ -1,41 +1,55 @@
1
- import React, { useState } from "react";
2
- import { Select } from "../select/Select";
3
- import { AlertsExamples } from "../alerts/AlertsExamples";
4
- import { BtnsExample } from "../buttons/BtnsExample";
5
- import { CardsExamples } from "../cards/CardsExamples";
6
- import { View } from "react-native";
7
- import { InputsExamples } from "../inputs/InputsExamples";
8
- import { DialogExamples } from "../dialogs/DialogExamples";
9
- import { Others } from "./Others";
10
- import { Navbar } from "../../";
1
+ import React, { useState } from 'react';
2
+ import { Select } from '../select/Select';
3
+ import { AlertsExamples } from '../alerts/AlertsExamples';
4
+ import { BtnsExample } from '../buttons/BtnsExample';
5
+ import { CardsExamples } from '../cards/CardsExamples';
6
+ import { View } from 'react-native';
7
+ import { InputsExamples } from '../inputs/InputsExamples';
8
+ import { DialogExamples } from '../dialogs/DialogExamples';
9
+ import { Others } from './Others';
10
+ import { BtnContained, Navbar } from '../../';
11
+ import { setGlobalTheme } from '../../config/paper.config';
11
12
  export const Views = () => {
12
- const [component, setComponent] = useState('');
13
- const components = [
14
- { value: 'alerts', label: 'Alertas', component: <AlertsExamples /> },
15
- { value: 'btns', label: 'Botones', component: <BtnsExample /> },
16
- { value: 'inputs', label: 'Entradas', component: <InputsExamples /> },
17
- { value: 'cards', label: 'Cards', component: <CardsExamples /> },
18
- { value: 'dialogs', label: 'Modales', component: <DialogExamples /> },
19
- { value: 'others', label: 'Otros', component: <Others /> },
20
- // { value: 'progress-bar', label: 'Barra de progreso' },
21
- // { value: 'tabs', label: 'Pestañas' },
22
- // { value: 'text', label: 'Tipografía' },
23
- // { value: 'dropdown', label: 'Lista desplegable' },
24
- // { value: 'timer', label: 'Temporizador' },
25
- ]
13
+ const [component, setComponent] = useState('');
14
+ const components = [
15
+ { value: 'alerts', label: 'Alertas', component: <AlertsExamples /> },
16
+ { value: 'btns', label: 'Botones', component: <BtnsExample /> },
17
+ { value: 'inputs', label: 'Entradas', component: <InputsExamples /> },
18
+ { value: 'cards', label: 'Cards', component: <CardsExamples /> },
19
+ { value: 'dialogs', label: 'Modales', component: <DialogExamples /> },
20
+ { value: 'others', label: 'Otros', component: <Others /> },
21
+ ];
26
22
 
27
- return (
28
- <>
29
- {components.find((c) => c.value === component)?.component ?? null}
23
+ return (
24
+ <>
25
+ <BtnContained
26
+ text="light"
27
+ onPress={() => {
28
+ setGlobalTheme('light');
29
+ }}
30
+ />
31
+ <BtnContained
32
+ text="dark"
33
+ onPress={() => {
34
+ setGlobalTheme('dark');
35
+ }}
36
+ />
37
+ <BtnContained
38
+ text="system"
39
+ onPress={() => {
40
+ setGlobalTheme('system');
41
+ }}
42
+ />
43
+ {components.find((c) => c.value === component)?.component ?? null}
30
44
 
31
- <View style={{ flex: 1, justifyContent: 'flex-end' }}>
32
- <Select
33
- label={"Componentes"}
34
- placeholder={"Selecciona el componente"}
35
- options={components}
36
- onSelect={(component) => setComponent(component)} />
37
- </View>
38
- </>
39
-
40
- );
41
- };
45
+ <View style={{ flex: 1, justifyContent: 'flex-end' }}>
46
+ <Select
47
+ label={'Componentes'}
48
+ placeholder={'Selecciona el componente'}
49
+ options={components}
50
+ onSelect={(component) => setComponent(component)}
51
+ />
52
+ </View>
53
+ </>
54
+ );
55
+ };