meticulous-ui 1.6.1 → 1.6.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 (4) hide show
  1. package/components/Input/Input/Input.js +53 -44
  2. package/components/Input/Input/helpers.js +27 -24
  3. package/components/Input/Input/styles.js +38 -22
  4. package/package.json +1 -1
package/components/Input/Input/Input.js CHANGED
@@ -1,60 +1,69 @@
1
1
  import { j as o } from "../../../_virtual/jsx-runtime.js";
2
- import I from "../../../node_modules/lodash-es/omit.js";
3
- import { useState as g } from "react";
4
- import { Wrapper as $, InputBox as w, Label as y, HelperText as H } from "./styles.js";
5
- import { getColor as L } from "./helpers.js";
6
- import P from "../../../colors/white.js";
7
- const D = ({
2
+ import w from "../../../node_modules/lodash-es/omit.js";
3
+ import { useState as z } from "react";
4
+ import { Wrapper as H, InputBox as P, LeftIconWrapper as q, RightIconWrapper as A, Label as D, HelperText as G } from "./styles.js";
5
+ import { getColor as J, getIcon as I } from "./helpers.js";
6
+ import K from "../../../colors/white.js";
7
+ import M from "../../../colors/grey.js";
8
+ const Y = ({
8
9
  label: t,
9
- onChange: u,
10
- value: e,
11
- type: d,
12
- hasError: n,
13
- name: f = "input",
14
- color: h = "blue",
15
- size: a = "20",
16
- disableAutoComplete: x,
17
- helperText: p = "",
18
- background: i = P,
19
- ...l
10
+ onChange: g,
11
+ value: n,
12
+ type: F,
13
+ hasError: e,
14
+ name: C = "input",
15
+ color: y = "blue",
16
+ size: B = "20",
17
+ disableAutoComplete: L,
18
+ helperText: m = "",
19
+ background: h = K,
20
+ leftIcon: f,
21
+ rightIcon: d,
22
+ ...u
20
23
  }) => {
21
- const [s, m] = g(!1), r = L(h), j = () => m(!0), C = () => m(!1), F = (B) => {
22
- u(B);
23
- }, { placeholder: c } = l;
24
- return /* @__PURE__ */ o.jsxs($, { children: [
24
+ const [s, a] = z(!1), c = J(y), R = () => a(!0), W = () => a(!1), S = ($) => {
25
+ g($);
26
+ }, { placeholder: r } = u, x = { color: M.m500, size: 22 }, i = I(f), p = I(d), l = !!(f && i), j = !!(d && p);
27
+ return /* @__PURE__ */ o.jsxs(H, { children: [
25
28
  /* @__PURE__ */ o.jsx(
26
- w,
29
+ P,
27
30
  {
28
- type: d,
29
- name: f,
30
- hasError: n,
31
- size: a,
32
- value: e,
31
+ type: F,
32
+ name: C,
33
+ hasError: e,
34
+ size: B,
35
+ value: n,
33
36
  $isFocused: s,
34
- $shade: r,
35
- background: i,
36
- onFocus: j,
37
- onBlur: C,
38
- onChange: F,
39
- autoComplete: x ? "off" : "on",
40
- ...I(l, "placeholder")
37
+ $shade: c,
38
+ background: h,
39
+ hasLeftIcon: l,
40
+ hasRightIcon: j,
41
+ onFocus: R,
42
+ onBlur: W,
43
+ onChange: S,
44
+ autoComplete: L ? "off" : "on",
45
+ ...w(u, "placeholder")
41
46
  }
42
47
  ),
43
- (t || c && !e) && /* @__PURE__ */ o.jsx(
44
- y,
48
+ i && /* @__PURE__ */ o.jsx(q, { children: i(x) }),
49
+ p && /* @__PURE__ */ o.jsx(A, { children: p(x) }),
50
+ (t || r && !n) && /* @__PURE__ */ o.jsx(
51
+ D,
45
52
  {
46
- hasError: n,
53
+ hasError: e,
47
54
  $isFocused: s,
48
- $shade: r,
49
- value: e,
50
- background: i,
51
- onlyPh: c && !t,
52
- children: t || c
55
+ $shade: c,
56
+ value: n,
57
+ background: h,
58
+ hasLeftIcon: l,
59
+ hasRightIcon: j,
60
+ onlyPh: r && !t,
61
+ children: t || r
53
62
  }
54
63
  ),
55
- p && /* @__PURE__ */ o.jsx(H, { hasError: n, $isFocused: s, $shade: r, children: p })
64
+ m && /* @__PURE__ */ o.jsx(G, { hasError: e, $isFocused: s, $shade: c, hasLeftIcon: l, children: m })
56
65
  ] });
57
66
  };
58
67
  export {
59
- D as default
68
+ Y as default
60
69
  };
package/components/Input/Input/helpers.js CHANGED
@@ -1,30 +1,33 @@
1
- import l from "../../../node_modules/lodash-es/get.js";
2
- import n from "../../../colors/blue.js";
3
- import t from "../../../colors/green.js";
1
+ import n from "../../../node_modules/lodash-es/get.js";
2
+ import l from "../../../colors/blue.js";
3
+ import i from "../../../colors/green.js";
4
4
  import p from "../../../colors/red.js";
5
5
  import g from "../../../colors/yellow.js";
6
- import a from "../../../colors/orange.js";
7
- import u from "../../../colors/black.js";
8
- import r from "../../../colors/grey.js";
9
- import y from "../../../colors/violet.js";
10
- import b from "../../../colors/teal.js";
11
- import c from "../../../colors/purple.js";
12
- import k from "../../../colors/pink.js";
13
- const s = {
14
- blue: n.m500,
15
- green: t.m500,
6
+ import u from "../../../colors/orange.js";
7
+ import a from "../../../colors/black.js";
8
+ import e from "../../../colors/grey.js";
9
+ import c from "../../../colors/violet.js";
10
+ import s from "../../../colors/teal.js";
11
+ import y from "../../../colors/purple.js";
12
+ import b from "../../../colors/pink.js";
13
+ import d from "../../Icons/index.js";
14
+ const k = {
15
+ blue: l.m500,
16
+ green: i.m500,
16
17
  red: p.m500,
17
- green: t.m500,
18
+ green: i.m500,
18
19
  yellow: g.m500,
19
- orange: a.m500,
20
- black: u.m500,
21
- grey: r.m500,
22
- violet: y.m500,
23
- teal: b.m500,
24
- purple: c.m500,
25
- pink: k.m500
26
- }, H = (m) => l(s, m, r.m500), L = ({ hasError: m, $shade: i, $isFocused: o, value: e, onlyPh: f }) => m ? typeof e == "string" && !e && !o ? r.m500 : p.m400 : o && !f ? i : r.m500;
20
+ orange: u.m500,
21
+ black: a.m500,
22
+ grey: e.m500,
23
+ violet: c.m500,
24
+ teal: s.m500,
25
+ purple: y.m500,
26
+ pink: b.m500
27
+ }, j = (r) => n(k, r, e.m500), q = ({ hasError: r, $shade: m, $isFocused: o, value: t, onlyPh: f }) => r ? typeof t == "string" && !t && !o ? e.m500 : p.m400 : o && !f ? m : e.m500, z = (r) => n(d, r, null), B = ({ hasLeftIcon: r, hasRightIcon: m }) => r && m ? "0 2.4rem" : r ? "0 0.6rem 0 2.4rem" : m ? "0 2.4rem 0 0.6rem" : "0 0.6rem";
27
28
  export {
28
- H as getColor,
29
- L as getCssShade
29
+ j as getColor,
30
+ q as getCssShade,
31
+ z as getIcon,
32
+ B as getPadding
30
33
  };
package/components/Input/Input/styles.js CHANGED
@@ -1,14 +1,14 @@
1
- import e, { css as i } from "../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
2
- import s from "../../../colors/black.js";
3
- import m from "../../../colors/grey.js";
4
- import a from "../../../colors/red.js";
5
- import { getCssShade as t } from "./helpers.js";
6
- const u = e.input`
1
+ import t, { css as n } from "../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
2
+ import a from "../../../colors/black.js";
3
+ import l from "../../../colors/grey.js";
4
+ import m from "../../../colors/red.js";
5
+ import { getPadding as p, getCssShade as i } from "./helpers.js";
6
+ const g = t.input`
7
7
  height: 3rem;
8
8
  border-radius: 0.4rem;
9
9
  font-size: 1.4rem;
10
- border: 2px solid ${({ hasError: o }) => o ? a.m400 : s.m200};
11
- padding: 0 0.6rem;
10
+ border: 2px solid ${({ hasError: o }) => o ? m.m400 : a.m200};
11
+ padding: ${p};
12
12
  font-weight: 400;
13
13
  transition: border-color 0.3s ease;
14
14
  background-color: transparent !important;
@@ -24,7 +24,7 @@ const u = e.input`
24
24
  }
25
25
 
26
26
  &::placeholder {
27
- color: ${m.m500};
27
+ color: ${l.m500};
28
28
  font-weight: 300;
29
29
  font-size: 1.4rem;
30
30
  background-color: ${({ background: o }) => o};
@@ -33,17 +33,31 @@ const u = e.input`
33
33
 
34
34
  &:focus {
35
35
  border: 2px solid
36
- ${({ $shade: o, hasError: r }) => t({ $shade: o, hasError: r, $isFocused: !0 })};
36
+ ${({ $shade: o, hasError: e }) => i({ $shade: o, hasError: e, $isFocused: !0 })};
37
37
  outline: none;
38
38
  }
39
- `, b = e.p`
39
+ `, h = t.p`
40
40
  margin-top: 0.4rem;
41
41
  margin-left: 0.4rem;
42
42
  font-size: 0.8rem;
43
- color: ${t};
44
- `, g = e.div`
43
+ color: ${i};
44
+ `, v = t.div`
45
45
  position: relative;
46
- `, k = e.div`
46
+ width: fit-content;
47
+ `, w = t.div`
48
+ position: absolute;
49
+ top: 0.8rem;
50
+ left: 0.6rem;
51
+ `, $ = t.div`
52
+ position: absolute;
53
+ top: 0.8rem;
54
+ right: 0.6rem;
55
+ `;
56
+ t.div`
57
+ position: relative;
58
+ width: 100%;
59
+ `;
60
+ const k = t.div`
47
61
  position: absolute;
48
62
  top: -0.4rem;
49
63
  left: 0.5rem;
@@ -53,22 +67,24 @@ const u = e.input`
53
67
  transition: 0.25s;
54
68
  font-weight: 400;
55
69
  pointer-events: none;
56
- color: ${t};
70
+ color: ${i};
57
71
 
58
- ${({ $isFocused: o, value: r, onlyPh: n }) => !n && (o || r) ? i`
72
+ ${({ $isFocused: o, value: e, onlyPh: s }) => !s && (o || e) ? n`
59
73
  top: -0.4rem;
60
- left: 0.5rem;
74
+ left: ${({ hasLeftIcon: r }) => r ? 2.2 : 0.5}rem;
61
75
  padding: 0 0.4rem;
62
76
  margin: 0;
63
- ` : i`
77
+ ` : n`
64
78
  top: 0.8rem;
65
- left: 0.5rem;
79
+ left: ${({ hasLeftIcon: r }) => r ? 2.2 : 0.5}rem;
66
80
  font-size: 1.4rem;
67
81
  `}
68
82
  `;
69
83
  export {
70
- b as HelperText,
71
- u as InputBox,
84
+ h as HelperText,
85
+ g as InputBox,
72
86
  k as Label,
73
- g as Wrapper
87
+ w as LeftIconWrapper,
88
+ $ as RightIconWrapper,
89
+ v as Wrapper
74
90
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "meticulous-ui",
3
- "version": "1.6.1",
3
+ "version": "1.6.2",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "repository": {