@julseb-lib/react 0.1.0 → 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 (10) hide show
  1. package/dist/index.cjs.js +86 -87
  2. package/dist/index.es.js +83 -84
  3. package/dist/index.umd.js +86 -87
  4. package/dist/lib/components/Avatar/Avatar.tsx +1 -1
  5. package/dist/lib/components/Avatar/AvatarFunction.tsx +0 -3
  6. package/dist/lib/components/InputImage/InputImage.tsx +1 -1
  7. package/dist/lib/components/InputPhone/InputPhone.tsx +308 -308
  8. package/dist/lib/components/InputPhone/styles.tsx +181 -182
  9. package/dist/lib/types/component-items.ts +185 -185
  10. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -7914,7 +7914,7 @@ const L3 = ({
7914
7914
  ${h ? `#${h}` : `.${u}`} {
7915
7915
  --avatar-size: ${m}px;
7916
7916
  }
7917
- `), console.log(z == null ? void 0 : z.fallbackBackgroundColor), /* @__PURE__ */ t.jsxs(
7917
+ `), /* @__PURE__ */ t.jsxs(
7918
7918
  z4,
7919
7919
  {
7920
7920
  "data-testid": d && l ? `${l}.Avatar` : l,
@@ -7978,7 +7978,7 @@ const L3 = ({
7978
7978
  letter: f,
7979
7979
  icon: m,
7980
7980
  iconSize: o = r2(a),
7981
- backgroundColor: z = "danger",
7981
+ backgroundColor: z = "primary",
7982
7982
  contentColor: n = z === "white" ? "primary" : z === "black" ? "white" : "background",
7983
7983
  className: p,
7984
7984
  containerStyle: M,
@@ -12083,149 +12083,148 @@ const Qh = ({
12083
12083
  { name: "Zambia", dial_code: "+260", code: "zm", flag: kt },
12084
12084
  { name: "Zimbabwe", dial_code: "+263", code: "zw", flag: bt }
12085
12085
  ], t7 = k.input`
12086
- ${Y2}
12087
- padding-left: 0;
12086
+ ${Y2}
12088
12087
  `, h7 = k.button`
12089
- height: 100%;
12090
- background-color: transparent;
12091
- border-radius: 0;
12092
- border: none;
12093
- color: ${({ theme: l }) => l.FONT};
12094
- ${""}
12095
- width: calc(32px + ${$.XS} + ${$.XS});
12096
- ${s.Flexbox({
12088
+ height: 100%;
12089
+ background-color: transparent;
12090
+ border-radius: 0;
12091
+ border: none;
12092
+ color: ${({ theme: l }) => l.FONT};
12093
+ ${""}
12094
+ width: calc(32px + ${$.XS} + ${$.XS});
12095
+ ${s.Flexbox({
12097
12096
  $alignItems: "center",
12098
12097
  $justifyContent: "center",
12099
12098
  $gap: "xxs"
12100
12099
  })}
12101
12100
 
12102
- &:disabled {
12103
- color: ${({ theme: l }) => l.GRAY_500};
12104
- }
12101
+ &:disabled {
12102
+ color: ${({ theme: l }) => l.GRAY_500};
12103
+ }
12105
12104
 
12106
- ${({ $inputBackground: l }) => {
12105
+ ${({ $inputBackground: l }) => {
12107
12106
  switch (l) {
12108
12107
  case "light":
12109
12108
  return x`
12110
- color: ${g.FONT};
12109
+ color: ${g.FONT};
12111
12110
 
12112
- &:disabled {
12113
- color: ${g.GRAY_500};
12114
- }
12115
- `;
12111
+ &:disabled {
12112
+ color: ${g.GRAY_500};
12113
+ }
12114
+ `;
12116
12115
  case "dark":
12117
12116
  return x`
12118
- color: ${b.FONT};
12117
+ color: ${b.FONT};
12119
12118
 
12120
- &:disabled {
12121
- color: ${b.GRAY_500};
12122
- }
12123
- `;
12119
+ &:disabled {
12120
+ color: ${b.GRAY_500};
12121
+ }
12122
+ `;
12124
12123
  default:
12125
12124
  return null;
12126
12125
  }
12127
12126
  }}
12128
12127
  `, T0 = k.img`
12129
- width: 16px;
12130
- object-fit: contain;
12128
+ width: 16px;
12129
+ object-fit: contain;
12131
12130
  `, d7 = k.span`
12132
- height: 100%;
12133
- cursor: ${({ $disabled: l }) => l ? "not-allowed" : "default"};
12134
- color: ${({ theme: l }) => l.FONT};
12135
- padding-right: ${$.XS};
12136
- ${s.Flexbox({
12131
+ height: 100%;
12132
+ cursor: ${({ $disabled: l }) => l ? "not-allowed" : "default"};
12133
+ color: ${({ theme: l }) => l.FONT};
12134
+ padding-right: ${$.XS};
12135
+ ${s.Flexbox({
12137
12136
  $alignItems: "center"
12138
12137
  })}
12139
12138
 
12140
- ${({ $disabled: l, theme: c }) => l && x`
12141
- color: ${c.GRAY_500};
12142
- `}
12139
+ ${({ $disabled: l, theme: c }) => l && x`
12140
+ color: ${c.GRAY_500};
12141
+ `}
12143
12142
 
12144
12143
  ${({ $inputBackground: l, $disabled: c }) => {
12145
12144
  switch (l) {
12146
12145
  case "light":
12147
12146
  return x`
12148
- color: ${c ? g.GRAY_500 : g.FONT};
12149
- `;
12147
+ color: ${c ? g.GRAY_500 : g.FONT};
12148
+ `;
12150
12149
  case "dark":
12151
12150
  return x`
12152
- color: ${c ? b.GRAY_500 : b.FONT};
12153
- `;
12151
+ color: ${c ? b.GRAY_500 : b.FONT};
12152
+ `;
12154
12153
  default:
12155
12154
  return null;
12156
12155
  }
12157
12156
  }}
12158
12157
  `, i7 = k.div`
12159
- color: ${({ theme: l, $validationStatus: c }) => c === !1 ? l.DANGER_500 : l.PRIMARY_500};
12160
- border-bottom: 1px solid ${({ theme: l }) => l.GRAY_200};
12161
- width: 100%;
12162
- padding-bottom: ${$.XS};
12163
- transition: ${B.SHORT};
12164
- ${s.Flexbox({
12158
+ color: ${({ theme: l, $validationStatus: c }) => c === !1 ? l.DANGER_500 : l.PRIMARY_500};
12159
+ border-bottom: 1px solid ${({ theme: l }) => l.GRAY_200};
12160
+ width: 100%;
12161
+ padding-bottom: ${$.XS};
12162
+ transition: ${B.SHORT};
12163
+ ${s.Flexbox({
12165
12164
  $alignItems: "center",
12166
12165
  $gap: "xs"
12167
12166
  })}
12168
12167
 
12169
- &:has(input:focus) {
12170
- border-bottom-color: ${({ theme: l, $validationStatus: c }) => c === !1 ? l.DANGER_500 : l.PRIMARY_500};
12171
- }
12168
+ &:has(input:focus) {
12169
+ border-bottom-color: ${({ theme: l, $validationStatus: c }) => c === !1 ? l.DANGER_500 : l.PRIMARY_500};
12170
+ }
12172
12171
 
12173
- ${({ $inputBackground: l, $validationStatus: c }) => {
12172
+ ${({ $inputBackground: l, $validationStatus: c }) => {
12174
12173
  switch (l) {
12175
12174
  case "light":
12176
12175
  return x`
12177
- color: ${c === !1 ? g.DANGER_500 : g.PRIMARY_500};
12178
- border-color: ${g.GRAY_200};
12176
+ color: ${c === !1 ? g.DANGER_500 : g.PRIMARY_500};
12177
+ border-color: ${g.GRAY_200};
12179
12178
 
12180
- &:has(input:focus) {
12181
- border-bottom-color: ${c === !1 ? g.DANGER_500 : g.PRIMARY_500};
12182
- }
12183
- `;
12179
+ &:has(input:focus) {
12180
+ border-bottom-color: ${c === !1 ? g.DANGER_500 : g.PRIMARY_500};
12181
+ }
12182
+ `;
12184
12183
  case "dark":
12185
12184
  return x`
12186
- color: ${c === !1 ? b.DANGER_500 : b.PRIMARY_500};
12187
- border-color: ${b.GRAY_200};
12185
+ color: ${c === !1 ? b.DANGER_500 : b.PRIMARY_500};
12186
+ border-color: ${b.GRAY_200};
12188
12187
 
12189
- &:has(input:focus) {
12190
- border-bottom-color: ${c === !1 ? b.DANGER_500 : b.PRIMARY_500};
12191
- }
12192
- `;
12188
+ &:has(input:focus) {
12189
+ border-bottom-color: ${c === !1 ? b.DANGER_500 : b.PRIMARY_500};
12190
+ }
12191
+ `;
12193
12192
  default:
12194
12193
  return null;
12195
12194
  }
12196
12195
  }}
12197
12196
  `, f7 = k.input`
12198
- border: none;
12199
- padding: 0;
12200
- font-family: ${H2.BODY};
12201
- font-size: ${U.BODY};
12202
- color: ${({ theme: l }) => l.FONT};
12203
- outline: none;
12204
- width: 100%;
12205
- background-color: transparent;
12197
+ border: none;
12198
+ padding: 0;
12199
+ font-family: ${H2.BODY};
12200
+ font-size: ${U.BODY};
12201
+ color: ${({ theme: l }) => l.FONT};
12202
+ outline: none;
12203
+ width: 100%;
12204
+ background-color: transparent;
12206
12205
 
12207
- &::placeholder {
12208
- color: ${({ theme: l }) => l.GRAY_400};
12209
- }
12206
+ &::placeholder {
12207
+ color: ${({ theme: l }) => l.GRAY_400};
12208
+ }
12210
12209
 
12211
- ${({ $inputBackground: l }) => {
12210
+ ${({ $inputBackground: l }) => {
12212
12211
  switch (l) {
12213
12212
  case "light":
12214
12213
  return x`
12215
- color: ${g.FONT};
12214
+ color: ${g.FONT};
12216
12215
 
12217
- &::placeholder {
12218
- color: ${g.GRAY_400};
12219
- }
12220
- `;
12216
+ &::placeholder {
12217
+ color: ${g.GRAY_400};
12218
+ }
12219
+ `;
12221
12220
  case "dark":
12222
12221
  return x`
12223
- color: ${b.FONT};
12222
+ color: ${b.FONT};
12224
12223
 
12225
- &::placeholder {
12226
- color: ${b.GRAY_400};
12227
- }
12228
- `;
12224
+ &::placeholder {
12225
+ color: ${b.GRAY_400};
12226
+ }
12227
+ `;
12229
12228
  default:
12230
12229
  return null;
12231
12230
  }