@reltio/design 0.1.0 → 0.1.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 (6) hide show
  1. package/components/TextArea/TextArea.d.ts +16 -14
  2. package/components/TextArea/TextArea.js +3 -6
  3. package/components/TextArea/TextArea.module.css.js +26 -31
  4. package/components/TextArea/TextArea.module.css.json +1 -1
  5. package/components/TextArea/TextArea.types.d.ts +16 -14
  6. package/package.json +5 -5
package/components/TextArea/TextArea.d.ts CHANGED
@@ -4,19 +4,21 @@ export declare const TextArea: import("react").ForwardRefExoticComponent<{
4
4
  supportingText?: string;
5
5
  toolbar?: import("react").ReactNode;
6
6
  style?: import("react").CSSProperties & {
7
- "--reltio-textarea-font-family"?: string;
8
- "--reltio-textarea-font-size"?: string;
9
- "--reltio-textarea-line-height"?: string;
10
- "--reltio-textarea-color-text"?: string;
11
- "--reltio-textarea-color-border"?: string;
12
- "--reltio-textarea-color-border-focus"?: string;
13
- "--reltio-textarea-color-background"?: string;
14
- "--reltio-textarea-color-error"?: string;
15
- "--reltio-textarea-color-label"?: string;
16
- "--reltio-textarea-color-supporting-text"?: string;
17
- "--reltio-textarea-border-radius"?: string;
18
- "--reltio-textarea-padding"?: string;
19
- "--reltio-textarea-min-height"?: string;
20
- "--reltio-textarea-max-height"?: string;
7
+ "--reltio-textarea-font-family": string;
8
+ "--reltio-textarea-font-size": string;
9
+ "--reltio-textarea-line-height": string;
10
+ "--reltio-textarea-color-text": string;
11
+ "--reltio-textarea-color-border": string;
12
+ "--reltio-textarea-color-border-focus": string;
13
+ "--reltio-textarea-color-background": string;
14
+ "--reltio-textarea-color-error": string;
15
+ "--reltio-textarea-color-label": string;
16
+ "--reltio-textarea-color-supporting-text": string;
17
+ "--reltio-textarea-border-radius": string;
18
+ "--reltio-textarea-padding": string;
19
+ "--reltio-textarea-min-height": string;
20
+ "--reltio-textarea-max-height": string;
21
+ "--reltio-textarea-border-width": string;
22
+ "--reltio-textarea-border-width-focus": string;
21
23
  };
22
24
  } & Omit<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, "style"> & import("react").RefAttributes<HTMLTextAreaElement>>;
package/components/TextArea/TextArea.js CHANGED
@@ -1,13 +1,10 @@
1
1
  "use client";
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { forwardRef, useId } from "react";
3
+ import { forwardRef } from "react";
4
4
  import { classNames } from "../../utils/classNames";
5
5
  import styles from "./TextArea.module.css";
