@starasia/textarea 1.0.4 → 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,74 +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: rgba(201, 206, 204, 1);
20
- --starasia-ui-color-gray-300: rgba(209, 213, 219, 1);
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, 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));
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
- rgba(201, 206, 204, 1)
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);
65
- --starasia-ui-textarea-placholder-fontWeight: var(
66
- --starasia-ui-fontWeights-normal,
67
- 300
68
- );
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);
69
23
  }
70
24
 
71
25
  .starasia-textarea {
72
- padding: var(--starasia-ui-textarea-spacing-sm);
26
+ padding: var(--sa-spacing-sm, 8px);
73
27
  box-sizing: border-box;
74
28
  /* background: transparent; */
75
- background: var(--starasia-ui-textarea-color-white);
29
+ background: var(--sa-textarea-bg);
76
30
  }
77
31
  .starasia-textarea::placeholder {
78
- color: var(--starasia-ui-textarea-placholder-color);
79
- font-weight: var(--starasia-ui-textarea-placholder-fontWeight);
32
+ color: var(--sa-textarea-placeholder);
33
+ font-weight: var(--sa-font-weight-normal, 300);
80
34
  }
81
35
  .starasia-textarea-resize-horizontal {
82
36
  resize: horizontal;
@@ -95,92 +49,86 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
95
49
  }
96
50
 
97
51
  .starasia-textarea-xs {
98
- height: var(--starasia-ui-textarea-height-xs);
99
- padding-block: var(--starasia-ui-textarea-spacing-xs);
100
- padding-inline: var(--starasia-ui-textarea-spacing-sm);
101
- font-size: var(--starasia-ui-fontSizes-xs, 10px);
102
- border: var(--starasia-ui-textarea-border-width) solid
103
- var(--starasia-ui-textarea-color-tertiary-gray);
104
- 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);
105
58
  }
106
59
  .starasia-textarea-sm {
107
- height: var(--starasia-ui-textarea-height-sm);
108
- padding-block: var(--starasia-ui-textarea-spacing-xs);
109
- padding-inline: var(--starasia-ui-textarea-spacing-sm);
110
- font-size: var(--starasia-ui-fontSizes-sm, 12px);
111
- border: var(--starasia-ui-textarea-border-width) solid
112
- var(--starasia-ui-textarea-color-tertiary-gray);
113
- 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);
114
66
  }
115
67
  .starasia-textarea-md {
116
- height: var(--starasia-ui-textarea-height-md);
117
- padding-block: var(--starasia-ui-textarea-spacing-sm);
118
- padding-inline: var(--starasia-ui-textarea-spacing-md);
119
- font-size: var(--starasia-ui-fontSizes-md, 14px);
120
- border: var(--starasia-ui-textarea-border-width) solid
121
- var(--starasia-ui-textarea-color-border);
122
- 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);
123
74
  }
124
75
  .starasia-textarea-lg {
125
- height: var(--starasia-ui-textarea-height-lg);
126
- padding-block: var(--starasia-ui-textarea-spacing-md);
127
- padding-inline: var(--starasia-ui-textarea-spacing-md);
128
- font-size: var(var(--starasia-ui-fontSizes-lg, 16px));
129
- border: var(--starasia-ui-textarea-border-width) solid
130
- var(--starasia-ui-textarea-color-tertiary-gray);
131
- 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);
132
82
  }
133
83
 
134
84
  .starasia-textarea:focus {
135
- /* outline-color: var(--starasia-ui-textarea-color-primary-blue); */
85
+ /* outline-color: var(--sa-textarea-border-focused); */
136
86
  outline: none;
137
- border-color: var(--starasia-ui-textarea-color-primary-blue);
138
- 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);
139
89
  }
140
90
 
141
91
  .starasia-textarea:disabled {
142
- border-color: var(--starasia-ui-textarea-color-border);
143
- background-color: var(--starasia-ui-textarea-color-disabled-bg);
144
- /* background-color: var(--starasia-ui-textarea-color-tertiary-gray); */
145
- /* 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);
146
94
  cursor: not-allowed;
147
95
  }
148
96
 
149
97
  .starasia-textarea-warning {
150
- border-color: var(--starasia-ui-textarea-color-warning) !important;
98
+ border-color: var(--sa-textarea-border-warning) !important;
151
99
  /* outline-color: #eab308 !important; */
152
100
  }
153
101
  .starasia-textarea-error {
154
- border-color: var(--starasia-ui-textarea-color-error) !important;
102
+ border-color: var(--sa-textarea-border-error) !important;
155
103
  /* outline-color: #eab308 !important; */
156
104
  }
157
- `, e = "starasia-textarea-styles", l = (r) => {
158
- if (!document.getElementById(e)) {
105
+ `, n = "starasia-textarea-styles", b = (r) => {
106
+ if (!document.getElementById(n)) {
159
107
  const a = document.createElement("style");
160
- a.id = e, a.textContent = r, document.head.appendChild(a);
108
+ a.id = n, a.textContent = r, document.head.appendChild(a);
161
109
  }
162
110
  };
