@starasia/textarea 2.0.0 → 3.0.0

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 +42 -36
  2. package/dist/textarea.umd.js +18 -18
  3. package/package.json +6 -6
package/dist/textarea.es.js CHANGED
@@ -1,5 +1,5 @@
1
- import { jsx as x } from "react/jsx-runtime";
2
- const l = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
1
+ import { jsx as l } from "react/jsx-runtime";
2
+ const b = `@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;
@@ -13,42 +13,42 @@ const l = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
13
13
  --sa-textarea-radius: var(--sa-radii-md, 0.5rem);
14
14
  --sa-textarea-placeholder: var(--sa-color-gray-400, #b7b9be);
15
15
  --sa-textarea-bg: var(--sa-background-primary, #ffffff);
16
- --sa-textarea-border-color: rgba(120, 134, 127, 0.2);
16
+ --sa-textarea-border-color: var(--sa-color-gray-alpha-a20, #78867f33);
17
17
  --sa-textarea-border-focused: var(--sa-border-focused, #1a4fa0);
18
18
  --sa-textarea-border-brand: var(--sa-color-brand-200, #99b3db);
19
19
  --sa-textarea-bg-selected: var(--sa-color-brand-50, #e6edf6);
20
- --sa-textarea-bg-disabled: rgba(120, 134, 127, 0.1);
20
+ --sa-textarea-bg-disabled: var(--sa-color-gray-alpha-a10, #78867f1a);
21
21
  --sa-textarea-border-warning: var(--sa-color-warning-400, #ed9f30);
22
22
  --sa-textarea-border-error: var(--sa-color-error-500, #ff4d6d);
23
23
  }
24
24
 
25
- .starasia-textarea {
25
+ .sa-textarea {
26
26
  padding: var(--sa-spacing-sm, 8px);
27
27
  box-sizing: border-box;
28
28
  /* background: transparent; */
29
29
  background: var(--sa-textarea-bg);
30
30
  }
31
- .starasia-textarea::placeholder {
31
+ .sa-textarea::placeholder {
32
32
  color: var(--sa-textarea-placeholder);
33
33
  font-weight: var(--sa-font-weight-normal, 300);
34
34
  }
35
- .starasia-textarea-resize-horizontal {
35
+ .sa-textarea-resize-horizontal {
36
36
  resize: horizontal;
37
37
  }
38
38
 
39
- .starasia-textarea-resize-vertical {
39
+ .sa-textarea-resize-vertical {
40
40
  resize: vertical;
41
41
  }
42
42
 
43
- .starasia-textarea-resize-both {
43
+ .sa-textarea-resize-both {
44
44
  resize: both;
45
45
  }
46
46
 
47
- .starasia-textarea-resize-none {
47
+ .sa-textarea-resize-none {
48
48
  resize: none;
49
49
  }
50
50
 
51
- .starasia-textarea-xs {
51
+ .sa-textarea-xs {
52
52
  height: var(--sa-h-6, 24px);
53
53
  padding-block: var(--sa-spacing-xs, 4px);
54
54
  padding-inline: var(--sa-spacing-sm, 8px);
@@ -56,7 +56,7 @@ const l = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
56
56
  border: var(--sa-textarea-border) solid var(--sa-textarea-border-color);
57
57
  border-radius: var(--sa-textarea-radius);
58
58
  }
59
- .starasia-textarea-sm {
59
+ .sa-textarea-sm {
60
60
  height: var(--sa-h-8, 32px);
61
61
  padding-block: var(--sa-spacing-xs, 4px);
62
62
  padding-inline: var(--sa-spacing-sm, 8px);
@@ -64,7 +64,7 @@ const l = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
64
64
  border: var(--sa-textarea-border) solid var(--sa-textarea-border-color);
65
65
  border-radius: var(--sa-textarea-radius);
66
66
  }
67
- .starasia-textarea-md {
67
+ .sa-textarea-md {
68
68
  height: var(--sa-h-10, 40px);
69
69
  padding-block: var(--sa-spacing-sm, 8px);
70
70
  padding-inline: var(--sa-spacing-md, 12px);
@@ -72,7 +72,7 @@ const l = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
72
72
  border: var(--sa-textarea-border) solid var(--sa-textarea-border-color);
73
73
  border-radius: var(--sa-textarea-radius);
74
74
  }
75
- .starasia-textarea-lg {
75
+ .sa-textarea-lg {
76
76
  height: var(--sa-h-12, 48px);
77
77
  padding-block: var(--sa-spacing-md, 12px);
78
78
  padding-inline: var(--sa-spacing-md, 12px);
@@ -81,54 +81,60 @@ const l = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
81
81
  border-radius: var(--sa-textarea-radius);
82
82
  }
83
83
 
84
- .starasia-textarea:focus {
84
+ .sa-textarea:focus {
85
85
  /* outline-color: var(--sa-textarea-border-focused); */
86
86
  outline: none;
87
87
  border-color: var(--sa-textarea-border-focused);
88
88
  box-shadow: 0px 0px 0px 2px var(--sa-textarea-bg-selected);
89
89
  }
90
90
 
91
- .starasia-textarea:disabled {
91
+ .sa-textarea:disabled {
92
92
  border-color: var(--sa-textarea-border-color);
93
93
  background-color: var(--sa-textarea-bg-disabled);
94
94
  cursor: not-allowed;
95
95
  }
96
96
 
97
- .starasia-textarea-warning {
97
+ .sa-textarea-warning {
98
98
  border-color: var(--sa-textarea-border-warning) !important;
99
99
  /* outline-color: #eab308 !important; */
100
100
  }
101
- .starasia-textarea-error {
101
+ .sa-textarea-error {
102
102
  border-color: var(--sa-textarea-border-error) !important;
103
103
  /* outline-color: #eab308 !important; */
104
104
  }
105
- `, n = "starasia-textarea-styles", b = (r) => {
106
- if (!document.getElementById(n)) {
105
+ `, s = "sa-textarea-styles", c = (e) => {
106
+ if (!document.getElementById(s)) {
107
107
  const a = document.createElement("style");
108
- a.id = n, a.textContent = r, document.head.appendChild(a);
108
+ a.id = s, a.textContent = e, document.head.appendChild(a);
109
109
  }
110
110
  };
111
- b(l);
112
- const p = (r) => {
111
+ c(b);
112
+ const g = (e) => {
113
113
  const {
114
114
  height: a,
115
- width: s = "fit-content",
116
- resize: o,
117
- size: i = "md",
118
- status: t,
119
- fullWidth: d,
120
- ...e
121
- } = r;
122
- return /* @__PURE__ */ x(
115
+ width: o = "fit-content",
116
+ resize: t,
117
+ size: d = "md",
118
+ status: n,
119
+ fullWidth: i,
120
+ ...r
121
+ } = e, x = [
122
+ "sa-textarea",
123
+ t && `sa-textarea-resize-${t}`,
124
+ `sa-textarea-${d}`,
125
+ n && `sa-textarea-${n}`,
126
+ r.className
127
+ ].filter(Boolean).join(" ");
128
+ return /* @__PURE__ */ l(
123
129
  "textarea",
124
130
  {
125
- className: `starasia-textarea starasia-textarea-resize-${o} starasia-textarea-${i} starasia-textarea-${t}`,
126
- ...e,
127
- disabled: t === "disable" ? !0 : e.disabled,
128
- style: { height: a, width: d ? "100%" : s, ...e.style }
131
+ ...r,
132
+ className: x,
133
+ disabled: n === "disable" ? !0 : r.disabled,
134
+ style: { height: a, width: i ? "100%" : o, ...r.style }
129
135
  }
130
136
  );
131
137
  };
132
138
  export {
133
- p as Textarea
139
+ g as Textarea
134
140
  };
package/dist/textarea.umd.js CHANGED
@@ -1,4 +1,4 @@
1
- (function(a,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime"],r):(a=typeof globalThis<"u"?globalThis:a||self,r(a.Textarea={},a.jsxRuntime))})(this,function(a,r){"use strict";const i=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
1
+ (function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a.Textarea={},a.jsxRuntime))})(this,function(a,e){"use strict";const i=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
2
2
 
3
3
  * {
4
4
  margin: 0;
@@ -12,42 +12,42 @@
12
12
  --sa-textarea-radius: var(--sa-radii-md, 0.5rem);
13
13
  --sa-textarea-placeholder: var(--sa-color-gray-400, #b7b9be);
14
14
  --sa-textarea-bg: var(--sa-background-primary, #ffffff);
15
- --sa-textarea-border-color: rgba(120, 134, 127, 0.2);
15
+ --sa-textarea-border-color: var(--sa-color-gray-alpha-a20, #78867f33);
16
16
  --sa-textarea-border-focused: var(--sa-border-focused, #1a4fa0);
17
17
  --sa-textarea-border-brand: var(--sa-color-brand-200, #99b3db);
18
18
  --sa-textarea-bg-selected: var(--sa-color-brand-50, #e6edf6);
19
- --sa-textarea-bg-disabled: rgba(120, 134, 127, 0.1);
19
+ --sa-textarea-bg-disabled: var(--sa-color-gray-alpha-a10, #78867f1a);
20
20
  --sa-textarea-border-warning: var(--sa-color-warning-400, #ed9f30);
21
21
  --sa-textarea-border-error: var(--sa-color-error-500, #ff4d6d);
22
22
  }
23
23
 
24
- .starasia-textarea {
24
+ .sa-textarea {
25
25
  padding: var(--sa-spacing-sm, 8px);
26
26
  box-sizing: border-box;
27
27
  /* background: transparent; */
28
28
  background: var(--sa-textarea-bg);
29
29
  }
30
- .starasia-textarea::placeholder {
30
+ .sa-textarea::placeholder {
31
31
  color: var(--sa-textarea-placeholder);
32
32
  font-weight: var(--sa-font-weight-normal, 300);
33
33
  }
34
- .starasia-textarea-resize-horizontal {
34
+ .sa-textarea-resize-horizontal {
35
35
  resize: horizontal;
36
36
  }
37
37
 
38
- .starasia-textarea-resize-vertical {
38
+ .sa-textarea-resize-vertical {
39
39
  resize: vertical;
40
40
  }
41
41
 
42
- .starasia-textarea-resize-both {
42
+ .sa-textarea-resize-both {
43
43
  resize: both;
44
44
  }
45
45
 
46
- .starasia-textarea-resize-none {
46
+ .sa-textarea-resize-none {
47
47
  resize: none;
48
48
  }
49
49
 
50
- .starasia-textarea-xs {
50
+ .sa-textarea-xs {
51
51
  height: var(--sa-h-6, 24px);
52
52
  padding-block: var(--sa-spacing-xs, 4px);
53
53
  padding-inline: var(--sa-spacing-sm, 8px);
@@ -55,7 +55,7 @@
55
55
  border: var(--sa-textarea-border) solid var(--sa-textarea-border-color);
56
56
  border-radius: var(--sa-textarea-radius);
57
57
  }
58
- .starasia-textarea-sm {
58
+ .sa-textarea-sm {
59
59
  height: var(--sa-h-8, 32px);
60
60
  padding-block: var(--sa-spacing-xs, 4px);
61
61
  padding-inline: var(--sa-spacing-sm, 8px);
@@ -63,7 +63,7 @@
63
63
  border: var(--sa-textarea-border) solid var(--sa-textarea-border-color);
64
64
  border-radius: var(--sa-textarea-radius);
65
65
  }
66
- .starasia-textarea-md {
66
+ .sa-textarea-md {
67
67
  height: var(--sa-h-10, 40px);
68
68
  padding-block: var(--sa-spacing-sm, 8px);
69
69
  padding-inline: var(--sa-spacing-md, 12px);
@@ -71,7 +71,7 @@
71
71
  border: var(--sa-textarea-border) solid var(--sa-textarea-border-color);
72
72
  border-radius: var(--sa-textarea-radius);
73
73
  }
74
- .starasia-textarea-lg {
74
+ .sa-textarea-lg {
75
75
  height: var(--sa-h-12, 48px);
76
76
  padding-block: var(--sa-spacing-md, 12px);
77
77
  padding-inline: var(--sa-spacing-md, 12px);
@@ -80,25 +80,25 @@
80
80
  border-radius: var(--sa-textarea-radius);
81
81
  }
82
82
 
83
- .starasia-textarea:focus {
83
+ .sa-textarea:focus {
84
84
  /* outline-color: var(--sa-textarea-border-focused); */
85
85
  outline: none;
86
86
  border-color: var(--sa-textarea-border-focused);
87
87
  box-shadow: 0px 0px 0px 2px var(--sa-textarea-bg-selected);
88
88
  }
89
89
 
90
- .starasia-textarea:disabled {
90
+ .sa-textarea:disabled {
91
91
  border-color: var(--sa-textarea-border-color);
92
92
  background-color: var(--sa-textarea-bg-disabled);
93
93
  cursor: not-allowed;
94
94
  }
95
95
 
96
- .starasia-textarea-warning {
96
+ .sa-textarea-warning {
97
97
  border-color: var(--sa-textarea-border-warning) !important;
98
98
  /* outline-color: #eab308 !important; */
99
99
  }
100
- .starasia-textarea-error {
100
+ .sa-textarea-error {
101
101
  border-color: var(--sa-textarea-border-error) !important;
102
102
  /* outline-color: #eab308 !important; */
103
103
  }
104
- `,s="starasia-textarea-styles";(t=>{if(!document.getElementById(s)){const e=document.createElement("style");e.id=s,e.textContent=t,document.head.appendChild(e)}})(i);const d=t=>{const{height:e,width:x="fit-content",resize:l,size:b="md",status:o,fullWidth:c,...n}=t;return r.jsx("textarea",{className:`starasia-textarea starasia-textarea-resize-${l} starasia-textarea-${b} starasia-textarea-${o}`,...n,disabled:o==="disable"?!0:n.disabled,style:{height:e,width:c?"100%":x,...n.style}})};a.Textarea=d,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});
104
+ `,o="sa-textarea-styles";(t=>{if(!document.getElementById(o)){const r=document.createElement("style");r.id=o,r.textContent=t,document.head.appendChild(r)}})(i);const x=t=>{const{height:r,width:l="fit-content",resize:d,size:c="md",status:s,fullWidth:b,...n}=t,p=["sa-textarea",d&&`sa-textarea-resize-${d}`,`sa-textarea-${c}`,s&&`sa-textarea-${s}`,n.className].filter(Boolean).join(" ");return e.jsx("textarea",{...n,className:p,disabled:s==="disable"?!0:n.disabled,style:{height:r,width:b?"100%":l,...n.style}})};a.Textarea=x,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@starasia/textarea",
3
- "version": "2.0.0",
3
+ "version": "3.0.0",
4
4
  "description": "textarea component for starasia UI",
5
5
  "author": "Prawito Hudoro",
6
6
  "main": "dist/textarea.umd.js",
@@ -12,10 +12,6 @@
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
- },
19
15
  "keywords": [],
20
16
  "license": "ISC",
21
17
  "type": "module",
@@ -37,5 +33,9 @@
37
33
  "react-dom": "^18.2.0",
38
34
  "@types/react": "^18.2.55",
39
35
  "@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
+ }