@starasia/textarea 1.0.3 → 2.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.
@@ -1,5 +1,5 @@
1
- import { jsx as u } from "react/jsx-runtime";
2
- const x = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
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");
3
3
 
4
4
  * {
5
5
  margin: 0;
@@ -9,69 +9,28 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
9
9
  }
10
10
 
11
11
  :root {
12
- /* height */
13
- --starasia-ui-h-6: 1.5rem; /* 24px */
14
- --starasia-ui-h-8: 2rem; /* 32px */
15
- --starasia-ui-h-10: 2.5rem; /* 40px */
16
- --starasia-ui-h-12: 3rem; /* 48px */
17
-
18
- /* color */
19
- --starasia-ui-color-gray-200: #c9cecc;
20
- --starasia-ui-color-gray-300: #d1d5db;
21
-
22
- /* border radius */
23
- --starasia-ui-radii-base: 0.25rem; /* 4px */
24
-
25
- /* new root css */
26
- /* spacing */
27
- --starasia-ui-textarea-spacing-xs: var(--starasia-ui-spacing-xs, 4px);
28
- --starasia-ui-textarea-spacing-sm: var(--starasia-ui-spacing-sm, 8px);
29
- --starasia-ui-textarea-spacing-md: var(--starasia-ui-spacing-md, 12px);
30
-
31
- /* height */
32
- --starasia-ui-textarea-height-xs: var(--starasia-ui-h-6, 24px);
33
- --starasia-ui-textarea-height-sm: var(--starasia-ui-h-8, 32px);
34
- --starasia-ui-textarea-height-md: var(--starasia-ui-h-10, 40px);
35
- --starasia-ui-textarea-height-lg: var(--starasia-ui-h-12, 48px);
36
-
37
- /* border width */
38
- --starasia-ui-textarea-border-width: var(--starasia-ui-border, 1px);
39
-
40
- /* color */
41
- /* gray */
42
- --starasia-ui-textarea-color-tertiary-gray: var(
43
- --starasia-ui-color-gray-300,
44
- #d1d5db
45
- );
46
-
47
- /* brand */
48
- --starasia-ui-textarea-color-primary-blue: var(--starasia-ui-brand-primary-default);
49
- --starasia-ui-textarea-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary);
50
- --starasia-ui-textarea-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary);
51
-
52
- /* border radius */
53
- --starasia-ui-textarea-border-radius-base: var(--starasia-ui-radii-md, 8px);
54
- --starasia-ui-textarea-border-radius-lg: var(--starasia-ui-radii-md, 8px);
55
-
56
- --starasia-ui-textarea-placholder-color: var(
57
- --starasia-ui-color-gray-200,
58
- #c9cecc
59
- );
60
- --starasia-ui-textarea-placholder-fontWeight: var(
61
- --starasia-ui-fontWeights-normal,
62
- 300
63
- );
12
+ --sa-textarea-border: var(--sa-border, 1px);
13
+ --sa-textarea-radius: var(--sa-radii-md, 0.5rem);
14
+ --sa-textarea-placeholder: var(--sa-color-gray-400, #b7b9be);
15
+ --sa-textarea-bg: var(--sa-background-primary, #ffffff);
16
+ --sa-textarea-border-color: rgba(120, 134, 127, 0.2);
17
+ --sa-textarea-border-focused: var(--sa-border-focused, #1a4fa0);
18
+ --sa-textarea-border-brand: var(--sa-color-brand-200, #99b3db);
19
+ --sa-textarea-bg-selected: var(--sa-color-brand-50, #e6edf6);
20
+ --sa-textarea-bg-disabled: rgba(120, 134, 127, 0.1);
21
+ --sa-textarea-border-warning: var(--sa-color-warning-400, #ed9f30);
22
+ --sa-textarea-border-error: var(--sa-color-error-500, #ff4d6d);
64
23
  }
65
24
 
66
25
  .starasia-textarea {
67
- padding: var(--starasia-ui-textarea-spacing-sm);
26
+ padding: var(--sa-spacing-sm, 8px);
68
27
  box-sizing: border-box;
69
28
  /* background: transparent; */
70
- background: white;
29
+ background: var(--sa-textarea-bg);
71
30
  }
72
31
  .starasia-textarea::placeholder {
73
- color: var(--starasia-ui-textarea-placholder-color);
74
- font-weight: var(--starasia-ui-textarea-placholder-fontWeight);
32
+ color: var(--sa-textarea-placeholder);
33
+ font-weight: var(--sa-font-weight-normal, 300);
75
34
  }
76
35
  .starasia-textarea-resize-horizontal {
77
36
  resize: horizontal;
@@ -90,92 +49,86 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
90
49
  }
91
50
 
92
51
  .starasia-textarea-xs {
93
- height: var(--starasia-ui-textarea-height-xs);
94
- padding-block: var(--starasia-ui-textarea-spacing-xs);
95
- padding-inline: var(--starasia-ui-textarea-spacing-sm);
96
- font-size: var(--starasia-ui-fontSizes-xs, 10px);
97
- border: var(--starasia-ui-textarea-border-width) solid
98
- var(--starasia-ui-textarea-color-tertiary-gray);
99
- border-radius: var(--starasia-ui-textarea-border-radius-base);
52
+ height: var(--sa-h-6, 24px);
53
+ padding-block: var(--sa-spacing-xs, 4px);
54
+ padding-inline: var(--sa-spacing-sm, 8px);
55
+ font-size: var(--sa-font-size-xs, 10px);
56
+ border: var(--sa-textarea-border) solid var(--sa-textarea-border-color);
57
+ border-radius: var(--sa-textarea-radius);
100
58
  }
101
59
  .starasia-textarea-sm {
102
- height: var(--starasia-ui-textarea-height-sm);
103
- padding-block: var(--starasia-ui-textarea-spacing-xs);
104
- padding-inline: var(--starasia-ui-textarea-spacing-sm);
105
- font-size: var(--starasia-ui-fontSizes-sm, 12px);
106
- border: var(--starasia-ui-textarea-border-width) solid
107
- var(--starasia-ui-textarea-color-tertiary-gray);
108
- border-radius: var(--starasia-ui-textarea-border-radius-base);
60
+ height: var(--sa-h-8, 32px);
61
+ padding-block: var(--sa-spacing-xs, 4px);
62
+ padding-inline: var(--sa-spacing-sm, 8px);
63
+ font-size: var(--sa-font-size-sm, 12px);
64
+ border: var(--sa-textarea-border) solid var(--sa-textarea-border-color);
65
+ border-radius: var(--sa-textarea-radius);
109
66
  }
110
67
  .starasia-textarea-md {
111
- height: var(--starasia-ui-textarea-height-md);
112
- padding-block: var(--starasia-ui-textarea-spacing-sm);
113
- padding-inline: var(--starasia-ui-textarea-spacing-md);
114
- font-size: var(--starasia-ui-fontSizes-md, 14px);
115
- border: var(--starasia-ui-textarea-border-width) solid
116
- rgba(120, 134, 127, 0.2);
117
- border-radius: var(--starasia-ui-textarea-border-radius-lg);
68
+ height: var(--sa-h-10, 40px);
69
+ padding-block: var(--sa-spacing-sm, 8px);
70
+ padding-inline: var(--sa-spacing-md, 12px);
71
+ font-size: var(--sa-font-size-md, 14px);
72
+ border: var(--sa-textarea-border) solid var(--sa-textarea-border-color);
73
+ border-radius: var(--sa-textarea-radius);
118
74
  }
119
75
  .starasia-textarea-lg {
120
- height: var(--starasia-ui-textarea-height-lg);
121
- padding-block: var(--starasia-ui-textarea-spacing-md);
122
- padding-inline: var(--starasia-ui-textarea-spacing-md);
123
- font-size: var(var(--starasia-ui-fontSizes-lg, 16px));
124
- border: var(--starasia-ui-textarea-border-width) solid
125
- var(--starasia-ui-textarea-color-tertiary-gray);
126
- border-radius: var(--starasia-ui-textarea-border-radius-lg);
76
+ height: var(--sa-h-12, 48px);
77
+ padding-block: var(--sa-spacing-md, 12px);
78
+ padding-inline: var(--sa-spacing-md, 12px);
79
+ font-size: var(--sa-font-size-lg, 16px);
80
+ border: var(--sa-textarea-border) solid var(--sa-textarea-border-color);
81
+ border-radius: var(--sa-textarea-radius);
127
82
  }
128
83
 
129
84
  .starasia-textarea:focus {
130
- /* outline-color: var(--starasia-ui-textarea-color-primary-blue); */
85
+ /* outline-color: var(--sa-textarea-border-focused); */
131
86
  outline: none;
132
- border-color: var(--starasia-ui-textarea-color-primary-blue);
133
- box-shadow: 0px 0px 0px 2px var(--starasia-ui-textarea-color-quaternary-blue);
87
+ border-color: var(--sa-textarea-border-focused);
88
+ box-shadow: 0px 0px 0px 2px var(--sa-textarea-bg-selected);
134
89
  }
135
90
 
136
91
  .starasia-textarea:disabled {
137
- border-color: rgba(120, 134, 127, 0.2);
138
- background-color: rgba(120, 134, 127, 0.1);
139
- /* background-color: var(--starasia-ui-textarea-color-tertiary-gray); */
140
- /* border-color: var(--starasia-ui-textarea-color-tertiary-gray); */
92
+ border-color: var(--sa-textarea-border-color);
93
+ background-color: var(--sa-textarea-bg-disabled);
141
94
  cursor: not-allowed;
142
95
  }
143
96
 
144
97
  .starasia-textarea-warning {
145
- border-color: #eab308 !important;
98
+ border-color: var(--sa-textarea-border-warning) !important;
146
99
  /* outline-color: #eab308 !important; */
147
100
  }
148
101
  .starasia-textarea-error {
149
- border-color: #ef4444 !important;
102
+ border-color: var(--sa-textarea-border-error) !important;
150
103
  /* outline-color: #eab308 !important; */
151
104
  }
152
- `, e = "starasia-textarea-styles", l = (r) => {
153
- if (!document.getElementById(e)) {
105
+ `, n = "starasia-textarea-styles", b = (r) => {
106
+ if (!document.getElementById(n)) {
154
107
  const a = document.createElement("style");
155
- a.id = e, a.textContent = r, document.head.appendChild(a);
108
+ a.id = n, a.textContent = r, document.head.appendChild(a);
156
109
  }
157
110
  };
158
- l(x);
159
- const g = (r) => {
111
+ b(l);
112
+ const p = (r) => {
160
113
  const {
161
114
  height: a,
162
115
  width: s = "fit-content",
163
- resize: n,
164
- size: o = "md",
165
- status: i,
116
+ resize: o,
117
+ size: i = "md",
118
+ status: t,
166
119
  fullWidth: d,
167
- ...t
120
+ ...e
168
121
  } = r;
169
- return /* @__PURE__ */ u(
122
+ return /* @__PURE__ */ x(
170
123
  "textarea",
171
124
  {
172
- className: `starasia-textarea starasia-textarea-resize-${n} starasia-textarea-${o} starasia-textarea-${i}`,
173
- ...t,
174
- disabled: i === "disable" ? !0 : t.disabled,
175
- style: { height: a, width: d ? "100%" : s, ...t.style }
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 }
176
129
  }
177
130
  );
178
131
  };
179
132
  export {
180
- g as Textarea
133
+ p as Textarea
181
134
  };
@@ -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 o=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
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");
2
2
 
3
3
  * {
4
4
  margin: 0;
@@ -8,69 +8,28 @@
8
8
  }
9
9
 
10
10
  :root {
11
- /* height */
12
- --starasia-ui-h-6: 1.5rem; /* 24px */
13
- --starasia-ui-h-8: 2rem; /* 32px */
14
- --starasia-ui-h-10: 2.5rem; /* 40px */
15
- --starasia-ui-h-12: 3rem; /* 48px */
16
-
17
- /* color */
18
- --starasia-ui-color-gray-200: #c9cecc;
19
- --starasia-ui-color-gray-300: #d1d5db;
20
-
21
- /* border radius */
22
- --starasia-ui-radii-base: 0.25rem; /* 4px */
23
-
24
- /* new root css */
25
- /* spacing */
26
- --starasia-ui-textarea-spacing-xs: var(--starasia-ui-spacing-xs, 4px);
27
- --starasia-ui-textarea-spacing-sm: var(--starasia-ui-spacing-sm, 8px);
28
- --starasia-ui-textarea-spacing-md: var(--starasia-ui-spacing-md, 12px);
29
-
30
- /* height */
31
- --starasia-ui-textarea-height-xs: var(--starasia-ui-h-6, 24px);
32
- --starasia-ui-textarea-height-sm: var(--starasia-ui-h-8, 32px);
33
- --starasia-ui-textarea-height-md: var(--starasia-ui-h-10, 40px);
34
- --starasia-ui-textarea-height-lg: var(--starasia-ui-h-12, 48px);
35
-
36
- /* border width */
37
- --starasia-ui-textarea-border-width: var(--starasia-ui-border, 1px);
38
-
39
- /* color */
40
- /* gray */
41
- --starasia-ui-textarea-color-tertiary-gray: var(
42
- --starasia-ui-color-gray-300,
43
- #d1d5db
44
- );
45
-
46
- /* brand */
47
- --starasia-ui-textarea-color-primary-blue: var(--starasia-ui-brand-primary-default);
48
- --starasia-ui-textarea-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary);
49
- --starasia-ui-textarea-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary);
50
-
51
- /* border radius */
52
- --starasia-ui-textarea-border-radius-base: var(--starasia-ui-radii-md, 8px);
53
- --starasia-ui-textarea-border-radius-lg: var(--starasia-ui-radii-md, 8px);
54
-
55
- --starasia-ui-textarea-placholder-color: var(
56
- --starasia-ui-color-gray-200,
57
- #c9cecc
58
- );
59
- --starasia-ui-textarea-placholder-fontWeight: var(
60
- --starasia-ui-fontWeights-normal,
61
- 300
62
- );
11
+ --sa-textarea-border: var(--sa-border, 1px);
12
+ --sa-textarea-radius: var(--sa-radii-md, 0.5rem);
13
+ --sa-textarea-placeholder: var(--sa-color-gray-400, #b7b9be);
14
+ --sa-textarea-bg: var(--sa-background-primary, #ffffff);
15
+ --sa-textarea-border-color: rgba(120, 134, 127, 0.2);
16
+ --sa-textarea-border-focused: var(--sa-border-focused, #1a4fa0);
17
+ --sa-textarea-border-brand: var(--sa-color-brand-200, #99b3db);
18
+ --sa-textarea-bg-selected: var(--sa-color-brand-50, #e6edf6);
19
+ --sa-textarea-bg-disabled: rgba(120, 134, 127, 0.1);
20
+ --sa-textarea-border-warning: var(--sa-color-warning-400, #ed9f30);
21
+ --sa-textarea-border-error: var(--sa-color-error-500, #ff4d6d);
63
22
  }
64
23
 
65
24
  .starasia-textarea {
66
- padding: var(--starasia-ui-textarea-spacing-sm);
25
+ padding: var(--sa-spacing-sm, 8px);
67
26
  box-sizing: border-box;
68
27
  /* background: transparent; */
69
- background: white;
28
+ background: var(--sa-textarea-bg);
70
29
  }
71
30
  .starasia-textarea::placeholder {
72
- color: var(--starasia-ui-textarea-placholder-color);
73
- font-weight: var(--starasia-ui-textarea-placholder-fontWeight);
31
+ color: var(--sa-textarea-placeholder);
32
+ font-weight: var(--sa-font-weight-normal, 300);
74
33
  }
75
34
  .starasia-textarea-resize-horizontal {
76
35
  resize: horizontal;
@@ -89,63 +48,57 @@
89
48
  }
90
49
 
91
50
  .starasia-textarea-xs {
92
- height: var(--starasia-ui-textarea-height-xs);
93
- padding-block: var(--starasia-ui-textarea-spacing-xs);
94
- padding-inline: var(--starasia-ui-textarea-spacing-sm);
95
- font-size: var(--starasia-ui-fontSizes-xs, 10px);
96
- border: var(--starasia-ui-textarea-border-width) solid
97
- var(--starasia-ui-textarea-color-tertiary-gray);
98
- border-radius: var(--starasia-ui-textarea-border-radius-base);
51
+ height: var(--sa-h-6, 24px);
52
+ padding-block: var(--sa-spacing-xs, 4px);
53
+ padding-inline: var(--sa-spacing-sm, 8px);
54
+ font-size: var(--sa-font-size-xs, 10px);
55
+ border: var(--sa-textarea-border) solid var(--sa-textarea-border-color);
56
+ border-radius: var(--sa-textarea-radius);
99
57
  }
100
58
  .starasia-textarea-sm {
101
- height: var(--starasia-ui-textarea-height-sm);
102
- padding-block: var(--starasia-ui-textarea-spacing-xs);
103
- padding-inline: var(--starasia-ui-textarea-spacing-sm);
104
- font-size: var(--starasia-ui-fontSizes-sm, 12px);
105
- border: var(--starasia-ui-textarea-border-width) solid
106
- var(--starasia-ui-textarea-color-tertiary-gray);
107
- border-radius: var(--starasia-ui-textarea-border-radius-base);
59
+ height: var(--sa-h-8, 32px);
60
+ padding-block: var(--sa-spacing-xs, 4px);
61
+ padding-inline: var(--sa-spacing-sm, 8px);
62
+ font-size: var(--sa-font-size-sm, 12px);
63
+ border: var(--sa-textarea-border) solid var(--sa-textarea-border-color);
64
+ border-radius: var(--sa-textarea-radius);
108
65
  }
109
66
  .starasia-textarea-md {
110
- height: var(--starasia-ui-textarea-height-md);
111
- padding-block: var(--starasia-ui-textarea-spacing-sm);
112
- padding-inline: var(--starasia-ui-textarea-spacing-md);
113
- font-size: var(--starasia-ui-fontSizes-md, 14px);
114
- border: var(--starasia-ui-textarea-border-width) solid
115
- rgba(120, 134, 127, 0.2);
116
- border-radius: var(--starasia-ui-textarea-border-radius-lg);
67
+ height: var(--sa-h-10, 40px);
68
+ padding-block: var(--sa-spacing-sm, 8px);
69
+ padding-inline: var(--sa-spacing-md, 12px);
70
+ font-size: var(--sa-font-size-md, 14px);
71
+ border: var(--sa-textarea-border) solid var(--sa-textarea-border-color);
72
+ border-radius: var(--sa-textarea-radius);
117
73
  }
118
74
  .starasia-textarea-lg {
119
- height: var(--starasia-ui-textarea-height-lg);
120
- padding-block: var(--starasia-ui-textarea-spacing-md);
121
- padding-inline: var(--starasia-ui-textarea-spacing-md);
122
- font-size: var(var(--starasia-ui-fontSizes-lg, 16px));
123
- border: var(--starasia-ui-textarea-border-width) solid
124
- var(--starasia-ui-textarea-color-tertiary-gray);
125
- border-radius: var(--starasia-ui-textarea-border-radius-lg);
75
+ height: var(--sa-h-12, 48px);
76
+ padding-block: var(--sa-spacing-md, 12px);
77
+ padding-inline: var(--sa-spacing-md, 12px);
78
+ font-size: var(--sa-font-size-lg, 16px);
79
+ border: var(--sa-textarea-border) solid var(--sa-textarea-border-color);
80
+ border-radius: var(--sa-textarea-radius);
126
81
  }
127
82
 
128
83
  .starasia-textarea:focus {
129
- /* outline-color: var(--starasia-ui-textarea-color-primary-blue); */
84
+ /* outline-color: var(--sa-textarea-border-focused); */
130
85
  outline: none;
131
- border-color: var(--starasia-ui-textarea-color-primary-blue);
132
- box-shadow: 0px 0px 0px 2px var(--starasia-ui-textarea-color-quaternary-blue);
86
+ border-color: var(--sa-textarea-border-focused);
87
+ box-shadow: 0px 0px 0px 2px var(--sa-textarea-bg-selected);
133
88
  }
134
89
 
135
90
  .starasia-textarea:disabled {
136
- border-color: rgba(120, 134, 127, 0.2);
137
- background-color: rgba(120, 134, 127, 0.1);
138
- /* background-color: var(--starasia-ui-textarea-color-tertiary-gray); */
139
- /* border-color: var(--starasia-ui-textarea-color-tertiary-gray); */
91
+ border-color: var(--sa-textarea-border-color);
92
+ background-color: var(--sa-textarea-bg-disabled);
140
93
  cursor: not-allowed;
141
94
  }
142
95
 
143
96
  .starasia-textarea-warning {
144
- border-color: #eab308 !important;
97
+ border-color: var(--sa-textarea-border-warning) !important;
145
98
  /* outline-color: #eab308 !important; */
146
99
  }
147
100
  .starasia-textarea-error {
148
- border-color: #ef4444 !important;
101
+ border-color: var(--sa-textarea-border-error) !important;
149
102
  /* outline-color: #eab308 !important; */
150
103
  }
151
- `,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"})});
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"})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@starasia/textarea",
3
- "version": "1.0.3",
3
+ "version": "2.0.0",
4
4
  "description": "textarea component for starasia UI",
5
5
  "author": "Prawito Hudoro",
6
6
  "main": "dist/textarea.umd.js",