@julseb-lib/react 0.1.1 → 0.1.2

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/dist/index.cjs.js +85 -86
  2. package/dist/index.es.js +81 -82
  3. package/dist/index.umd.js +85 -86
  4. package/dist/lib/components/InputPhone/InputPhone.tsx +308 -308
  5. package/dist/lib/components/InputPhone/styles.tsx +181 -182
  6. package/package.json +1 -1
package/dist/lib/components/InputPhone/styles.tsx CHANGED
@@ -1,217 +1,216 @@
1
1
  import styled, { css } from "styled-components"
2
2
  import {
3
- FONT_FAMILIES,
4
- FONT_SIZES,
5
- Mixins,
6
- SPACERS,
7
- TRANSITIONS,
8
- setDefaultTheme,
9
- COLORS_LIGHT,
10
- COLORS_DARK,
3
+ FONT_FAMILIES,
4
+ FONT_SIZES,
5
+ Mixins,
6
+ SPACERS,
7
+ TRANSITIONS,
8
+ setDefaultTheme,
9
+ COLORS_LIGHT,
10
+ COLORS_DARK,
11
11
  } from "../../"
12
12
  import type { LibInputBackground, LibValidationStatus } from "../../types"
13
13
  import { InputBaseMixin, type ILibInputBaseMixin } from "../ComponentsMixins"
14
14
 
15
15
  const StyledInputPhone = styled.input<ILibInputBaseMixin>`
16
- ${InputBaseMixin}
17
- padding-left: 0;
16
+ ${InputBaseMixin}
18
17
  `
19
18
 
20
19
  const CountryButton = styled.button<{
21
- $inputBackground: LibInputBackground | undefined
20
+ $inputBackground: LibInputBackground | undefined
22
21
  }>`
23
- height: 100%;
24
- background-color: transparent;
25
- border-radius: 0;
26
- border: none;
27
- color: ${({ theme }) => theme.FONT};
28
- ${"" /* padding: 0 ${SPACERS.XS}; */}
29
- width: calc(32px + ${SPACERS.XS} + ${SPACERS.XS});
30
- ${Mixins.Flexbox({
31
- $alignItems: "center",
32
- $justifyContent: "center",
33
- $gap: "xxs",
34
- })}
35
-
36
- &:disabled {
37
- color: ${({ theme }) => theme.GRAY_500};
38
- }
39
-
40
- ${({ $inputBackground }) => {
41
- switch ($inputBackground) {
42
- case "light":
43
- return css`
44
- color: ${COLORS_LIGHT.FONT};
45
-
46
- &:disabled {
47
- color: ${COLORS_LIGHT.GRAY_500};
48
- }
49
- `
50
- case "dark":
51
- return css`
52
- color: ${COLORS_DARK.FONT};
53
-
54
- &:disabled {
55
- color: ${COLORS_DARK.GRAY_500};
56
- }
57
- `
58
- default:
59
- return null
60
- }
61
- }}
22
+ height: 100%;
23
+ background-color: transparent;
24
+ border-radius: 0;
25
+ border: none;
26
+ color: ${({ theme }) => theme.FONT};
27
+ ${"" /* padding: 0 ${SPACERS.XS}; */}
28
+ width: calc(32px + ${SPACERS.XS} + ${SPACERS.XS});
29
+ ${Mixins.Flexbox({
30
+ $alignItems: "center",
31
+ $justifyContent: "center",
32
+ $gap: "xxs",
33
+ })}
34
+
35
+ &:disabled {
36
+ color: ${({ theme }) => theme.GRAY_500};
37
+ }
38
+
39
+ ${({ $inputBackground }) => {
40
+ switch ($inputBackground) {
41
+ case "light":
42
+ return css`
43
+ color: ${COLORS_LIGHT.FONT};
44
+
45
+ &:disabled {
46
+ color: ${COLORS_LIGHT.GRAY_500};
47
+ }
48
+ `
49
+ case "dark":
50
+ return css`
51
+ color: ${COLORS_DARK.FONT};
52
+
53
+ &:disabled {
54
+ color: ${COLORS_DARK.GRAY_500};
55
+ }
56
+ `
57
+ default:
58
+ return null
59
+ }
60
+ }}
62
61
  `
63
62
 
64
63
  const Flag = styled.img`
65
- width: 16px;
66
- object-fit: contain;
64
+ width: 16px;
65
+ object-fit: contain;
67
66
  `
68
67
 
