@starasia/textarea 1.0.2 → 1.0.4

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 (3) hide show
  1. package/dist/textarea.es.js +21 -26
  2. package/dist/textarea.umd.js +19 -24
  3. package/package.json +6 -6
package/dist/textarea.es.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as u } from "react/jsx-runtime";
2
- const l = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
2
+ const x = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
3
3
 
4
4
  * {
5
5
  margin: 0;
@@ -16,9 +16,8 @@ const l = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
16
16
  --starasia-ui-h-12: 3rem; /* 48px */
17
17
 
18
18
  /* color */
19
- --starasia-ui-color-gray-200: #c9cecc;
20
- --starasia-ui-color-gray-300: #d1d5db;
21
- --starasia-ui-color-blue-800: #1e40af;
19
+ --starasia-ui-color-gray-200: rgba(201, 206, 204, 1);
20
+ --starasia-ui-color-gray-300: rgba(209, 213, 219, 1);
22
21
 
23
22
  /* border radius */
24
23
  --starasia-ui-radii-base: 0.25rem; /* 4px */
@@ -45,19 +44,10 @@ const l = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
45
44
  #d1d5db
46
45
  );
47
46
 
48
- /* blue */
49
- --starasia-ui-textarea-color-primary-blue: var(
50
- --starasia-ui-color-blue-700,
51
- #1d4ed8
52
- );
53
- --starasia-ui-textarea-color-tertiary-blue: var(
54
- --starasia-ui-color-blue-300,
55
- #93c5fd
56
- );
57
- --starasia-ui-textarea-color-quaternary-blue: var(
58
- --starasia-ui-color-blue-100,
59
- #dbeafe
60
- );
47
+ /* brand */
48
+ --starasia-ui-textarea-color-primary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
49
+ --starasia-ui-textarea-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary, rgba(144, 176, 218, 1));
50
+ --starasia-ui-textarea-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
61
51
 
62
52
  /* border radius */
63
53
  --starasia-ui-textarea-border-radius-base: var(--starasia-ui-radii-md, 8px);
@@ -65,8 +55,13 @@ const l = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
65
55
 
66
56
  --starasia-ui-textarea-placholder-color: var(
67
57
  --starasia-ui-color-gray-200,
68
- #c9cecc
58
+ rgba(201, 206, 204, 1)
69
59
  );
60
+ --starasia-ui-textarea-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
61
+ --starasia-ui-textarea-color-border: rgba(120, 134, 127, 0.2);
62
+ --starasia-ui-textarea-color-disabled-bg: rgba(120, 134, 127, 0.1);
63
+ --starasia-ui-textarea-color-warning: rgba(234, 179, 8, 1);
64
+ --starasia-ui-textarea-color-error: rgba(239, 68, 68, 1);
70
65
  --starasia-ui-textarea-placholder-fontWeight: var(
71
66
  --starasia-ui-fontWeights-normal,
72
67
  300
@@ -77,7 +72,7 @@ const l = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
77
72
  padding: var(--starasia-ui-textarea-spacing-sm);
78
73
  box-sizing: border-box;
79
74
  /* background: transparent; */
80
- background: white;
75
+ background: var(--starasia-ui-textarea-color-white);
81
76
  }
82
77
  .starasia-textarea::placeholder {
83
78
  color: var(--starasia-ui-textarea-placholder-color);
@@ -123,7 +118,7 @@ const l = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
123
118
  padding-inline: var(--starasia-ui-textarea-spacing-md);
124
119
  font-size: var(--starasia-ui-fontSizes-md, 14px);
125
120
  border: var(--starasia-ui-textarea-border-width) solid
126
- rgba(120, 134, 127, 0.2);
121
+ var(--starasia-ui-textarea-color-border);
127
122
  border-radius: var(--starasia-ui-textarea-border-radius-lg);
128
123
  }
129
124
  .starasia-textarea-lg {
@@ -144,28 +139,28 @@ const l = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
144
139
  }
145
140
 
