meticulous-ui 1.6.0 → 1.6.1

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 +50 -35
  2. package/components/Input/Input/helpers.js +21 -21
  3. package/components/Input/Input/styles.js +29 -18
  4. package/package.json +1 -1
package/components/Input/Input/Input.js CHANGED
@@ -1,45 +1,60 @@
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,
10
- hasError: e,
11
- name: a = "input",
12
- color: d = "blue",
13
- size: i = "20",
14
- disableAutoComplete: m,
15
- helperText: u = "",
16
- ...f
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 = ({
8
+ 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
17
20
  }) => {
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: [
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: [
22
25
  /* @__PURE__ */ o.jsx(
23
- B,
26
+ w,
24
27
  {
25
- type: p,
26
- name: a,
27
- 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
28
+ type: d,
29
+ name: f,
30
+ hasError: n,
31
+ size: a,
32
+ value: e,
33
+ $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
41
  }
38
42
  ),
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 })
43
+ (t || c && !e) && /* @__PURE__ */ o.jsx(
44
+ y,
45
+ {
46
+ hasError: n,
47
+ $isFocused: s,
48
+ $shade: r,
49
+ value: e,
50
+ background: i,
51
+ onlyPh: c && !t,
52
+ children: t || c
53
+ }
54
+ ),
55
+ p && /* @__PURE__ */ o.jsx(H, { hasError: n, $isFocused: s, $shade: r, children: p })
41
56
  ] });
42
57
  };
43
58
  export {
44
- W as default
59
+ D as default
45
60
  };
package/components/Input/Input/helpers.js CHANGED
@@ -1,30 +1,30 @@
1
- import f from "../../../node_modules/lodash-es/get.js";
2
- import l from "../../../colors/blue.js";
1
+ import l from "../../../node_modules/lodash-es/get.js";
2
+ import n from "../../../colors/blue.js";
3
3
  import t 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";
7
- import a from "../../../colors/black.js";
5
+ import g from "../../../colors/yellow.js";
6
+ import a from "../../../colors/orange.js";
7
+ import u from "../../../colors/black.js";
8
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";
13
- const k = {
14
- blue: l.m500,
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
15
  green: t.m500,
16
16
  red: p.m500,
17
17
  green: t.m500,
18
- yellow: n.m500,
19
- orange: g.m500,
20
- black: a.m500,
18
+ yellow: g.m500,
19
+ orange: a.m500,
20
+ black: u.m500,
21
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
+ 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;
27
27
  export {
28
- E as getColor,
29
- H as getCssShade
28
+ H as getColor,
29
+ L as getCssShade
30
30
  };
package/components/Input/Input/styles.js CHANGED
@@ -1,12 +1,13 @@
1
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`
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`
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
+ border: 2px solid ${({ hasError: o }) => o ? a.m400 : s.m200};
10
11
  padding: 0 0.6rem;
11
12
  font-weight: 400;
12
13
  transition: border-color 0.3s ease;
@@ -22,33 +23,43 @@ const d = e.input`
22
23
  transition: background-color 9999s ease-in-out 0s;
23
24
  }
24
25
 
26
+ &::placeholder {
27
+ color: ${m.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: r }) => t({ $shade: o, hasError: r, $isFocused: !0 })};
28
37
  outline: none;
29
38
  }
30
- `, f = e.p`
39
+ `, b = e.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: ${t};
44
+ `, g = e.div`
36
45
  position: relative;
37
- `, u = e.div`
46
+ `, k = e.div`
38
47
  position: absolute;
39
48
  top: -0.4rem;
40
49
  left: 0.5rem;
41
50
  font-size: 0.8rem;
42
- background-color: white;
43
- padding: 0 0.4rem;
51
+ background-color: ${({ background: o }) => o};
52
+ margin: 0 0.4rem;
44
53
  transition: 0.25s;
45
54
  font-weight: 400;
46
55
  pointer-events: none;
47
- color: ${r};
56
+ color: ${t};
48
57
 
49
- ${({ $isFocused: o, value: t }) => o || t ? i`
58
+ ${({ $isFocused: o, value: r, onlyPh: n }) => !n && (o || r) ? i`
50
59
  top: -0.4rem;
51
60
  left: 0.5rem;
61
+ padding: 0 0.4rem;
62
+ margin: 0;
52
63
  ` : i`
53
64
  top: 0.8rem;
54
65
  left: 0.5rem;
@@ -56,8 +67,8 @@ const d = e.input`
56
67
  `}
57
68
  `;
58
69
  export {
59
- f as HelperText,
60
- d as InputBox,
61
- u as Label,
62
- c as Wrapper
70
+ b as HelperText,
71
+ u as InputBox,
72
+ k as Label,
73
+ g as Wrapper
63
74
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "meticulous-ui",
3
- "version": "1.6.0",
3
+ "version": "1.6.1",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "repository": {