69
68
  const CountryCode = styled.span<{
70
- $inputBackground: LibInputBackground | undefined
71
- $disabled: boolean | undefined
69
+ $inputBackground: LibInputBackground | undefined
70
+ $disabled: boolean | undefined
72
71
  }>`
73
- height: 100%;
74
- cursor: ${({ $disabled }) => ($disabled ? "not-allowed" : "default")};
75
- color: ${({ theme }) => theme.FONT};
76
- padding-right: ${SPACERS.XS};
77
- ${Mixins.Flexbox({
78
- $alignItems: "center",
79
- })}
80
-
81
- ${({ $disabled, theme }) =>
82
- $disabled &&
83
- css`
84
- color: ${theme.GRAY_500};
85
- `}
72
+ height: 100%;
73
+ cursor: ${({ $disabled }) => ($disabled ? "not-allowed" : "default")};
74
+ color: ${({ theme }) => theme.FONT};
75
+ padding-right: ${SPACERS.XS};
76
+ ${Mixins.Flexbox({
77
+ $alignItems: "center",
78
+ })}
79
+
80
+ ${({ $disabled, theme }) =>
81
+ $disabled &&
82
+ css`
83
+ color: ${theme.GRAY_500};
84
+ `}
86
85
 
87
86
  ${({ $inputBackground, $disabled }) => {
88
- switch ($inputBackground) {
89
- case "light":
90
- return css`
91
- color: ${$disabled
92
- ? COLORS_LIGHT.GRAY_500
93
- : COLORS_LIGHT.FONT};
94
- `
95
- case "dark":
96
- return css`
97
- color: ${$disabled
98
- ? COLORS_DARK.GRAY_500
99
- : COLORS_DARK.FONT};
100
- `
101
- default:
102
- return null
103
- }
104
- }}
87
+ switch ($inputBackground) {
88
+ case "light":
89
+ return css`
90
+ color: ${$disabled
91
+ ? COLORS_LIGHT.GRAY_500
92
+ : COLORS_LIGHT.FONT};
93
+ `
94
+ case "dark":
95
+ return css`
96
+ color: ${$disabled
97
+ ? COLORS_DARK.GRAY_500
98
+ : COLORS_DARK.FONT};
99
+ `
100
+ default:
101
+ return null
102
+ }
103
+ }}
105
104
  `
106
105
 
107
106
  const SearchContainer = styled.div<{
108
- $validationStatus: LibValidationStatus
109
- $inputBackground: LibInputBackground | undefined
107
+ $validationStatus: LibValidationStatus
108
+ $inputBackground: LibInputBackground | undefined
110
109
  }>`
111
- color: ${({ theme, $validationStatus }) =>
112
- $validationStatus === false ? theme.DANGER_500 : theme.PRIMARY_500};
113
- border-bottom: 1px solid ${({ theme }) => theme.GRAY_200};
114
- width: 100%;
115
- padding-bottom: ${SPACERS.XS};
116
- transition: ${TRANSITIONS.SHORT};
117
- ${Mixins.Flexbox({
118
- $alignItems: "center",
119
- $gap: "xs",
120
- })}
121
-
122
- &:has(input:focus) {
123
- border-bottom-color: ${({ theme, $validationStatus }) =>
124
- $validationStatus === false ? theme.DANGER_500 : theme.PRIMARY_500};
125
- }
126
-
127
- ${({ $inputBackground, $validationStatus }) => {
128
- switch ($inputBackground) {
129
- case "light":
130
- return css`
131
- color: ${$validationStatus === false
132
- ? COLORS_LIGHT.DANGER_500
133
- : COLORS_LIGHT.PRIMARY_500};
134
- border-color: ${COLORS_LIGHT.GRAY_200};
135
-
136
- &:has(input:focus) {
137
- border-bottom-color: ${$validationStatus === false
138
- ? COLORS_LIGHT.DANGER_500
139
- : COLORS_LIGHT.PRIMARY_500};
140
- }
141
- `
142
- case "dark":
143
- return css`
144
- color: ${$validationStatus === false
145
- ? COLORS_DARK.DANGER_500
146
- : COLORS_DARK.PRIMARY_500};
147
- border-color: ${COLORS_DARK.GRAY_200};
148
-
149
- &:has(input:focus) {
150
- border-bottom-color: ${$validationStatus === false
151
- ? COLORS_DARK.DANGER_500
152
- : COLORS_DARK.PRIMARY_500};
153
- }
154
- `
155
- default:
156
- return null
157
- }
158
- }}
110
+ color: ${({ theme, $validationStatus }) =>
111
+ $validationStatus === false ? theme.DANGER_500 : theme.PRIMARY_500};
112
+ border-bottom: 1px solid ${({ theme }) => theme.GRAY_200};
113
+ width: 100%;
114
+ padding-bottom: ${SPACERS.XS};
115
+ transition: ${TRANSITIONS.SHORT};
116
+ ${Mixins.Flexbox({
117
+ $alignItems: "center",
118
+ $gap: "xs",
119
+ })}
120
+
121
+ &:has(input:focus) {
122
+ border-bottom-color: ${({ theme, $validationStatus }) =>
123
+ $validationStatus === false ? theme.DANGER_500 : theme.PRIMARY_500};
124
+ }
125
+
126
+ ${({ $inputBackground, $validationStatus }) => {
127
+ switch ($inputBackground) {
128
+ case "light":
129
+ return css`
130
+ color: ${$validationStatus === false
131
+ ? COLORS_LIGHT.DANGER_500
132
+ : COLORS_LIGHT.PRIMARY_500};
133
+ border-color: ${COLORS_LIGHT.GRAY_200};
134
+
135
+ &:has(input:focus) {
136
+ border-bottom-color: ${$validationStatus === false
137
+ ? COLORS_LIGHT.DANGER_500
138
+ : COLORS_LIGHT.PRIMARY_500};
139
+ }
140
+ `
141
+ case "dark":
142
+ return css`
143
+ color: ${$validationStatus === false
144
+ ? COLORS_DARK.DANGER_500
145
+ : COLORS_DARK.PRIMARY_500};
146
+ border-color: ${COLORS_DARK.GRAY_200};
147
+
148
+ &:has(input:focus) {
149
+ border-bottom-color: ${$validationStatus === false
150
+ ? COLORS_DARK.DANGER_500
151
+ : COLORS_DARK.PRIMARY_500};
152
+ }
153
+ `
154
+ default:
155
+ return null
156
+ }
157
+ }}
159
158
  `