146
141
  .starasia-textarea:disabled {
147
- border-color: rgba(120, 134, 127, 0.2);
148
- background-color: rgba(120, 134, 127, 0.1);
142
+ border-color: var(--starasia-ui-textarea-color-border);
143
+ background-color: var(--starasia-ui-textarea-color-disabled-bg);
149
144
  /* background-color: var(--starasia-ui-textarea-color-tertiary-gray); */
150
145
  /* border-color: var(--starasia-ui-textarea-color-tertiary-gray); */
151
146
  cursor: not-allowed;
152
147
  }
153
148
 
154
149
  .starasia-textarea-warning {
155
- border-color: #eab308 !important;
150
+ border-color: var(--starasia-ui-textarea-color-warning) !important;
156
151
  /* outline-color: #eab308 !important; */
157
152
  }
158
153
  .starasia-textarea-error {
159
- border-color: #ef4444 !important;
154
+ border-color: var(--starasia-ui-textarea-color-error) !important;
160
155
  /* outline-color: #eab308 !important; */
161
156
  }
162
- `, e = "starasia-textarea-styles", x = (r) => {
157
+ `, e = "starasia-textarea-styles", l = (r) => {
163
158
  if (!document.getElementById(e)) {
164
159
  const a = document.createElement("style");
165
160
  a.id = e, a.textContent = r, document.head.appendChild(a);
166
161
  }
167
162
  };
168
- x(l);
163
+ l(x);
169
164
  const g = (r) => {
170
165
  const {
171
166
  height: a,
package/dist/textarea.umd.js CHANGED
@@ -15,9 +15,8 @@
15
15
  --starasia-ui-h-12: 3rem; /* 48px */
16
16
 
17
17
  /* color */
18
- --starasia-ui-color-gray-200: #c9cecc;
19
- --starasia-ui-color-gray-300: #d1d5db;
20
- --starasia-ui-color-blue-800: #1e40af;
18
+ --starasia-ui-color-gray-200: rgba(201, 206, 204, 1);
19
+ --starasia-ui-color-gray-300: rgba(209, 213, 219, 1);
21
20
 
22
21
  /* border radius */
23
22
  --starasia-ui-radii-base: 0.25rem; /* 4px */
@@ -44,19 +43,10 @@
44
43
  #d1d5db
45
44
  );
46
45
 
47
- /* blue */
48
- --starasia-ui-textarea-color-primary-blue: var(
49
- --starasia-ui-color-blue-700,
50
- #1d4ed8
51
- );
52
- --starasia-ui-textarea-color-tertiary-blue: var(
53
- --starasia-ui-color-blue-300,
54
- #93c5fd
55
- );
56
- --starasia-ui-textarea-color-quaternary-blue: var(
57
- --starasia-ui-color-blue-100,
58
- #dbeafe
59
- );
46
+ /* brand */
47
+ --starasia-ui-textarea-color-primary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
48
+ --starasia-ui-textarea-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary, rgba(144, 176, 218, 1));
49
+ --starasia-ui-textarea-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
60
50
 
61
51
  /* border radius */
62
52
  --starasia-ui-textarea-border-radius-base: var(--starasia-ui-radii-md, 8px);
@@ -64,8 +54,13 @@
64
54
 
65
55
  --starasia-ui-textarea-placholder-color: var(
66
56
  --starasia-ui-color-gray-200,
67
- #c9cecc
57
+ rgba(201, 206, 204, 1)
68
58
  );
59
+ --starasia-ui-textarea-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
60
+ --starasia-ui-textarea-color-border: rgba(120, 134, 127, 0.2);
61
+ --starasia-ui-textarea-color-disabled-bg: rgba(120, 134, 127, 0.1);
62
+ --starasia-ui-textarea-color-warning: rgba(234, 179, 8, 1);
63
+ --starasia-ui-textarea-color-error: rgba(239, 68, 68, 1);
69
64
  --starasia-ui-textarea-placholder-fontWeight: var(
70
65
  --starasia-ui-fontWeights-normal,
71
66
  300
@@ -76,7 +71,7 @@
76
71
  padding: var(--starasia-ui-textarea-spacing-sm);
77
72
  box-sizing: border-box;
78
73
  /* background: transparent; */
79
- background: white;
74
+ background: var(--starasia-ui-textarea-color-white);
80
75
  }