163
- l(x);
164
- const g = (r) => {
111
+ b(l);
112
+ const p = (r) => {
165
113
  const {
166
114
  height: a,
167
115
  width: s = "fit-content",
168
- resize: n,
169
- size: o = "md",
170
- status: i,
116
+ resize: o,
117
+ size: i = "md",
118
+ status: t,
171
119
  fullWidth: d,
172
- ...t
120
+ ...e
173
121
  } = r;
174
- return /* @__PURE__ */ u(
122
+ return /* @__PURE__ */ x(
175
123
  "textarea",
176
124
  {
177
- className: `starasia-textarea starasia-textarea-resize-${n} starasia-textarea-${o} starasia-textarea-${i}`,
178
- ...t,
179
- disabled: i === "disable" ? !0 : t.disabled,
180
- 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 }
181
129
  }
182
130
  );
183
131
  };
184
132
  export {
185
- g as Textarea
133
+ p as Textarea
186
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,74 +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: rgba(201, 206, 204, 1);
19
- --starasia-ui-color-gray-300: rgba(209, 213, 219, 1);
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, 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));
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
- rgba(201, 206, 204, 1)
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);
64
- --starasia-ui-textarea-placholder-fontWeight: var(
65
- --starasia-ui-fontWeights-normal,
66
- 300
67
- );
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);
68
22
  }
69
23
 
70
24
  .starasia-textarea {
71
- padding: var(--starasia-ui-textarea-spacing-sm);
25
+ padding: var(--sa-spacing-sm, 8px);
72
26
  box-sizing: border-box;
73
27
  /* background: transparent; */
74
- background: var(--starasia-ui-textarea-color-white);
28
+ background: var(--sa-textarea-bg);
75
29
  }
76
30
  .starasia-textarea::placeholder {
77
- color: var(--starasia-ui-textarea-placholder-color);
78
- font-weight: var(--starasia-ui-textarea-placholder-fontWeight);
31
+ color: var(--sa-textarea-placeholder);
32
+ font-weight: var(--sa-font-weight-normal, 300);
79
33
  }
80
34
  .starasia-textarea-resize-horizontal {
81
35
  resize: horizontal;
@@ -94,63 +48,57 @@
94
48
  }
95
49
 
96
50
  .starasia-textarea-xs {
97
- height: var(--starasia-ui-textarea-height-xs);
98
- padding-block: var(--starasia-ui-textarea-spacing-xs);
99
- padding-inline: var(--starasia-ui-textarea-spacing-sm);
100
- font-size: var(--starasia-ui-fontSizes-xs, 10px);
101
- border: var(--starasia-ui-textarea-border-width) solid
102
- var(--starasia-ui-textarea-color-tertiary-gray);
103
- 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);
104
57
  }
105
58
  .starasia-textarea-sm {
106
- height: var(--starasia-ui-textarea-height-sm);
107
- padding-block: var(--starasia-ui-textarea-spacing-xs);
108
- padding-inline: var(--starasia-ui-textarea-spacing-sm);
109
- font-size: var(--starasia-ui-fontSizes-sm, 12px);
110
- border: var(--starasia-ui-textarea-border-width) solid
111
- var(--starasia-ui-textarea-color-tertiary-gray);
112
- 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);
113
65
  }
114
66
  .starasia-textarea-md {
115
- height: var(--starasia-ui-textarea-height-md);
116
- padding-block: var(--starasia-ui-textarea-spacing-sm);
117
- padding-inline: var(--starasia-ui-textarea-spacing-md);
118
- font-size: var(--starasia-ui-fontSizes-md, 14px);
119
- border: var(--starasia-ui-textarea-border-width) solid
120
- var(--starasia-ui-textarea-color-border);
121
- 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);
122
73
  }
123
74
  .starasia-textarea-lg {
124
- height: var(--starasia-ui-textarea-height-lg);
125
- padding-block: var(--starasia-ui-textarea-spacing-md);
126
- padding-inline: var(--starasia-ui-textarea-spacing-md);
127
- font-size: var(var(--starasia-ui-fontSizes-lg, 16px));
128
- border: var(--starasia-ui-textarea-border-width) solid
129
- var(--starasia-ui-textarea-color-tertiary-gray);
130
- 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);
131
81
  }
132
82
 
133
83
  .starasia-textarea:focus {
134
- /* outline-color: var(--starasia-ui-textarea-color-primary-blue); */
84
+ /* outline-color: var(--sa-textarea-border-focused); */
135
85
  outline: none;
136
- border-color: var(--starasia-ui-textarea-color-primary-blue);
137
- 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);
138
88
  }
139
89
 
140
90
  .starasia-textarea:disabled {
141
- border-color: var(--starasia-ui-textarea-color-border);
142
- background-color: var(--starasia-ui-textarea-color-disabled-bg);
143
- /* background-color: var(--starasia-ui-textarea-color-tertiary-gray); */
144
- /* 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);
145
93
  cursor: not-allowed;
146
94
  }
147
95
 
148
96
  .starasia-textarea-warning {
149
- border-color: var(--starasia-ui-textarea-color-warning) !important;
97
+ border-color: var(--sa-textarea-border-warning) !important;
150
98
  /* outline-color: #eab308 !important; */
151
99
  }
152
100
  .starasia-textarea-error {
153
- border-color: var(--starasia-ui-textarea-color-error) !important;
101
+ border-color: var(--sa-textarea-border-error) !important;
154
102
  /* outline-color: #eab308 !important; */
155
103
  }
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"})});
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.4",
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",