160
159
 
161
160
  const SearchInput = styled.input<{
162
- $inputBackground: LibInputBackground | undefined
161
+ $inputBackground: LibInputBackground | undefined
163
162
  }>`
164
- border: none;
165
- padding: 0;
166
- font-family: ${FONT_FAMILIES.BODY};
167
- font-size: ${FONT_SIZES.BODY};
168
- color: ${({ theme }) => theme.FONT};
169
- outline: none;
170
- width: 100%;
171
- background-color: transparent;
172
-
173
- &::placeholder {
174
- color: ${({ theme }) => theme.GRAY_400};
175
- }
176
-
177
- ${({ $inputBackground }) => {
178
- switch ($inputBackground) {
179
- case "light":
180
- return css`
181
- color: ${COLORS_LIGHT.FONT};
182
-
183
- &::placeholder {
184
- color: ${COLORS_LIGHT.GRAY_400};
185
- }
186
- `
187
- case "dark":
188
- return css`
189
- color: ${COLORS_DARK.FONT};
190
-
191
- &::placeholder {
192
- color: ${COLORS_DARK.GRAY_400};
193
- }
194
- `
195
- default:
196
- return null
197
- }
198
- }}
163
+ border: none;
164
+ padding: 0;
165
+ font-family: ${FONT_FAMILIES.BODY};
166
+ font-size: ${FONT_SIZES.BODY};
167
+ color: ${({ theme }) => theme.FONT};
168
+ outline: none;
169
+ width: 100%;
170
+ background-color: transparent;
171
+
172
+ &::placeholder {
173
+ color: ${({ theme }) => theme.GRAY_400};
174
+ }
175
+
176
+ ${({ $inputBackground }) => {
177
+ switch ($inputBackground) {
178
+ case "light":
179
+ return css`
180
+ color: ${COLORS_LIGHT.FONT};
181
+
182
+ &::placeholder {
183
+ color: ${COLORS_LIGHT.GRAY_400};
184
+ }
185
+ `
186
+ case "dark":
187
+ return css`
188
+ color: ${COLORS_DARK.FONT};
189
+
190
+ &::placeholder {
191
+ color: ${COLORS_DARK.GRAY_400};
192
+ }
193
+ `
194
+ default:
195
+ return null
196
+ }
197
+ }}
199
198
  `
200
199
 
201
200
  setDefaultTheme([
202
- StyledInputPhone,
203
- CountryButton,
204
- SearchContainer,
205
- SearchInput,
206
- Flag,
207
- CountryCode,
201
+ StyledInputPhone,
202
+ CountryButton,
203
+ SearchContainer,
204
+ SearchInput,
205
+ Flag,
206
+ CountryCode,
208
207
  ])
209
208
 
210
209
  export {
211
- StyledInputPhone,
212
- CountryButton,
213
- SearchContainer,
214
- SearchInput,
215
- Flag,
216
- CountryCode,
210
+ StyledInputPhone,
211
+ CountryButton,
212
+ SearchContainer,
213
+ SearchInput,
214
+ Flag,
215
+ CountryCode,
217
216
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@julseb-lib/react",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "scripts": {