81
76
  .starasia-textarea::placeholder {
82
77
  color: var(--starasia-ui-textarea-placholder-color);
@@ -122,7 +117,7 @@
122
117
  padding-inline: var(--starasia-ui-textarea-spacing-md);
123
118
  font-size: var(--starasia-ui-fontSizes-md, 14px);
124
119
  border: var(--starasia-ui-textarea-border-width) solid
125
- rgba(120, 134, 127, 0.2);
120
+ var(--starasia-ui-textarea-color-border);
126
121
  border-radius: var(--starasia-ui-textarea-border-radius-lg);
127
122
  }
128
123
  .starasia-textarea-lg {
@@ -143,19 +138,19 @@
143
138
  }
144
139
 
145
140
  .starasia-textarea:disabled {
146
- border-color: rgba(120, 134, 127, 0.2);
147
- background-color: rgba(120, 134, 127, 0.1);
141
+ border-color: var(--starasia-ui-textarea-color-border);
142
+ background-color: var(--starasia-ui-textarea-color-disabled-bg);
148
143
  /* background-color: var(--starasia-ui-textarea-color-tertiary-gray); */
149
144
  /* border-color: var(--starasia-ui-textarea-color-tertiary-gray); */
150
145
  cursor: not-allowed;
151
146
  }
152
147
 
153
148
  .starasia-textarea-warning {
154
- border-color: #eab308 !important;
149
+ border-color: var(--starasia-ui-textarea-color-warning) !important;
155
150
  /* outline-color: #eab308 !important; */
156
151
  }
157
152
  .starasia-textarea-error {
158
- border-color: #ef4444 !important;
153
+ border-color: var(--starasia-ui-textarea-color-error) !important;
159
154
  /* outline-color: #eab308 !important; */
160
155
  }
161
- `,s="starasia-textarea-styles";(e=>{if(!document.getElementById(s)){const t=document.createElement("style");t.id=s,t.textContent=e,document.head.appendChild(t)}})(o);const d=e=>{const{height:t,width:u="fit-content",resize:l,size:x="md",status:n,fullWidth:c,...i}=e;return r.jsx("textarea",{className:`starasia-textarea starasia-textarea-resize-${l} starasia-textarea-${x} starasia-textarea-${n}`,...i,disabled:n==="disable"?!0:i.disabled,style:{height:t,width:c?"100%":u,...i.style}})};a.Textarea=d,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});
156
+ `,s="starasia-textarea-styles";(e=>{if(!document.getElementById(s)){const t=document.createElement("style");t.id=s,t.textContent=e,document.head.appendChild(t)}})(o);const d=e=>{const{height:t,width:u="fit-content",resize:x,size:l="md",status:n,fullWidth:c,...i}=e;return r.jsx("textarea",{className:`starasia-textarea starasia-textarea-resize-${x} starasia-textarea-${l} starasia-textarea-${n}`,...i,disabled:n==="disable"?!0:i.disabled,style:{height:t,width:c?"100%":u,...i.style}})};a.Textarea=d,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@starasia/textarea",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "textarea component for starasia UI",
5
5
  "author": "Prawito Hudoro",
6
6
  "main": "dist/textarea.umd.js",
@@ -12,6 +12,10 @@
12
12
  "dist/*.map",
13
13
  "dist/*.css"
14
14
  ],
15
+ "scripts": {
16
+ "dev": "vite --config vite.config.ts --port 3000",
17
+ "build": "vite build --config vite.config.ts"
18
+ },
15
19
  "keywords": [],
16
20
  "license": "ISC",
17
21
  "type": "module",
@@ -33,9 +37,5 @@
33
37
  "react-dom": "^18.2.0",
34
38
  "@types/react": "^18.2.55",
35
39
  "@types/react-dom": "^18.2.19"
36
- },
37
- "scripts": {
38
- "dev": "vite --config vite.config.ts --port 3000",
39
- "build": "vite build --config vite.config.ts"
40
40
  }
41
- }
41
+ }