6
- export const TextArea = forwardRef(({ label, error, supportingText, toolbar, className, id: providedId, ...rest }, ref) => {
7
- const generatedId = useId();
8
- const textareaId = providedId || generatedId;
9
- const supportingTextId = `${textareaId}-supporting`;
6
+ export const TextArea = forwardRef(({ label, error, supportingText, toolbar, className, ...rest }, ref) => {
10
7
  const hasValue = String(rest.value ?? rest.defaultValue ?? "").length > 0;
11
- return (_jsxs("div", { "data-error": error || undefined, "data-disabled": rest.disabled || undefined, "data-has-value": hasValue || undefined, className: classNames(styles.root, className), children: [_jsxs("label", { htmlFor: textareaId, className: classNames(styles.inputContainer), children: [_jsx("textarea", { ref: ref, id: textareaId, className: classNames(styles.textarea), placeholder: label || rest.placeholder, "aria-invalid": error || undefined, "aria-describedby": supportingText ? supportingTextId : undefined, ...rest }), label && _jsx("span", { className: classNames(styles.label), children: label }), toolbar && (_jsx("div", { className: classNames(styles.toolbar), children: toolbar }))] }), supportingText && (_jsx("div", { id: supportingTextId, className: classNames(styles.supportingText), children: supportingText }))] }));
8
+ return (_jsxs("div", { "data-error": error || undefined, "data-disabled": rest.disabled || undefined, "data-has-value": hasValue || undefined, className: classNames(styles.root, className), children: [_jsxs("label", { className: classNames(styles.inputContainer), children: [_jsx("textarea", { ref: ref, className: classNames(styles.textarea), placeholder: label || rest.placeholder, "aria-invalid": error || undefined, ...rest }), label && _jsx("span", { className: classNames(styles.label), children: label }), toolbar && (_jsx("div", { className: classNames(styles.toolbar), children: toolbar }))] }), supportingText && (_jsx("div", { className: classNames(styles.supportingText), children: supportingText }))] }));
12
9
  });
13
10
  TextArea.displayName = "TextArea";
package/components/TextArea/TextArea.module.css.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import styleInject from 'style-inject';
2
2
  import json from './TextArea.module.css.json';
3
3
  styleInject(`
4
- ._root_1k56p_1 {
4
+ ._root_pmwmi_1 {
5
5
  --reltio-textarea-font-family: var(
6
6
  --reltio-font-family-body,
7
7
  "Roboto",
@@ -26,38 +26,33 @@ styleInject(`
26
26
  --reltio-textarea-border-width: 1px;
27
27
  --reltio-textarea-border-width-focus: 2px;
28
28
 
29
- --_border-color: var(--reltio-textarea-color-border);
30
- --_border-width: var(--reltio-textarea-border-width);
31
- --_label-color: var(--reltio-textarea-color-label);
32
- --_supporting-text-color: var(--reltio-textarea-color-supporting-text);
33
-
34
29
  font-family: var(--reltio-textarea-font-family);
35
30
  container-type: inline-size;
36
31
  }
37
32
 
38
- ._root_1k56p_1:focus-within {
39
- --_border-color: var(--reltio-textarea-color-border-focus);
40
- --_border-width: var(--reltio-textarea-border-width-focus);
41
- --_label-color: var(--reltio-textarea-color-border-focus);
33
+ ._root_pmwmi_1:focus-within {
34
+ --reltio-textarea-color-border: var(--reltio-textarea-color-border-focus);
35
+ --reltio-textarea-border-width: var(--reltio-textarea-border-width-focus);
36
+ --reltio-textarea-color-label: var(--reltio-textarea-color-border-focus);
42
37
  }
43
38
 
44
- ._root_1k56p_1[data-error="true"] {
45
- --_border-color: var(--reltio-textarea-color-error);
46
- --_label-color: var(--reltio-textarea-color-error);
47
- --_supporting-text-color: var(--reltio-textarea-color-error);
39
+ ._root_pmwmi_1[data-error="true"] {
40
+ --reltio-textarea-color-border: var(--reltio-textarea-color-error);
41
+ --reltio-textarea-color-label: var(--reltio-textarea-color-error);
42
+ --reltio-textarea-color-supporting-text: var(--reltio-textarea-color-error);
48
43
  }
49
44
 
50
- ._root_1k56p_1[data-error="true"]:focus-within {
51
- --_border-color: var(--reltio-textarea-color-error);
52
- --_label-color: var(--reltio-textarea-color-error);
45
+ ._root_pmwmi_1[data-error="true"]:focus-within {
46
+ --reltio-textarea-color-border: var(--reltio-textarea-color-error);
47
+ --reltio-textarea-color-label: var(--reltio-textarea-color-error);
53
48
  }
54
49
 
55
- ._root_1k56p_1[data-disabled="true"] {
50
+ ._root_pmwmi_1[data-disabled="true"] {
56
51
  opacity: 0.38;
57
52
  cursor: not-allowed;
58
53
  }
59
54
 
60
- ._inputContainer_1k56p_57 {
55
+ ._inputContainer_pmwmi_52 {
61
56
  position: relative;
62
57
  display: grid;
63
58
  grid-template-columns: 1fr;
@@ -68,7 +63,7 @@ styleInject(`
68
63
  margin: 0;
69
64
  box-sizing: border-box;
70
65
  border-radius: var(--reltio-textarea-border-radius);
71
- outline: var(--_border-width) solid var(--_border-color);
66
+ outline: var(--reltio-textarea-border-width) solid var(--reltio-textarea-color-border);
72
67
  cursor: text;
73
68
  transition:
74
69
  outline-color 0.1s ease,
@@ -76,11 +71,11 @@ styleInject(`
76
71
  background: var(--reltio-textarea-color-background);
77
72
  }
78
73
 
79
- ._root_1k56p_1[data-disabled="true"] ._inputContainer_1k56p_57 {
74
+ ._root_pmwmi_1[data-disabled="true"] ._inputContainer_pmwmi_52 {
80
75
  cursor: not-allowed;
81
76
  }
82
77
 
83
- ._textarea_1k56p_80 {
78
+ ._textarea_pmwmi_75 {
84
79
  grid-area: textarea;
85
80
  position: relative;
86
81
  display: block;
@@ -103,15 +98,15 @@ styleInject(`
103
98
  field-sizing: content;
104
99
  }
105
100
 
106
- ._textarea_1k56p_80::placeholder {
101
+ ._textarea_pmwmi_75::placeholder {
107
102
  color: var(--reltio-textarea-color-label);
108
103
  }
109
104
 
110
- ._textarea_1k56p_80:disabled {
105
+ ._textarea_pmwmi_75:disabled {
111
106
  cursor: not-allowed;
112
107
  }
113
108
 
114
- ._label_1k56p_111 {
109
+ ._label_pmwmi_106 {
115
110
  position: absolute;
116
111
  opacity: 0;
117
112
  top: 16px;
@@ -121,33 +116,33 @@ styleInject(`
121
116
  background-color: var(--reltio-textarea-color-background);
122
117
  padding: 4px 8px;
123
118
  border-radius: var(--reltio-textarea-border-radius);
124
- color: var(--_label-color);
119
+ color: var(--reltio-textarea-color-label);
125
120
  z-index: 2;
126
121
  font-size: var(--reltio-textarea-font-size);
127
122
  font-family: var(--reltio-textarea-font-family);
128
123
  pointer-events: none;
129
124
  }
130
125
 
131
- ._textarea_1k56p_80:not(:placeholder-shown) + ._label_1k56p_111 {
126
+ ._textarea_pmwmi_75:not(:placeholder-shown) + ._label_pmwmi_106 {
132
127
  top: -1px;
133
128
  font-size: 12px;
134
129
  opacity: 1;
135
130
  }
136
131
 
137
- ._textarea_1k56p_80:focus + ._label_1k56p_111 {
132
+ ._textarea_pmwmi_75:focus + ._label_pmwmi_106 {
138
133
  top: -1px;
139
134
  font-size: 12px;
140
135
  opacity: 1;
141
136
  }
142
137
 
143
- ._supportingText_1k56p_140 {
138
+ ._supportingText_pmwmi_135 {
144
139
  font-size: 12px;
145
140
  padding: 4px var(--reltio-textarea-padding);
146
- color: var(--_supporting-text-color);
141
+ color: var(--reltio-textarea-color-supporting-text);
147
142
  font-family: var(--reltio-textarea-font-family);
148
143
  }
149
144
 
150
- ._toolbar_1k56p_147 {
145
+ ._toolbar_pmwmi_142 {
151
146
  grid-area: toolbar;
152
147
  display: flex;
153
148
  flex-direction: row;
package/components/TextArea/TextArea.module.css.json CHANGED
@@ -1 +1 @@
1
- { "root": "_root_1k56p_1", "inputContainer": "_inputContainer_1k56p_57", "textarea": "_textarea_1k56p_80", "label": "_label_1k56p_111", "supportingText": "_supportingText_1k56p_140", "toolbar": "_toolbar_1k56p_147" }
1
+ { "root": "_root_pmwmi_1", "inputContainer": "_inputContainer_pmwmi_52", "textarea": "_textarea_pmwmi_75", "label": "_label_pmwmi_106", "supportingText": "_supportingText_pmwmi_135", "toolbar": "_toolbar_pmwmi_142" }
package/components/TextArea/TextArea.types.d.ts CHANGED
@@ -21,19 +21,21 @@ export type TextAreaProps = {
21
21
  * Custom styles including CSS custom properties for theming
22
22
  */
23
23
  style?: React.CSSProperties & {
24
- "--reltio-textarea-font-family"?: string;
25
- "--reltio-textarea-font-size"?: string;
26
- "--reltio-textarea-line-height"?: string;
27
- "--reltio-textarea-color-text"?: string;
28
- "--reltio-textarea-color-border"?: string;
29
- "--reltio-textarea-color-border-focus"?: string;
30
- "--reltio-textarea-color-background"?: string;
31
- "--reltio-textarea-color-error"?: string;
32
- "--reltio-textarea-color-label"?: string;
33
- "--reltio-textarea-color-supporting-text"?: string;
34
- "--reltio-textarea-border-radius"?: string;
35
- "--reltio-textarea-padding"?: string;
36
- "--reltio-textarea-min-height"?: string;
37
- "--reltio-textarea-max-height"?: string;
24
+ "--reltio-textarea-font-family": string;
25
+ "--reltio-textarea-font-size": string;
26
+ "--reltio-textarea-line-height": string;
27
+ "--reltio-textarea-color-text": string;
28
+ "--reltio-textarea-color-border": string;
29
+ "--reltio-textarea-color-border-focus": string;
30
+ "--reltio-textarea-color-background": string;
31
+ "--reltio-textarea-color-error": string;
32
+ "--reltio-textarea-color-label": string;
33
+ "--reltio-textarea-color-supporting-text": string;
34
+ "--reltio-textarea-border-radius": string;
35
+ "--reltio-textarea-padding": string;
36
+ "--reltio-textarea-min-height": string;
37
+ "--reltio-textarea-max-height": string;
38
+ "--reltio-textarea-border-width": string;
39
+ "--reltio-textarea-border-width-focus": string;
38
40
  };
39
41
  } & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "style">;
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@reltio/design",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "main": "packages/design/index.js",
5
5
  "description": "Reltio Design Platform",
6
6
  "peerDependencies": {
7
- "react": ">=18 <20",
8
- "react-dom": ">=18 <20"
7
+ "react": ">=17 <20",
8
+ "react-dom": ">=17 <20"
9
9
  },
10
10
  "dependencies": {
11
11
  "style-inject": "^0.3.0",
@@ -17,8 +17,8 @@
17
17
  "postbuild": "cp package.json dist/ && cp README.md dist/"
18
18
  },
19
19
  "devDependencies": {
20
- "@types/react": "^18",
21
- "@types/react-dom": "^18",
20
+ "@types/react": "^17",
21
+ "@types/react-dom": "^17",
22
22
  "glob": "^11.0.0",
23
23
  "postcss": "^8.4.49",
24
24
  "postcss-modules": "^6.0.1",