@nordcom/nordstar-input 0.0.29 → 0.0.30

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 (5) hide show
  1. package/dist/input.css +32 -23
  2. package/dist/input.d.ts.map +1 -1
  3. package/dist/input.js +7 -8
  4. package/dist/input.js.map +1 -1
  5. package/package.json +2 -2
package/dist/input.css CHANGED
@@ -1,4 +1,4 @@
1
- ._container_1q61c_1 {
1
+ ._container_t3rdm_1 {
2
2
  position: relative;
3
3
  display: inline-flex;
4
4
  flex-direction: column;
@@ -9,49 +9,57 @@
9
9
  transition: 150ms ease-in-out border-color, 150ms ease-in-out color;
10
10
  border-radius: var(--border-radius);
11
11
  }
12
- ._container_1q61c_1:is([data-variant=outline], :not([data-variant])) {
12
+ ._container_t3rdm_1:is([data-variant=outline], :not([data-variant])) {
13
13
  border-width: var(--border-width-half);
14
14
  border-style: solid;
15
15
  }
16
- ._container_1q61c_1:is([data-variant=outline], :not([data-variant]))[data-color=default] {
17
- border-color: var(--color-foreground-secondary);
16
+ ._container_t3rdm_1:is([data-variant=outline], :not([data-variant])):not(:is([data-color=primary], [data-color=secondary])) {
17
+ border-color: var(--color);
18
18
  }
19
- ._container_1q61c_1:is([data-variant=outline], :not([data-variant]))[data-color=default] ._label_1q61c_19 {
20
- color: var(--color-foreground-secondary);
19
+ ._container_t3rdm_1:is([data-variant=outline], :not([data-variant])):not(:is([data-color=primary], [data-color=secondary]))[data-color=default] {
20
+ --color: var(--color-foreground-secondary);
21
+ --color-highlight: var(--color-foreground-secondary);
21
22
  }
22
- :is(:focus, :focus-within) > ._container_1q61c_1:is([data-variant=outline], :not([data-variant]))[data-color=default] {
23
- border-color: var(--color-foreground);
23
+ ._container_t3rdm_1:is([data-variant=outline], :not([data-variant])):not(:is([data-color=primary], [data-color=secondary]))[data-color=foreground] {
24
+ --color: var(--color-foreground-secondary);
25
+ --color-highlight: var(--color-foreground);
26
+ }
27
+ ._container_t3rdm_1:is([data-variant=outline], :not([data-variant])):not(:is([data-color=primary], [data-color=secondary])) ._label_t3rdm_27 {
28
+ color: var(--color);
29
+ }
30
+ :is(:focus, :focus-within) > ._container_t3rdm_1:is([data-variant=outline], :not([data-variant])):not(:is([data-color=primary], [data-color=secondary])) {
31
+ border-color: var(--color-highlight);
24
32
  }
25
- ._container_1q61c_1:is([data-variant=outline], :not([data-variant]))[data-color=primary] {
33
+ ._container_t3rdm_1:is([data-variant=outline], :not([data-variant]))[data-color=primary] {
26
34
  border-color: var(--color-accent-primary);
27
35
  }
28
- ._container_1q61c_1:is([data-variant=outline], :not([data-variant]))[data-color=secondary] {
36
+ ._container_t3rdm_1:is([data-variant=outline], :not([data-variant]))[data-color=secondary] {
29
37
  border-color: var(--color-accent-secondary);
30
38
  }
31
- ._container_1q61c_1:is([data-variant=outline], :not([data-variant])):is([data-color=primary], [data-color=secondary]) {
39
+ ._container_t3rdm_1:is([data-variant=outline], :not([data-variant])):is([data-color=primary], [data-color=secondary]) {
32
40
  opacity: 0.85;
33
41
  }
34
- :is(:focus, :focus-within) > ._container_1q61c_1:is([data-variant=outline], :not([data-variant])):is([data-color=primary], [data-color=secondary]) {
42
+ :is(:focus, :focus-within) > ._container_t3rdm_1:is([data-variant=outline], :not([data-variant])):is([data-color=primary], [data-color=secondary]) {
35
43
  opacity: 1;
36
44
  }
37
- ._container_1q61c_1:is([data-variant=outline], :not([data-variant])):is(:not(:has(._input_1q61c_37[value=""], ._input_1q61c_37:not([value]))), :focus, :focus-within):not(:has(._input_1q61c_37:invalid)) {
45
+ ._container_t3rdm_1:is([data-variant=outline], :not([data-variant])):is(:not(:has(._input_t3rdm_45[value=""], ._input_t3rdm_45:not([value]))), :focus, :focus-within):not(:has(._input_t3rdm_45:invalid)) {
38
46
  opacity: 1;
39
47
  }
40
- ._container_1q61c_1:is([data-variant=outline], :not([data-variant])):is(:not(:has(._input_1q61c_37[value=""], ._input_1q61c_37:not([value]))), :focus, :focus-within):not(:has(._input_1q61c_37:invalid))[data-color=default] {
48
+ ._container_t3rdm_1:is([data-variant=outline], :not([data-variant])):is(:not(:has(._input_t3rdm_45[value=""], ._input_t3rdm_45:not([value]))), :focus, :focus-within):not(:has(._input_t3rdm_45:invalid))[data-color=default] {
41
49
  border-color: var(--color-foreground);
42
50
  }
43
- ._container_1q61c_1:is([data-variant=outline], :not([data-variant])):is(:not(:has(._input_1q61c_37[value=""], ._input_1q61c_37:not([value]))), :focus, :focus-within):not(:has(._input_1q61c_37:invalid)) ._label_1q61c_19 {
51
+ ._container_t3rdm_1:is([data-variant=outline], :not([data-variant])):is(:not(:has(._input_t3rdm_45[value=""], ._input_t3rdm_45:not([value]))), :focus, :focus-within):not(:has(._input_t3rdm_45:invalid)) ._label_t3rdm_27 {
44
52
  color: inherit;
45
53
  }
46
- ._container_1q61c_1:is([data-variant=outline], :not([data-variant])):has(._input_1q61c_37:invalid) {
54
+ ._container_t3rdm_1:is([data-variant=outline], :not([data-variant])):has(._input_t3rdm_45:invalid) {
47
55
  opacity: 1;
48
56
  border-color: var(--color-error);
49
57
  color: var(--color-error);
50
58
  }
51
- ._container_1q61c_1:is([data-variant=outline], :not([data-variant])):has(._input_1q61c_37:invalid) ._input_1q61c_37::placeholder {
59
+ ._container_t3rdm_1:is([data-variant=outline], :not([data-variant])):has(._input_t3rdm_45:invalid) ._input_t3rdm_45::placeholder {
52
60
  color: var(--color-error);
53
61
  }
54
- ._container_1q61c_1 ._label_1q61c_19 {
62
+ ._container_t3rdm_1 ._label_t3rdm_27 {
55
63
  font-size: 0.75em;
56
64
  font-weight: 700;
57
65
  text-transform: uppercase;
@@ -60,22 +68,23 @@
60
68
  pointer-events: none;
61
69
  transform: translateZ(0);
62
70
  }
63
- ._container_1q61c_1 ._label_1q61c_19._full-height_1q61c_63 {
71
+ ._container_t3rdm_1 ._label_t3rdm_27._full-height_t3rdm_71 {
64
72
  transition: 75ms ease-out padding, 150ms ease-out margin, 150ms ease-out font-size, 150ms ease-out color;
65
73
  font-size: 0.75em;
66
74
  }
67
- ._container_1q61c_1:not(:focus-within, :focus, :has(:focus-within, :focus)) ._label_1q61c_19._full-height_1q61c_63 {
75
+ ._container_t3rdm_1:not(:focus-within, :focus, :has(:focus-within, :focus, select)) ._label_t3rdm_27._full-height_t3rdm_71 {
68
76
  padding-top: 0.65em;
69
77
  margin-bottom: -1em;
70
78
  font-size: 1em;
71
79
  }
72
- ._container_1q61c_1 ._input_1q61c_37 {
80
+ ._container_t3rdm_1 ._input_t3rdm_45 {
73
81
  height: 100%;
82
+ width: 100%;
74
83
  font-size: 1em;
75
84
  }
76
- ._container_1q61c_1 ._input_1q61c_37::placeholder {
85
+ ._container_t3rdm_1 ._input_t3rdm_45::placeholder {
77
86
  transition: 150ms ease-in-out opacity;
78
87
  }
79
- ._container_1q61c_1 ._input_1q61c_37:not(:focus)::placeholder {
88
+ ._container_t3rdm_1 ._input_t3rdm_45:not(:focus)::placeholder {
80
89
  color: var(--color-foreground-secondary);
81
90
  }
package/dist/input.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../src/input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAc,KAAK,EAAE,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAIpD,MAAM,MAAM,UAAU,GAAG;IACrB,EAAE,CAAC,EAAE,EAAE,CAAC;IAER,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAErC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAClC,GAAG,CACE;IACI,IAAI,EAAE,IAAI,CAAC,sBAAsB,EAAE,QAAQ,CAAC,CAAC;CAChD,GACD;IACI,IAAI,EAAE,QAAQ,CAAC;IAEf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB,CACN,CAAC;AAEF,QAAA,MAAM,KAAK,iGAgDV,CAAC;AAGF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../src/input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAc,KAAK,EAAE,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAIpD,MAAM,MAAM,UAAU,GAAG;IACrB,EAAE,CAAC,EAAE,EAAE,CAAC;IAER,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAErC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAClC,GAAG,CACE;IACI,IAAI,EAAE,IAAI,CAAC,sBAAsB,EAAE,QAAQ,CAAC,CAAC;CAChD,GACD;IACI,IAAI,EAAE,QAAQ,CAAC;IAEf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB,CACN,CAAC;AAEF,QAAA,MAAM,KAAK,iGA+CV,CAAC;AAGF,eAAe,KAAK,CAAC"}
package/dist/input.js CHANGED
@@ -3,14 +3,14 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
3
3
  import { forwardRef } from '@nordcom/nordstar-system';
4
4
  import { useState } from 'react';
5
5
 
6
- const container = "_container_1q61c_1";
7
- const label = "_label_1q61c_19";
8
- const input = "_input_1q61c_37";
6
+ const container = "_container_t3rdm_1";
7
+ const label = "_label_t3rdm_27";
8
+ const input = "_input_t3rdm_45";
9
9
  const styles = {
10
10
  container: container,
11
11
  label: label,
12
12
  input: input,
13
- "full-height": "_full-height_1q61c_63"
13
+ "full-height": "_full-height_t3rdm_71"
14
14
  };
15
15
 
16
16
  const Input = forwardRef(
@@ -22,14 +22,14 @@ const Input = forwardRef(
22
22
  label,
23
23
  labelPosition = "inside",
24
24
  placeholder,
25
- defaultValue = "",
25
+ defaultValue,
26
26
  ...props
27
27
  }, ref) => {
28
28
  const Tag = as || "input";
29
- const [value, setValue] = useState(defaultValue);
29
+ const [value, setValue] = useState(defaultValue || "");
30
30
  return /* @__PURE__ */ jsxs(Fragment, { children: [
31
31
  label && labelPosition === "outside" ? /* @__PURE__ */ jsx("label", { className: styles.label, children: label }) : null,
32
- /* @__PURE__ */ jsxs("div", { className: styles.container, "data-variant": variant, "data-color": color, children: [
32
+ /* @__PURE__ */ jsxs("div", { className: styles.container, "data-variant": variant, "data-color": color || "default", children: [
33
33
  label && labelPosition === "inside" ? /* @__PURE__ */ jsx("label", { className: `${styles.label} ${!placeholder && !value ? styles["full-height"] : ""}`, children: label }) : null,
34
34
  /* @__PURE__ */ jsx(
35
35
  Tag,
@@ -39,7 +39,6 @@ const Input = forwardRef(
39
39
  type,
40
40
  className: styles.input,
41
41
  placeholder,
42
- value,
43
42
  defaultValue,
44
43
  onChange: (e) => setValue(() => e.target.value)
45
44
  }
package/dist/input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"input.js","sources":["../src/input.tsx"],"sourcesContent":null,"names":[],"mappings":";;;;;;;;;;;;;;;AA8BA;AAAc;AAEN;AACI;AACO;AAEG;AACF;AAER;AACgB;AAEhB;AAEe;AAEZ;AAIP;AACA;AAEA;AAES;AAAyF;AAGrF;AAIG;AAEJ;AAAC;AAAA;AACO;AACJ;AACA;AACkB;AAClB;AACA;AACA;AACmD;AAAA;AACvD;AACJ;AACJ;AAGZ;AACA;;"}
1
+ {"version":3,"file":"input.js","sources":["../src/input.tsx"],"sourcesContent":null,"names":[],"mappings":";;;;;;;;;;;;;;;AA8BA;AAAc;AAEN;AACI;AACO;AAEG;AACF;AAER;AACgB;AAEhB;AAEA;AAEG;AAIP;AACA;AAEA;AAES;AAAyF;AAGrF;AAIG;AAEJ;AAAC;AAAA;AACO;AACJ;AACA;AACkB;AAClB;AACA;AACmD;AAAA;AACvD;AACJ;AACJ;AAGZ;AACA;;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "$schema": "https://json.schemastore.org/package.json",
3
3
  "name": "@nordcom/nordstar-input",
4
4
  "type": "module",
5
- "version": "0.0.29",
5
+ "version": "0.0.30",
6
6
  "description": "",
7
7
  "main": "dist/index.js",
8
8
  "types": "dist/index.d.ts",
@@ -64,7 +64,7 @@
64
64
  "access": "public"
65
65
  },
66
66
  "dependencies": {
67
- "@nordcom/nordstar-system": "0.0.29"
67
+ "@nordcom/nordstar-system": "0.0.30"
68
68
  },
69
69
  "peerDependencies": {
70
70
  "react": ">=18",