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