@nordcom/nordstar-input 0.0.40 → 0.0.41

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 (6) hide show
  1. package/dist/input.css +30 -29
  2. package/dist/input.d.ts +10 -0
  3. package/dist/input.d.ts.map +1 -1
  4. package/dist/input.js +15 -9
  5. package/dist/input.js.map +1 -1
  6. package/package.json +2 -2
package/dist/input.css CHANGED
@@ -1,66 +1,67 @@
1
- ._container_4doy2_1 {
1
+ ._container_nsnw8_1 {
2
2
  position: relative;
3
3
  display: inline-flex;
4
4
  flex-direction: column;
5
- gap: 0.15rem;
5
+ gap: 0.15em;
6
+ height: 3.5em;
6
7
  padding: var(--layout-block-padding-half) var(--layout-block-padding);
7
8
  font-family: var(--font-mono, var(--font-body));
8
9
  font-size: 1em;
9
10
  transition: 150ms ease-in-out border-color, 150ms ease-in-out color;
10
11
  border-radius: var(--border-radius);
11
12
  }
12
- ._container_4doy2_1:is([data-variant=outline], :not([data-variant])) {
13
- border-width: var(--border-width-half);
13
+ ._container_nsnw8_1:is([data-variant=outline], :not([data-variant])) {
14
+ border-width: var(--border-width-small);
14
15
  border-style: solid;
15
16
  }
16
- ._container_4doy2_1:is([data-variant=outline], :not([data-variant])):not(:is([data-color=primary], [data-color=secondary])) {
17
+ ._container_nsnw8_1:is([data-variant=outline], :not([data-variant])):not(:is([data-color=primary], [data-color=secondary])) {
17
18
  border-color: var(--color);
18
19
  }
19
- ._container_4doy2_1:is([data-variant=outline], :not([data-variant])):not(:is([data-color=primary], [data-color=secondary]))[data-color=default] {
20
+ ._container_nsnw8_1:is([data-variant=outline], :not([data-variant])):not(:is([data-color=primary], [data-color=secondary]))[data-color=default] {
20
21
  --color: var(--color-foreground-secondary);
21
22
  --color-highlight: var(--color-foreground-secondary);
22
23
  }
23
- ._container_4doy2_1:is([data-variant=outline], :not([data-variant])):not(:is([data-color=primary], [data-color=secondary]))[data-color=foreground] {
24
+ ._container_nsnw8_1:is([data-variant=outline], :not([data-variant])):not(:is([data-color=primary], [data-color=secondary]))[data-color=foreground] {
24
25
  --color: var(--color-foreground-secondary);
25
26
  --color-highlight: var(--color-foreground);
26
27
  }
27
- ._container_4doy2_1:is([data-variant=outline], :not([data-variant])):not(:is([data-color=primary], [data-color=secondary])) ._label_4doy2_27 {
28
+ ._container_nsnw8_1:is([data-variant=outline], :not([data-variant])):not(:is([data-color=primary], [data-color=secondary])) ._label_nsnw8_28 {
28
29
  color: var(--color);
29
30
  }
30
- :is(:focus, :focus-within) > ._container_4doy2_1:is([data-variant=outline], :not([data-variant])):not(:is([data-color=primary], [data-color=secondary])) {
31
+ :is(:focus, :focus-within) > ._container_nsnw8_1:is([data-variant=outline], :not([data-variant])):not(:is([data-color=primary], [data-color=secondary])) {
31
32
  border-color: var(--color-highlight);
32
33
  }
33
- ._container_4doy2_1:is([data-variant=outline], :not([data-variant]))[data-color=primary] {
34
+ ._container_nsnw8_1:is([data-variant=outline], :not([data-variant]))[data-color=primary] {
34
35
  border-color: var(--color-accent-primary);
35
36
  }
36
- ._container_4doy2_1:is([data-variant=outline], :not([data-variant]))[data-color=secondary] {
37
+ ._container_nsnw8_1:is([data-variant=outline], :not([data-variant]))[data-color=secondary] {
37
38
  border-color: var(--color-accent-secondary);
38
39
  }
39
- ._container_4doy2_1:is([data-variant=outline], :not([data-variant])):is([data-color=primary], [data-color=secondary]) {
40
+ ._container_nsnw8_1:is([data-variant=outline], :not([data-variant])):is([data-color=primary], [data-color=secondary]) {
40
41
  opacity: 0.85;
41
42
  }
42
- :is(:focus, :focus-within) > ._container_4doy2_1:is([data-variant=outline], :not([data-variant])):is([data-color=primary], [data-color=secondary]) {
43
+ :is(:focus, :focus-within) > ._container_nsnw8_1:is([data-variant=outline], :not([data-variant])):is([data-color=primary], [data-color=secondary]) {
43
44
  opacity: 1;
44
45
  }
45
- ._container_4doy2_1:is([data-variant=outline], :not([data-variant])):is(:not(:has(._input_4doy2_45[value=""], ._input_4doy2_45:not([value]))), :focus, :focus-within):not(:has(._input_4doy2_45:invalid)) {
46
+ ._container_nsnw8_1:is([data-variant=outline], :not([data-variant])):is(:not(:has(._input_nsnw8_46[value=""], ._input_nsnw8_46:not([value]))), :focus, :focus-within):not(:has(._input_nsnw8_46:invalid)) {
46
47
  opacity: 1;
47
48
  }
48
- ._container_4doy2_1:is([data-variant=outline], :not([data-variant])):is(:not(:has(._input_4doy2_45[value=""], ._input_4doy2_45:not([value]))), :focus, :focus-within):not(:has(._input_4doy2_45:invalid))[data-color=default] {
49
+ ._container_nsnw8_1:is([data-variant=outline], :not([data-variant])):is(:not(:has(._input_nsnw8_46[value=""], ._input_nsnw8_46:not([value]))), :focus, :focus-within):not(:has(._input_nsnw8_46:invalid))[data-color=default] {
49
50
  border-color: var(--color-foreground);
50
51
  }
51
- ._container_4doy2_1:is([data-variant=outline], :not([data-variant])):is(:not(:has(._input_4doy2_45[value=""], ._input_4doy2_45:not([value]))), :focus, :focus-within):not(:has(._input_4doy2_45:invalid)) ._label_4doy2_27 {
52
+ ._container_nsnw8_1:is([data-variant=outline], :not([data-variant])):is(:not(:has(._input_nsnw8_46[value=""], ._input_nsnw8_46:not([value]))), :focus, :focus-within):not(:has(._input_nsnw8_46:invalid)) ._label_nsnw8_28 {
52
53
  color: inherit;
53
54
  }
54
- ._container_4doy2_1:is([data-variant=outline], :not([data-variant])):has(._input_4doy2_45:invalid) {
55
+ ._container_nsnw8_1:is([data-variant=outline], :not([data-variant])):has(._input_nsnw8_46:invalid) {
55
56
  opacity: 1;
56
57
  border-color: var(--color-error);
57
58
  color: var(--color-error);
58
59
  }
59
- ._container_4doy2_1:is([data-variant=outline], :not([data-variant])):has(._input_4doy2_45:invalid) ._input_4doy2_45::placeholder {
60
+ ._container_nsnw8_1:is([data-variant=outline], :not([data-variant])):has(._input_nsnw8_46:invalid) ._input_nsnw8_46::placeholder {
60
61
  color: var(--color-error);
61
62
  }
62
- ._container_4doy2_1 ._label_4doy2_27 {
63
- font-size: 0.75em;
63
+ ._container_nsnw8_1 ._label_nsnw8_28 {
64
+ font-size: 0.65em;
64
65
  font-weight: 700;
65
66
  text-transform: uppercase;
66
67
  -webkit-user-select: none;
@@ -68,27 +69,27 @@
68
69
  pointer-events: none;
69
70
  transform: translateZ(0) translateY(0);
70
71
  }
71
- ._container_4doy2_1 ._label_4doy2_27._full-height_4doy2_71 {
72
+ ._container_nsnw8_1 ._label_nsnw8_28._full-height_nsnw8_72 {
72
73
  transition: 75ms ease-out transform, 150ms ease-out margin, 150ms ease-out font-size, 150ms ease-out color;
73
- font-size: 0.75em;
74
+ font-size: 0.65em;
74
75
  }
75
- ._container_4doy2_1:not(:focus-within, :focus, :has(:focus-within, :focus, select)) ._label_4doy2_27._full-height_4doy2_71 {
76
- transform: translateY(0.5em);
77
- margin-bottom: -1em;
76
+ ._container_nsnw8_1:not(:focus-within, :focus, :has(:focus-within, :focus, select)) ._label_nsnw8_28._full-height_nsnw8_72 {
77
+ transform: translateY(0.45em);
78
+ margin-bottom: -0.5em;
78
79
  font-size: 1em;
79
80
  }
80
- ._container_4doy2_1 ._input_4doy2_45 {
81
+ ._container_nsnw8_1 ._input_nsnw8_46 {
81
82
  height: 100%;
82
83
  width: 100%;
83
84
  font-size: inherit;
84
85
  }
85
- ._container_4doy2_1 ._input_4doy2_45:is(input) {
86
+ ._container_nsnw8_1 ._input_nsnw8_46:is(input) {
86
87
  line-height: 1;
87
88
  }
88
- ._container_4doy2_1 ._input_4doy2_45::placeholder {
89
+ ._container_nsnw8_1 ._input_nsnw8_46::placeholder {
89
90
  transition: 150ms ease-in-out opacity;
90
91
  font-size: inherit;
91
92
  }
92
- ._container_4doy2_1 ._input_4doy2_45:not(:focus)::placeholder {
93
+ ._container_nsnw8_1 ._input_nsnw8_46:not(:focus)::placeholder {
93
94
  color: var(--color-foreground-secondary);
94
95
  }
package/dist/input.d.ts CHANGED
@@ -7,11 +7,21 @@ export type InputProps = {
7
7
  color?: NordstarColor;
8
8
  label?: string;
9
9
  labelPosition?: 'inside' | 'outside';
10
+ value?: string | number;
10
11
  defaultValue?: string | number;
11
12
  type?: Omit<HTMLInputTypeAttribute, 'number'>;
12
13
  min?: number;
13
14
  max?: number;
14
15
  };
16
+ /**
17
+ * `<Input/>`, generalized input element.
18
+ *
19
+ * @param {object} props - `<Input/>` props.
20
+ * @param {As} [props.as] - The element to render the component as.
21
+ * @param {'outline' | 'solid'} [props.variant='outline'] - The variant.
22
+ * @param {NordstarColor} [props.color='default'] - The color scheme.
23
+ * @returns {React.ReactNode} The `<Input/>` component.
24
+ */
15
25
  declare const Input: import("@nordcom/nordstar-system").InternalForwardRefRenderFunction<"input", InputProps, never>;
16
26
  export default Input;
17
27
  //# sourceMappingURL=input.d.ts.map
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;IAE/B,IAAI,CAAC,EAAE,IAAI,CAAC,sBAAsB,EAAE,QAAQ,CAAC,CAAC;IAC9C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,QAAA,MAAM,KAAK,iGA+CV,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,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B,IAAI,CAAC,EAAE,IAAI,CAAC,sBAAsB,EAAE,QAAQ,CAAC,CAAC;IAC9C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;GAQG;AACH,QAAA,MAAM,KAAK,iGAsDV,CAAC;AAGF,eAAe,KAAK,CAAC"}
package/dist/input.js CHANGED
@@ -1,16 +1,16 @@
1
1
  import './input.css';
2
2
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
3
3
  import { forwardRef } from '@nordcom/nordstar-system';
4
- import { useState } from 'react';
4
+ import { useState, useEffect } from 'react';
5
5
 
6
- const container = "_container_4doy2_1";
7
- const label = "_label_4doy2_27";
8
- const input = "_input_4doy2_45";
6
+ const container = "_container_nsnw8_1";
7
+ const label = "_label_nsnw8_28";
8
+ const input = "_input_nsnw8_46";
9
9
  const styles = {
10
10
  container: container,
11
11
  label: label,
12
12
  input: input,
13
- "full-height": "_full-height_4doy2_71"
13
+ "full-height": "_full-height_nsnw8_72"
14
14
  };
15
15
 
16
16
  const Input = forwardRef(
@@ -22,15 +22,21 @@ const Input = forwardRef(
22
22
  label,
23
23
  labelPosition = "inside",
24
24
  placeholder,
25
+ value,
25
26
  defaultValue,
26
27
  ...props
27
28
  }, ref) => {
28
29
  const Tag = as || "input";
29
- const [value, setValue] = useState(defaultValue || "");
30
+ const [contents, setContents] = useState(defaultValue || "");
31
+ useEffect(() => {
32
+ if (!value)
33
+ return;
34
+ setContents(() => value);
35
+ }, [value]);
30
36
  return /* @__PURE__ */ jsxs(Fragment, { children: [
31
37
  label && labelPosition === "outside" ? /* @__PURE__ */ jsx("label", { className: styles.label, children: label }) : null,
32
38
  /* @__PURE__ */ jsxs("div", { className: styles.container, "data-variant": variant, "data-color": color || "default", children: [
33
- label && labelPosition === "inside" ? /* @__PURE__ */ jsx("label", { className: `${styles.label} ${!placeholder && !value ? styles["full-height"] : ""}`, children: label }) : null,
39
+ label && labelPosition === "inside" ? /* @__PURE__ */ jsx("label", { className: `${styles.label} ${!placeholder && !contents ? styles["full-height"] : ""}`, children: label }) : null,
34
40
  /* @__PURE__ */ jsx(
35
41
  Tag,
36
42
  {
@@ -39,8 +45,8 @@ const Input = forwardRef(
39
45
  type,
40
46
  className: styles.input,
41
47
  placeholder,
42
- ...defaultValue ? { defaultValue } : { value },
43
- onChange: (e) => setValue(() => e.target.value)
48
+ value: contents,
49
+ onChange: (e) => setContents(() => e.target.value)
44
50
  }
45
51
  )
46
52
  ] })
package/dist/input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"input.js","sources":["../src/input.tsx"],"sourcesContent":null,"names":[],"mappings":";;;;;;;;;;;;;;;AAwBA;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;AAC+C;AACI;AAAA;AACvD;AACJ;AACJ;AAGZ;AACA;;"}
1
+ {"version":3,"file":"input.js","sources":["../src/input.tsx"],"sourcesContent":null,"names":[],"mappings":";;;;;;;;;;;;;;;AAkCA;AAAc;AAEN;AACI;AACO;AAEG;AACF;AAER;AACgB;AAEhB;AAEA;AACA;AAEG;AAIP;AACA;AAEA;AACI;AAAY;AAEZ;AAAuB;AAG3B;AAES;AAAyF;AAGrF;AAIG;AAEJ;AAAC;AAAA;AACO;AACJ;AACA;AACkB;AAClB;AACO;AAC+C;AAAA;AAC1D;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.40",
5
+ "version": "0.0.41",
6
6
  "description": "Component for single-line text and number input with formatting support.",
7
7
  "packageManager": "npm",
8
8
  "engines": {
@@ -65,7 +65,7 @@
65
65
  "access": "public"
66
66
  },
67
67
  "dependencies": {
68
- "@nordcom/nordstar-system": "0.0.40"
68
+ "@nordcom/nordstar-system": "0.0.41"
69
69
  },
70
70
  "peerDependencies": {
71
71
  "react": ">=18",