@starasia/textarea 2.0.1 → 3.1.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.
- package/dist/Textarea.d.ts +1 -1
- package/dist/textarea.es.js +395 -104
- package/dist/textarea.umd.js +289 -78
- package/dist/types.d.ts +22 -5
- package/package.json +6 -6
package/dist/Textarea.d.ts
CHANGED
package/dist/textarea.es.js
CHANGED
|
@@ -1,134 +1,425 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
|
|
1
|
+
import { jsx as a, jsxs as r } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as J, useState as E, useRef as F, useImperativeHandle as K } from "react";
|
|
3
|
+
const Q = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
|
|
3
4
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
:root {
|
|
6
|
+
/* Layer 3 — references Layer 2 semantic tokens */
|
|
7
|
+
--sa-tx-text-primary: var(--sa-text-primary, #292a2e);
|
|
8
|
+
--sa-tx-text-subtle: var(--sa-text-subtle, #505258);
|
|
9
|
+
--sa-tx-text-subtlest: var(--sa-text-subtlest, #6b6e76);
|
|
10
|
+
--sa-tx-text-error: var(--sa-text-error, #a4133c);
|
|
11
|
+
--sa-tx-text-disable: var(--sa-text-disable, #181a198f);
|
|
12
|
+
|
|
13
|
+
--sa-tx-icon-subtle: var(--sa-icon-subtle, #505258);
|
|
14
|
+
--sa-tx-icon-subtlest: var(--sa-icon-subtlest, #6b6e76);
|
|
15
|
+
--sa-tx-icon-success: var(--sa-icon-success, #208958);
|
|
16
|
+
--sa-tx-icon-disable: var(--sa-icon-disable, #181a198f);
|
|
17
|
+
|
|
18
|
+
--sa-tx-border-subtle: var(--sa-border-subtle, #0b120e24);
|
|
19
|
+
--sa-tx-border-brand: var(--sa-border-focused, #1a4fa0);
|
|
20
|
+
--sa-tx-border-brand-subtle: var(--sa-color-brand-200, #99b3db);
|
|
21
|
+
--sa-tx-border-danger: var(--sa-border-danger, #c9184a);
|
|
22
|
+
--sa-tx-border-danger-subtle: var(--sa-color-error-200, #ffb3c1);
|
|
23
|
+
--sa-tx-border-success: var(--sa-background-success, #28ac6e);
|
|
24
|
+
--sa-tx-border-disabled: var(--sa-border-disabled, #181a198f);
|
|
25
|
+
|
|
26
|
+
--sa-tx-bg-neutral: var(--sa-background-neutral, #f0f1f2);
|
|
27
|
+
--sa-tx-bg-error-subtlest: var(--sa-background-error-subtlest, #fff0f3);
|
|
28
|
+
--sa-tx-bg-success-subtlest: var(--sa-background-success-subtlest, #ecfff6);
|
|
29
|
+
--sa-tx-accent-subtle: var(--sa-background-neutral, #f0f1f2);
|
|
30
|
+
|
|
31
|
+
--sa-tx-text-placeholder: var(--sa-text-subtle, #8c8f97);
|
|
32
|
+
|
|
33
|
+
--sa-tx-radius: var(--sa-radii-sm, 6px);
|
|
34
|
+
--sa-tx-padding-x: var(--sa-spacing-md, 12px);
|
|
35
|
+
--sa-tx-padding-y: var(--sa-spacing-sm, 8px);
|
|
36
|
+
--sa-tx-gap: var(--sa-spacing-sm, 8px);
|
|
9
37
|
}
|
|
10
38
|
|
|
11
|
-
|
|
12
|
-
|
|
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: var(--sa-color-gray-alpha-a20, #78867f33);
|
|
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: var(--sa-color-gray-alpha-a10, #78867f1a);
|
|
21
|
-
--sa-textarea-border-warning: var(--sa-color-warning-400, #ed9f30);
|
|
22
|
-
--sa-textarea-border-error: var(--sa-color-error-500, #ff4d6d);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.starasia-textarea {
|
|
26
|
-
padding: var(--sa-spacing-sm, 8px);
|
|
39
|
+
/* ROOT */
|
|
40
|
+
.sa-tx {
|
|
27
41
|
box-sizing: border-box;
|
|
28
|
-
|
|
29
|
-
|
|
42
|
+
display: flex;
|
|
43
|
+
flex-direction: column;
|
|
44
|
+
align-items: stretch;
|
|
45
|
+
gap: 8px;
|
|
46
|
+
font-family: "Poppins", sans-serif;
|
|
47
|
+
width: max-content;
|
|
30
48
|
}
|
|
31
|
-
.
|
|
32
|
-
|
|
33
|
-
|
|
49
|
+
.sa-tx *,
|
|
50
|
+
.sa-tx *::before,
|
|
51
|
+
.sa-tx *::after {
|
|
52
|
+
box-sizing: border-box;
|
|
34
53
|
}
|
|
35
|
-
.
|
|
36
|
-
|
|
54
|
+
.sa-tx-fullwidth {
|
|
55
|
+
width: 100%;
|
|
37
56
|
}
|
|
38
57
|
|
|
39
|
-
|
|
40
|
-
|
|
58
|
+
/* outside-left layout */
|
|
59
|
+
.sa-tx-label-outside-left {
|
|
60
|
+
flex-direction: row;
|
|
61
|
+
align-items: flex-start;
|
|
62
|
+
gap: 8px;
|
|
63
|
+
}
|
|
64
|
+
.sa-tx-label-outside-left > .sa-tx-label-col {
|
|
65
|
+
width: 40%;
|
|
66
|
+
min-width: 120px;
|
|
67
|
+
display: flex;
|
|
68
|
+
flex-direction: column;
|
|
69
|
+
gap: 8px;
|
|
70
|
+
padding-top: 9.5px;
|
|
71
|
+
}
|
|
72
|
+
.sa-tx-label-outside-left > .sa-tx-input-col {
|
|
73
|
+
flex: 1 1 0;
|
|
74
|
+
min-width: 0;
|
|
75
|
+
display: flex;
|
|
76
|
+
flex-direction: column;
|
|
77
|
+
gap: 8px;
|
|
41
78
|
}
|
|
42
79
|
|
|
43
|
-
|
|
44
|
-
|
|
80
|
+
/* LABEL ROW */
|
|
81
|
+
.sa-tx-label {
|
|
82
|
+
display: flex;
|
|
83
|
+
align-items: center;
|
|
84
|
+
gap: 4px;
|
|
85
|
+
width: 100%;
|
|
86
|
+
color: var(--sa-tx-text-primary);
|
|
87
|
+
font-weight: 500;
|
|
88
|
+
font-size: 14px;
|
|
89
|
+
line-height: normal;
|
|
90
|
+
margin: 0;
|
|
91
|
+
}
|
|
92
|
+
.sa-tx-size-sm .sa-tx-label {
|
|
93
|
+
font-size: 12px;
|
|
94
|
+
}
|
|
95
|
+
.sa-tx-required {
|
|
96
|
+
color: var(--sa-tx-text-error);
|
|
97
|
+
font-weight: 500;
|
|
98
|
+
}
|
|
99
|
+
.sa-tx-optional {
|
|
100
|
+
background: var(--sa-tx-accent-subtle);
|
|
101
|
+
border: 1px solid var(--sa-tx-border-subtle);
|
|
102
|
+
border-radius: 4px;
|
|
103
|
+
padding: 0 8px;
|
|
104
|
+
font-size: 10px;
|
|
105
|
+
font-weight: 500;
|
|
106
|
+
line-height: 18px;
|
|
107
|
+
color: var(--sa-tx-text-primary);
|
|
108
|
+
display: inline-flex;
|
|
109
|
+
align-items: center;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/* DESCRIPTIONS */
|
|
113
|
+
.sa-tx-desc-top,
|
|
114
|
+
.sa-tx-helper,
|
|
115
|
+
.sa-tx-error,
|
|
116
|
+
.sa-tx-counter {
|
|
117
|
+
font-size: 12px;
|
|
118
|
+
line-height: 18px;
|
|
119
|
+
margin: 0;
|
|
120
|
+
font-weight: 400;
|
|
121
|
+
}
|
|
122
|
+
.sa-tx-desc-top,
|
|
123
|
+
.sa-tx-helper,
|
|
124
|
+
.sa-tx-counter {
|
|
125
|
+
color: var(--sa-tx-text-subtlest);
|
|
126
|
+
}
|
|
127
|
+
.sa-tx-error {
|
|
128
|
+
color: var(--sa-tx-text-error);
|
|
129
|
+
}
|
|
130
|
+
.sa-tx-size-sm .sa-tx-desc-top,
|
|
131
|
+
.sa-tx-size-sm .sa-tx-helper,
|
|
132
|
+
.sa-tx-size-sm .sa-tx-error,
|
|
133
|
+
.sa-tx-size-sm .sa-tx-counter {
|
|
134
|
+
font-size: 10px;
|
|
135
|
+
line-height: 15px;
|
|
45
136
|
}
|
|
46
137
|
|
|
47
|
-
|
|
48
|
-
|
|
138
|
+
/* TEXTAREA BOX */
|
|
139
|
+
.sa-tx-box {
|
|
140
|
+
display: flex;
|
|
141
|
+
align-items: stretch;
|
|
142
|
+
gap: var(--sa-tx-gap);
|
|
143
|
+
border-radius: var(--sa-tx-radius);
|
|
144
|
+
position: relative;
|
|
145
|
+
width: 100%;
|
|
146
|
+
background: transparent;
|
|
147
|
+
border: 0.8px solid var(--sa-tx-border-subtle);
|
|
148
|
+
overflow: hidden;
|
|
149
|
+
transition: border-color 120ms ease, box-shadow 120ms ease,
|
|
150
|
+
background-color 120ms ease;
|
|
49
151
|
}
|
|
50
152
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
153
|
+
/* sizes — minimum body height (textarea grows beyond via attr) */
|
|
154
|
+
.sa-tx-size-sm .sa-tx-box { min-height: 80px; }
|
|
155
|
+
.sa-tx-size-md .sa-tx-box { min-height: 96px; }
|
|
156
|
+
.sa-tx-size-lg .sa-tx-box { min-height: 120px; }
|
|
157
|
+
.sa-tx-size-xl .sa-tx-box { min-height: 144px; }
|
|
158
|
+
|
|
159
|
+
/* variants */
|
|
160
|
+
.sa-tx-variant-outline .sa-tx-box {
|
|
161
|
+
background: transparent;
|
|
162
|
+
border: 0.8px solid var(--sa-tx-border-subtle);
|
|
58
163
|
}
|
|
59
|
-
.
|
|
60
|
-
|
|
61
|
-
|
|
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);
|
|
164
|
+
.sa-tx-variant-standard .sa-tx-box {
|
|
165
|
+
background: var(--sa-tx-bg-neutral);
|
|
166
|
+
border: 0.8px solid transparent;
|
|
66
167
|
}
|
|
67
|
-
.
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
border: var(--sa-textarea-border) solid var(--sa-textarea-border-color);
|
|
73
|
-
border-radius: var(--sa-textarea-radius);
|
|
168
|
+
.sa-tx-variant-flushed .sa-tx-box {
|
|
169
|
+
background: transparent;
|
|
170
|
+
border: 0;
|
|
171
|
+
border-bottom: 0.8px solid var(--sa-tx-border-subtle);
|
|
172
|
+
border-radius: 0;
|
|
74
173
|
}
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
border:
|
|
81
|
-
|
|
174
|
+
|
|
175
|
+
/* state: focused */
|
|
176
|
+
.sa-tx-focused.sa-tx-status-default .sa-tx-box,
|
|
177
|
+
.sa-tx-variant-outline.sa-tx-focused.sa-tx-status-default .sa-tx-box {
|
|
178
|
+
border-color: var(--sa-tx-border-brand);
|
|
179
|
+
border-width: 1.2px;
|
|
180
|
+
}
|
|
181
|
+
.sa-tx-variant-flushed.sa-tx-focused.sa-tx-status-default .sa-tx-box {
|
|
182
|
+
border-bottom-color: var(--sa-tx-border-brand);
|
|
183
|
+
border-bottom-width: 1.2px;
|
|
184
|
+
}
|
|
185
|
+
.sa-tx-variant-standard.sa-tx-focused.sa-tx-status-default .sa-tx-box {
|
|
186
|
+
border-color: var(--sa-tx-border-brand);
|
|
187
|
+
border-width: 1.2px;
|
|
82
188
|
}
|
|
83
189
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
border-
|
|
88
|
-
|
|
190
|
+
/* state: error */
|
|
191
|
+
.sa-tx-status-error .sa-tx-box {
|
|
192
|
+
border-color: var(--sa-tx-border-danger);
|
|
193
|
+
border-width: 1.2px;
|
|
194
|
+
}
|
|
195
|
+
.sa-tx-variant-flushed.sa-tx-status-error .sa-tx-box {
|
|
196
|
+
border: 0;
|
|
197
|
+
border-bottom: 1.2px solid var(--sa-tx-border-danger);
|
|
198
|
+
}
|
|
199
|
+
.sa-tx-variant-flushed .sa-tx-box {
|
|
200
|
+
box-shadow: none !important;
|
|
201
|
+
}
|
|
202
|
+
.sa-tx-variant-standard.sa-tx-status-error .sa-tx-box {
|
|
203
|
+
background: var(--sa-tx-bg-error-subtlest);
|
|
204
|
+
}
|
|
205
|
+
.sa-tx-status-error.sa-tx-focused .sa-tx-box {
|
|
206
|
+
box-shadow: 0 0 0 1.2px var(--sa-tx-border-danger-subtle);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
/* state: success */
|
|
210
|
+
.sa-tx-status-success .sa-tx-box {
|
|
211
|
+
border-color: var(--sa-tx-border-success);
|
|
212
|
+
border-width: 1.2px;
|
|
213
|
+
}
|
|
214
|
+
.sa-tx-variant-flushed.sa-tx-status-success .sa-tx-box {
|
|
215
|
+
border: 0;
|
|
216
|
+
border-bottom: 1.2px solid var(--sa-tx-border-success);
|
|
217
|
+
}
|
|
218
|
+
.sa-tx-variant-standard.sa-tx-status-success .sa-tx-box {
|
|
219
|
+
background: var(--sa-tx-bg-success-subtlest);
|
|
89
220
|
}
|
|
90
221
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
222
|
+
/* state: disable */
|
|
223
|
+
.sa-tx-status-disable .sa-tx-box,
|
|
224
|
+
.sa-tx-disabled .sa-tx-box {
|
|
225
|
+
border-color: var(--sa-tx-border-disabled);
|
|
226
|
+
cursor: not-allowed;
|
|
227
|
+
}
|
|
228
|
+
.sa-tx-variant-standard.sa-tx-status-disable .sa-tx-box,
|
|
229
|
+
.sa-tx-variant-standard.sa-tx-disabled .sa-tx-box {
|
|
230
|
+
background: var(--sa-tx-bg-neutral);
|
|
231
|
+
border-color: transparent;
|
|
232
|
+
}
|
|
233
|
+
.sa-tx-status-disable .sa-tx-input,
|
|
234
|
+
.sa-tx-disabled .sa-tx-input {
|
|
235
|
+
color: var(--sa-tx-text-disable);
|
|
94
236
|
cursor: not-allowed;
|
|
95
237
|
}
|
|
96
238
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
239
|
+
/* Field */
|
|
240
|
+
.sa-tx-field-wrap {
|
|
241
|
+
display: flex;
|
|
242
|
+
flex: 1 1 0;
|
|
243
|
+
min-width: 0;
|
|
244
|
+
position: relative;
|
|
245
|
+
padding: var(--sa-tx-padding-y) var(--sa-tx-padding-x);
|
|
100
246
|
}
|
|
101
|
-
.
|
|
102
|
-
|
|
103
|
-
|
|
247
|
+
.sa-tx-input {
|
|
248
|
+
width: 100%;
|
|
249
|
+
border: 0;
|
|
250
|
+
outline: none;
|
|
251
|
+
background: transparent;
|
|
252
|
+
padding: 0;
|
|
253
|
+
margin: 0;
|
|
254
|
+
font-family: inherit;
|
|
255
|
+
font-size: 14px;
|
|
256
|
+
font-weight: 400;
|
|
257
|
+
line-height: 21px;
|
|
258
|
+
color: var(--sa-tx-text-primary);
|
|
259
|
+
resize: vertical;
|
|
260
|
+
display: block;
|
|
261
|
+
min-height: inherit;
|
|
104
262
|
}
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
263
|
+
.sa-tx-size-sm .sa-tx-input {
|
|
264
|
+
font-size: 12px;
|
|
265
|
+
line-height: 18px;
|
|
266
|
+
}
|
|
267
|
+
.sa-tx-input::placeholder {
|
|
268
|
+
color: var(--sa-tx-text-placeholder);
|
|
269
|
+
font-weight: 300;
|
|
270
|
+
opacity: 1;
|
|
271
|
+
}
|
|
272
|
+
.sa-tx-input:disabled {
|
|
273
|
+
color: var(--sa-tx-text-disable);
|
|
274
|
+
cursor: not-allowed;
|
|
275
|
+
-webkit-text-fill-color: var(--sa-tx-text-disable);
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
/* resize variants */
|
|
279
|
+
.sa-tx-resize-vertical .sa-tx-input { resize: vertical; }
|
|
280
|
+
.sa-tx-resize-horizontal .sa-tx-input { resize: horizontal; }
|
|
281
|
+
.sa-tx-resize-both .sa-tx-input { resize: both; }
|
|
282
|
+
.sa-tx-resize-none .sa-tx-input { resize: none; }
|
|
283
|
+
|
|
284
|
+
/* Footer (helper / counter row) */
|
|
285
|
+
.sa-tx-footer {
|
|
286
|
+
display: flex;
|
|
287
|
+
flex-direction: row;
|
|
288
|
+
gap: 8px;
|
|
289
|
+
align-items: flex-start;
|
|
290
|
+
justify-content: space-between;
|
|
291
|
+
width: 100%;
|
|
292
|
+
}
|
|
293
|
+
.sa-tx-footer-text {
|
|
294
|
+
flex: 1 1 0;
|
|
295
|
+
min-width: 0;
|
|
296
|
+
}
|
|
297
|
+
.sa-tx-footer-counter {
|
|
298
|
+
flex-shrink: 0;
|
|
299
|
+
white-space: nowrap;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
/* Autofill — neutralize browser yellow autofill background cross-browser. */
|
|
303
|
+
.sa-tx-input:-webkit-autofill,
|
|
304
|
+
.sa-tx-input:-webkit-autofill:hover,
|
|
305
|
+
.sa-tx-input:-webkit-autofill:focus,
|
|
306
|
+
.sa-tx-input:-webkit-autofill:active {
|
|
307
|
+
-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
|
|
308
|
+
-webkit-text-fill-color: var(--sa-tx-text-primary) !important;
|
|
309
|
+
caret-color: var(--sa-tx-text-primary);
|
|
310
|
+
transition: background-color 9999s ease-in-out 0s,
|
|
311
|
+
color 9999s ease-in-out 0s;
|
|
312
|
+
}
|
|
313
|
+
.sa-tx-input:autofill {
|
|
314
|
+
background-color: transparent !important;
|
|
315
|
+
color: var(--sa-tx-text-primary);
|
|
316
|
+
}
|
|
317
|
+
`, R = "sa-textarea-styles", U = (e) => {
|
|
318
|
+
if (!(typeof document > "u") && !document.getElementById(R)) {
|
|
319
|
+
const o = document.createElement("style");
|
|
320
|
+
o.id = R, o.textContent = e, document.head.appendChild(o);
|
|
109
321
|
}
|
|
110
322
|
};
|
|
111
|
-
|
|
112
|
-
const
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
323
|
+
U(Q);
|
|
324
|
+
const Y = (e) => e ? e === "warning" ? "error" : e : "default", Z = J(
|
|
325
|
+
(e, o) => {
|
|
326
|
+
const {
|
|
327
|
+
size: T = "md",
|
|
328
|
+
variant: $ = "outline",
|
|
329
|
+
status: B,
|
|
330
|
+
label: c,
|
|
331
|
+
labelPosition: h = "outside-top",
|
|
332
|
+
required: I,
|
|
333
|
+
optional: j,
|
|
334
|
+
description: i,
|
|
335
|
+
helperText: u,
|
|
336
|
+
errorText: b,
|
|
337
|
+
resize: L = "vertical",
|
|
338
|
+
showCount: l,
|
|
339
|
+
height: O,
|
|
340
|
+
width: V,
|
|
341
|
+
fullWidth: v = !1,
|
|
342
|
+
className: A,
|
|
343
|
+
style: P,
|
|
344
|
+
...t
|
|
345
|
+
} = e, x = Y(B), m = t.value !== void 0, q = t.value !== void 0 ? String(t.value ?? "") : String(t.defaultValue ?? ""), [D, W] = E(q), [X, g] = E(!1), w = F(null);
|
|
346
|
+
K(
|
|
347
|
+
o,
|
|
348
|
+
() => w.current
|
|
349
|
+
);
|
|
350
|
+
const y = F(
|
|
351
|
+
t.id ?? `sa-tx-${Math.random().toString(36).slice(2, 9)}`
|
|
352
|
+
), p = m ? String(t.value ?? "") : D, d = x === "disable" || t.disabled, H = d ? "disable" : x, z = [
|
|
353
|
+
"sa-tx",
|
|
354
|
+
`sa-tx-variant-${$}`,
|
|
355
|
+
`sa-tx-size-${T}`,
|
|
356
|
+
`sa-tx-status-${H}`,
|
|
357
|
+
`sa-tx-label-${h}`,
|
|
358
|
+
`sa-tx-resize-${L}`,
|
|
359
|
+
X ? "sa-tx-focused" : "",
|
|
360
|
+
d ? "sa-tx-disabled" : "",
|
|
361
|
+
c ? "" : "sa-tx-no-label",
|
|
362
|
+
v ? "sa-tx-fullwidth" : ""
|
|
363
|
+
].filter(Boolean).join(" "), M = (n) => {
|
|
364
|
+
var s;
|
|
365
|
+
m || W(n.target.value), (s = t.onChange) == null || s.call(t, n);
|
|
366
|
+
}, k = (n) => c ? /* @__PURE__ */ r("div", { className: n, children: [
|
|
367
|
+
/* @__PURE__ */ a(
|
|
368
|
+
"label",
|
|
369
|
+
{
|
|
370
|
+
htmlFor: y.current,
|
|
371
|
+
style: { cursor: d ? "not-allowed" : "pointer" },
|
|
372
|
+
children: c
|
|
373
|
+
}
|
|
374
|
+
),
|
|
375
|
+
j ? /* @__PURE__ */ a("span", { className: "sa-tx-optional", children: "Optional" }) : null,
|
|
376
|
+
I ? /* @__PURE__ */ a("span", { className: "sa-tx-required", "aria-hidden": "true", children: "*" }) : null
|
|
377
|
+
] }) : null, N = (typeof l == "number" ? l : void 0) ?? t.maxLength, f = l !== !1 && l !== void 0 ? N !== void 0 ? `${p.length} / ${N}` : `${p.length}` : null, S = u || b && x === "error" || f ? /* @__PURE__ */ r("div", { className: "sa-tx-footer", children: [
|
|
378
|
+
/* @__PURE__ */ a("div", { className: "sa-tx-footer-text", children: b && x === "error" ? /* @__PURE__ */ a("p", { className: "sa-tx-error", children: b }) : u ? /* @__PURE__ */ a("p", { className: "sa-tx-helper", children: u }) : null }),
|
|
379
|
+
f ? /* @__PURE__ */ a("p", { className: "sa-tx-counter sa-tx-footer-counter", children: f }) : null
|
|
380
|
+
] }) : null, G = /* @__PURE__ */ a("div", { className: "sa-tx-field-wrap", children: /* @__PURE__ */ a(
|
|
381
|
+
"textarea",
|
|
382
|
+
{
|
|
383
|
+
...t,
|
|
384
|
+
id: y.current,
|
|
385
|
+
ref: w,
|
|
386
|
+
className: ["sa-tx-input", A].filter(Boolean).join(" "),
|
|
387
|
+
disabled: d,
|
|
388
|
+
value: p,
|
|
389
|
+
style: {
|
|
390
|
+
height: O,
|
|
391
|
+
width: v ? "100%" : V,
|
|
392
|
+
...P
|
|
393
|
+
},
|
|
394
|
+
onFocus: (n) => {
|
|
395
|
+
var s;
|
|
396
|
+
g(!0), (s = t.onFocus) == null || s.call(t, n);
|
|
397
|
+
},
|
|
398
|
+
onBlur: (n) => {
|
|
399
|
+
var s;
|
|
400
|
+
g(!1), (s = t.onBlur) == null || s.call(t, n);
|
|
401
|
+
},
|
|
402
|
+
onChange: M
|
|
403
|
+
}
|
|
404
|
+
) }), C = /* @__PURE__ */ a("div", { className: "sa-tx-box", children: G });
|
|
405
|
+
return h === "outside-left" ? /* @__PURE__ */ r("div", { className: z, children: [
|
|
406
|
+
/* @__PURE__ */ r("div", { className: "sa-tx-label-col", children: [
|
|
407
|
+
k("sa-tx-label"),
|
|
408
|
+
i ? /* @__PURE__ */ a("p", { className: "sa-tx-desc-top", children: i }) : null
|
|
409
|
+
] }),
|
|
410
|
+
/* @__PURE__ */ r("div", { className: "sa-tx-input-col", children: [
|
|
411
|
+
C,
|
|
412
|
+
S
|
|
413
|
+
] })
|
|
414
|
+
] }) : /* @__PURE__ */ r("div", { className: z, children: [
|
|
415
|
+
k("sa-tx-label"),
|
|
416
|
+
i ? /* @__PURE__ */ a("p", { className: "sa-tx-desc-top", children: i }) : null,
|
|
417
|
+
C,
|
|
418
|
+
S
|
|
419
|
+
] });
|
|
420
|
+
}
|
|
421
|
+
);
|
|
422
|
+
Z.displayName = "Textarea";
|
|
132
423
|
export {
|
|
133
|
-
|
|
424
|
+
Z as Textarea
|
|
134
425
|
};
|
package/dist/textarea.umd.js
CHANGED
|
@@ -1,104 +1,315 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(n,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],t):(n=typeof globalThis<"u"?globalThis:n||self,t(n.Textarea={},n.jsxRuntime,n.React))})(this,function(n,t,o){"use strict";const F=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
:root {
|
|
4
|
+
/* Layer 3 — references Layer 2 semantic tokens */
|
|
5
|
+
--sa-tx-text-primary: var(--sa-text-primary, #292a2e);
|
|
6
|
+
--sa-tx-text-subtle: var(--sa-text-subtle, #505258);
|
|
7
|
+
--sa-tx-text-subtlest: var(--sa-text-subtlest, #6b6e76);
|
|
8
|
+
--sa-tx-text-error: var(--sa-text-error, #a4133c);
|
|
9
|
+
--sa-tx-text-disable: var(--sa-text-disable, #181a198f);
|
|
10
|
+
|
|
11
|
+
--sa-tx-icon-subtle: var(--sa-icon-subtle, #505258);
|
|
12
|
+
--sa-tx-icon-subtlest: var(--sa-icon-subtlest, #6b6e76);
|
|
13
|
+
--sa-tx-icon-success: var(--sa-icon-success, #208958);
|
|
14
|
+
--sa-tx-icon-disable: var(--sa-icon-disable, #181a198f);
|
|
15
|
+
|
|
16
|
+
--sa-tx-border-subtle: var(--sa-border-subtle, #0b120e24);
|
|
17
|
+
--sa-tx-border-brand: var(--sa-border-focused, #1a4fa0);
|
|
18
|
+
--sa-tx-border-brand-subtle: var(--sa-color-brand-200, #99b3db);
|
|
19
|
+
--sa-tx-border-danger: var(--sa-border-danger, #c9184a);
|
|
20
|
+
--sa-tx-border-danger-subtle: var(--sa-color-error-200, #ffb3c1);
|
|
21
|
+
--sa-tx-border-success: var(--sa-background-success, #28ac6e);
|
|
22
|
+
--sa-tx-border-disabled: var(--sa-border-disabled, #181a198f);
|
|
23
|
+
|
|
24
|
+
--sa-tx-bg-neutral: var(--sa-background-neutral, #f0f1f2);
|
|
25
|
+
--sa-tx-bg-error-subtlest: var(--sa-background-error-subtlest, #fff0f3);
|
|
26
|
+
--sa-tx-bg-success-subtlest: var(--sa-background-success-subtlest, #ecfff6);
|
|
27
|
+
--sa-tx-accent-subtle: var(--sa-background-neutral, #f0f1f2);
|
|
28
|
+
|
|
29
|
+
--sa-tx-text-placeholder: var(--sa-text-subtle, #8c8f97);
|
|
30
|
+
|
|
31
|
+
--sa-tx-radius: var(--sa-radii-sm, 6px);
|
|
32
|
+
--sa-tx-padding-x: var(--sa-spacing-md, 12px);
|
|
33
|
+
--sa-tx-padding-y: var(--sa-spacing-sm, 8px);
|
|
34
|
+
--sa-tx-gap: var(--sa-spacing-sm, 8px);
|
|
8
35
|
}
|
|
9
36
|
|
|
10
|
-
|
|
11
|
-
|
|
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: var(--sa-color-gray-alpha-a20, #78867f33);
|
|
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: var(--sa-color-gray-alpha-a10, #78867f1a);
|
|
20
|
-
--sa-textarea-border-warning: var(--sa-color-warning-400, #ed9f30);
|
|
21
|
-
--sa-textarea-border-error: var(--sa-color-error-500, #ff4d6d);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.starasia-textarea {
|
|
25
|
-
padding: var(--sa-spacing-sm, 8px);
|
|
37
|
+
/* ROOT */
|
|
38
|
+
.sa-tx {
|
|
26
39
|
box-sizing: border-box;
|
|
27
|
-
|
|
28
|
-
|
|
40
|
+
display: flex;
|
|
41
|
+
flex-direction: column;
|
|
42
|
+
align-items: stretch;
|
|
43
|
+
gap: 8px;
|
|
44
|
+
font-family: "Poppins", sans-serif;
|
|
45
|
+
width: max-content;
|
|
29
46
|
}
|
|
30
|
-
.
|
|
31
|
-
|
|
32
|
-
|
|
47
|
+
.sa-tx *,
|
|
48
|
+
.sa-tx *::before,
|
|
49
|
+
.sa-tx *::after {
|
|
50
|
+
box-sizing: border-box;
|
|
33
51
|
}
|
|
34
|
-
.
|
|
35
|
-
|
|
52
|
+
.sa-tx-fullwidth {
|
|
53
|
+
width: 100%;
|
|
36
54
|
}
|
|
37
55
|
|
|
38
|
-
|
|
39
|
-
|
|
56
|
+
/* outside-left layout */
|
|
57
|
+
.sa-tx-label-outside-left {
|
|
58
|
+
flex-direction: row;
|
|
59
|
+
align-items: flex-start;
|
|
60
|
+
gap: 8px;
|
|
61
|
+
}
|
|
62
|
+
.sa-tx-label-outside-left > .sa-tx-label-col {
|
|
63
|
+
width: 40%;
|
|
64
|
+
min-width: 120px;
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-direction: column;
|
|
67
|
+
gap: 8px;
|
|
68
|
+
padding-top: 9.5px;
|
|
69
|
+
}
|
|
70
|
+
.sa-tx-label-outside-left > .sa-tx-input-col {
|
|
71
|
+
flex: 1 1 0;
|
|
72
|
+
min-width: 0;
|
|
73
|
+
display: flex;
|
|
74
|
+
flex-direction: column;
|
|
75
|
+
gap: 8px;
|
|
40
76
|
}
|
|
41
77
|
|
|
42
|
-
|
|
43
|
-
|
|
78
|
+
/* LABEL ROW */
|
|
79
|
+
.sa-tx-label {
|
|
80
|
+
display: flex;
|
|
81
|
+
align-items: center;
|
|
82
|
+
gap: 4px;
|
|
83
|
+
width: 100%;
|
|
84
|
+
color: var(--sa-tx-text-primary);
|
|
85
|
+
font-weight: 500;
|
|
86
|
+
font-size: 14px;
|
|
87
|
+
line-height: normal;
|
|
88
|
+
margin: 0;
|
|
89
|
+
}
|
|
90
|
+
.sa-tx-size-sm .sa-tx-label {
|
|
91
|
+
font-size: 12px;
|
|
92
|
+
}
|
|
93
|
+
.sa-tx-required {
|
|
94
|
+
color: var(--sa-tx-text-error);
|
|
95
|
+
font-weight: 500;
|
|
96
|
+
}
|
|
97
|
+
.sa-tx-optional {
|
|
98
|
+
background: var(--sa-tx-accent-subtle);
|
|
99
|
+
border: 1px solid var(--sa-tx-border-subtle);
|
|
100
|
+
border-radius: 4px;
|
|
101
|
+
padding: 0 8px;
|
|
102
|
+
font-size: 10px;
|
|
103
|
+
font-weight: 500;
|
|
104
|
+
line-height: 18px;
|
|
105
|
+
color: var(--sa-tx-text-primary);
|
|
106
|
+
display: inline-flex;
|
|
107
|
+
align-items: center;
|
|
44
108
|
}
|
|
45
109
|
|
|
46
|
-
|
|
47
|
-
|
|
110
|
+
/* DESCRIPTIONS */
|
|
111
|
+
.sa-tx-desc-top,
|
|
112
|
+
.sa-tx-helper,
|
|
113
|
+
.sa-tx-error,
|
|
114
|
+
.sa-tx-counter {
|
|
115
|
+
font-size: 12px;
|
|
116
|
+
line-height: 18px;
|
|
117
|
+
margin: 0;
|
|
118
|
+
font-weight: 400;
|
|
119
|
+
}
|
|
120
|
+
.sa-tx-desc-top,
|
|
121
|
+
.sa-tx-helper,
|
|
122
|
+
.sa-tx-counter {
|
|
123
|
+
color: var(--sa-tx-text-subtlest);
|
|
124
|
+
}
|
|
125
|
+
.sa-tx-error {
|
|
126
|
+
color: var(--sa-tx-text-error);
|
|
127
|
+
}
|
|
128
|
+
.sa-tx-size-sm .sa-tx-desc-top,
|
|
129
|
+
.sa-tx-size-sm .sa-tx-helper,
|
|
130
|
+
.sa-tx-size-sm .sa-tx-error,
|
|
131
|
+
.sa-tx-size-sm .sa-tx-counter {
|
|
132
|
+
font-size: 10px;
|
|
133
|
+
line-height: 15px;
|
|
48
134
|
}
|
|
49
135
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
border: var(--sa-
|
|
56
|
-
|
|
136
|
+
/* TEXTAREA BOX */
|
|
137
|
+
.sa-tx-box {
|
|
138
|
+
display: flex;
|
|
139
|
+
align-items: stretch;
|
|
140
|
+
gap: var(--sa-tx-gap);
|
|
141
|
+
border-radius: var(--sa-tx-radius);
|
|
142
|
+
position: relative;
|
|
143
|
+
width: 100%;
|
|
144
|
+
background: transparent;
|
|
145
|
+
border: 0.8px solid var(--sa-tx-border-subtle);
|
|
146
|
+
overflow: hidden;
|
|
147
|
+
transition: border-color 120ms ease, box-shadow 120ms ease,
|
|
148
|
+
background-color 120ms ease;
|
|
57
149
|
}
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
150
|
+
|
|
151
|
+
/* sizes — minimum body height (textarea grows beyond via attr) */
|
|
152
|
+
.sa-tx-size-sm .sa-tx-box { min-height: 80px; }
|
|
153
|
+
.sa-tx-size-md .sa-tx-box { min-height: 96px; }
|
|
154
|
+
.sa-tx-size-lg .sa-tx-box { min-height: 120px; }
|
|
155
|
+
.sa-tx-size-xl .sa-tx-box { min-height: 144px; }
|
|
156
|
+
|
|
157
|
+
/* variants */
|
|
158
|
+
.sa-tx-variant-outline .sa-tx-box {
|
|
159
|
+
background: transparent;
|
|
160
|
+
border: 0.8px solid var(--sa-tx-border-subtle);
|
|
65
161
|
}
|
|
66
|
-
.
|
|
67
|
-
|
|
68
|
-
|
|
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);
|
|
162
|
+
.sa-tx-variant-standard .sa-tx-box {
|
|
163
|
+
background: var(--sa-tx-bg-neutral);
|
|
164
|
+
border: 0.8px solid transparent;
|
|
73
165
|
}
|
|
74
|
-
.
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
border: var(--sa-textarea-border) solid var(--sa-textarea-border-color);
|
|
80
|
-
border-radius: var(--sa-textarea-radius);
|
|
166
|
+
.sa-tx-variant-flushed .sa-tx-box {
|
|
167
|
+
background: transparent;
|
|
168
|
+
border: 0;
|
|
169
|
+
border-bottom: 0.8px solid var(--sa-tx-border-subtle);
|
|
170
|
+
border-radius: 0;
|
|
81
171
|
}
|
|
82
172
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
border-color: var(--sa-
|
|
87
|
-
|
|
173
|
+
/* state: focused */
|
|
174
|
+
.sa-tx-focused.sa-tx-status-default .sa-tx-box,
|
|
175
|
+
.sa-tx-variant-outline.sa-tx-focused.sa-tx-status-default .sa-tx-box {
|
|
176
|
+
border-color: var(--sa-tx-border-brand);
|
|
177
|
+
border-width: 1.2px;
|
|
178
|
+
}
|
|
179
|
+
.sa-tx-variant-flushed.sa-tx-focused.sa-tx-status-default .sa-tx-box {
|
|
180
|
+
border-bottom-color: var(--sa-tx-border-brand);
|
|
181
|
+
border-bottom-width: 1.2px;
|
|
182
|
+
}
|
|
183
|
+
.sa-tx-variant-standard.sa-tx-focused.sa-tx-status-default .sa-tx-box {
|
|
184
|
+
border-color: var(--sa-tx-border-brand);
|
|
185
|
+
border-width: 1.2px;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/* state: error */
|
|
189
|
+
.sa-tx-status-error .sa-tx-box {
|
|
190
|
+
border-color: var(--sa-tx-border-danger);
|
|
191
|
+
border-width: 1.2px;
|
|
192
|
+
}
|
|
193
|
+
.sa-tx-variant-flushed.sa-tx-status-error .sa-tx-box {
|
|
194
|
+
border: 0;
|
|
195
|
+
border-bottom: 1.2px solid var(--sa-tx-border-danger);
|
|
196
|
+
}
|
|
197
|
+
.sa-tx-variant-flushed .sa-tx-box {
|
|
198
|
+
box-shadow: none !important;
|
|
199
|
+
}
|
|
200
|
+
.sa-tx-variant-standard.sa-tx-status-error .sa-tx-box {
|
|
201
|
+
background: var(--sa-tx-bg-error-subtlest);
|
|
202
|
+
}
|
|
203
|
+
.sa-tx-status-error.sa-tx-focused .sa-tx-box {
|
|
204
|
+
box-shadow: 0 0 0 1.2px var(--sa-tx-border-danger-subtle);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
/* state: success */
|
|
208
|
+
.sa-tx-status-success .sa-tx-box {
|
|
209
|
+
border-color: var(--sa-tx-border-success);
|
|
210
|
+
border-width: 1.2px;
|
|
211
|
+
}
|
|
212
|
+
.sa-tx-variant-flushed.sa-tx-status-success .sa-tx-box {
|
|
213
|
+
border: 0;
|
|
214
|
+
border-bottom: 1.2px solid var(--sa-tx-border-success);
|
|
215
|
+
}
|
|
216
|
+
.sa-tx-variant-standard.sa-tx-status-success .sa-tx-box {
|
|
217
|
+
background: var(--sa-tx-bg-success-subtlest);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
/* state: disable */
|
|
221
|
+
.sa-tx-status-disable .sa-tx-box,
|
|
222
|
+
.sa-tx-disabled .sa-tx-box {
|
|
223
|
+
border-color: var(--sa-tx-border-disabled);
|
|
224
|
+
cursor: not-allowed;
|
|
225
|
+
}
|
|
226
|
+
.sa-tx-variant-standard.sa-tx-status-disable .sa-tx-box,
|
|
227
|
+
.sa-tx-variant-standard.sa-tx-disabled .sa-tx-box {
|
|
228
|
+
background: var(--sa-tx-bg-neutral);
|
|
229
|
+
border-color: transparent;
|
|
230
|
+
}
|
|
231
|
+
.sa-tx-status-disable .sa-tx-input,
|
|
232
|
+
.sa-tx-disabled .sa-tx-input {
|
|
233
|
+
color: var(--sa-tx-text-disable);
|
|
234
|
+
cursor: not-allowed;
|
|
88
235
|
}
|
|
89
236
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
237
|
+
/* Field */
|
|
238
|
+
.sa-tx-field-wrap {
|
|
239
|
+
display: flex;
|
|
240
|
+
flex: 1 1 0;
|
|
241
|
+
min-width: 0;
|
|
242
|
+
position: relative;
|
|
243
|
+
padding: var(--sa-tx-padding-y) var(--sa-tx-padding-x);
|
|
244
|
+
}
|
|
245
|
+
.sa-tx-input {
|
|
246
|
+
width: 100%;
|
|
247
|
+
border: 0;
|
|
248
|
+
outline: none;
|
|
249
|
+
background: transparent;
|
|
250
|
+
padding: 0;
|
|
251
|
+
margin: 0;
|
|
252
|
+
font-family: inherit;
|
|
253
|
+
font-size: 14px;
|
|
254
|
+
font-weight: 400;
|
|
255
|
+
line-height: 21px;
|
|
256
|
+
color: var(--sa-tx-text-primary);
|
|
257
|
+
resize: vertical;
|
|
258
|
+
display: block;
|
|
259
|
+
min-height: inherit;
|
|
260
|
+
}
|
|
261
|
+
.sa-tx-size-sm .sa-tx-input {
|
|
262
|
+
font-size: 12px;
|
|
263
|
+
line-height: 18px;
|
|
264
|
+
}
|
|
265
|
+
.sa-tx-input::placeholder {
|
|
266
|
+
color: var(--sa-tx-text-placeholder);
|
|
267
|
+
font-weight: 300;
|
|
268
|
+
opacity: 1;
|
|
269
|
+
}
|
|
270
|
+
.sa-tx-input:disabled {
|
|
271
|
+
color: var(--sa-tx-text-disable);
|
|
93
272
|
cursor: not-allowed;
|
|
273
|
+
-webkit-text-fill-color: var(--sa-tx-text-disable);
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
/* resize variants */
|
|
277
|
+
.sa-tx-resize-vertical .sa-tx-input { resize: vertical; }
|
|
278
|
+
.sa-tx-resize-horizontal .sa-tx-input { resize: horizontal; }
|
|
279
|
+
.sa-tx-resize-both .sa-tx-input { resize: both; }
|
|
280
|
+
.sa-tx-resize-none .sa-tx-input { resize: none; }
|
|
281
|
+
|
|
282
|
+
/* Footer (helper / counter row) */
|
|
283
|
+
.sa-tx-footer {
|
|
284
|
+
display: flex;
|
|
285
|
+
flex-direction: row;
|
|
286
|
+
gap: 8px;
|
|
287
|
+
align-items: flex-start;
|
|
288
|
+
justify-content: space-between;
|
|
289
|
+
width: 100%;
|
|
290
|
+
}
|
|
291
|
+
.sa-tx-footer-text {
|
|
292
|
+
flex: 1 1 0;
|
|
293
|
+
min-width: 0;
|
|
294
|
+
}
|
|
295
|
+
.sa-tx-footer-counter {
|
|
296
|
+
flex-shrink: 0;
|
|
297
|
+
white-space: nowrap;
|
|
94
298
|
}
|
|
95
299
|
|
|
96
|
-
.
|
|
97
|
-
|
|
98
|
-
|
|
300
|
+
/* Autofill — neutralize browser yellow autofill background cross-browser. */
|
|
301
|
+
.sa-tx-input:-webkit-autofill,
|
|
302
|
+
.sa-tx-input:-webkit-autofill:hover,
|
|
303
|
+
.sa-tx-input:-webkit-autofill:focus,
|
|
304
|
+
.sa-tx-input:-webkit-autofill:active {
|
|
305
|
+
-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
|
|
306
|
+
-webkit-text-fill-color: var(--sa-tx-text-primary) !important;
|
|
307
|
+
caret-color: var(--sa-tx-text-primary);
|
|
308
|
+
transition: background-color 9999s ease-in-out 0s,
|
|
309
|
+
color 9999s ease-in-out 0s;
|
|
99
310
|
}
|
|
100
|
-
.
|
|
101
|
-
|
|
102
|
-
|
|
311
|
+
.sa-tx-input:autofill {
|
|
312
|
+
background-color: transparent !important;
|
|
313
|
+
color: var(--sa-tx-text-primary);
|
|
103
314
|
}
|
|
104
|
-
`,
|
|
315
|
+
`,v="sa-textarea-styles";(r=>{if(!(typeof document>"u")&&!document.getElementById(v)){const i=document.createElement("style");i.id=v,i.textContent=r,document.head.appendChild(i)}})(F);const $=r=>r?r==="warning"?"error":r:"default",g=o.forwardRef((r,i)=>{const{size:B="md",variant:I="outline",status:O,label:u,labelPosition:m="outside-top",required:L,optional:q,description:l,helperText:b,errorText:p,resize:P="vertical",showCount:x,height:V,width:A,fullWidth:w=!1,className:D,style:M,...a}=r,d=$(O),y=a.value!==void 0,W=a.value!==void 0?String(a.value??""):String(a.defaultValue??""),[X,H]=o.useState(W),[G,z]=o.useState(!1),k=o.useRef(null);o.useImperativeHandle(i,()=>k.current);const N=o.useRef(a.id??`sa-tx-${Math.random().toString(36).slice(2,9)}`),f=y?String(a.value??""):X,c=d==="disable"||a.disabled,J=c?"disable":d,S=["sa-tx",`sa-tx-variant-${I}`,`sa-tx-size-${B}`,`sa-tx-status-${J}`,`sa-tx-label-${m}`,`sa-tx-resize-${P}`,G?"sa-tx-focused":"",c?"sa-tx-disabled":"",u?"":"sa-tx-no-label",w?"sa-tx-fullwidth":""].filter(Boolean).join(" "),K=s=>{var e;y||H(s.target.value),(e=a.onChange)==null||e.call(a,s)},T=s=>u?t.jsxs("div",{className:s,children:[t.jsx("label",{htmlFor:N.current,style:{cursor:c?"not-allowed":"pointer"},children:u}),q?t.jsx("span",{className:"sa-tx-optional",children:"Optional"}):null,L?t.jsx("span",{className:"sa-tx-required","aria-hidden":"true",children:"*"}):null]}):null,j=(typeof x=="number"?x:void 0)??a.maxLength,h=x!==!1&&x!==void 0?j!==void 0?`${f.length} / ${j}`:`${f.length}`:null,C=b||p&&d==="error"||h?t.jsxs("div",{className:"sa-tx-footer",children:[t.jsx("div",{className:"sa-tx-footer-text",children:p&&d==="error"?t.jsx("p",{className:"sa-tx-error",children:p}):b?t.jsx("p",{className:"sa-tx-helper",children:b}):null}),h?t.jsx("p",{className:"sa-tx-counter sa-tx-footer-counter",children:h}):null]}):null,Q=t.jsx("div",{className:"sa-tx-field-wrap",children:t.jsx("textarea",{...a,id:N.current,ref:k,className:["sa-tx-input",D].filter(Boolean).join(" "),disabled:c,value:f,style:{height:V,width:w?"100%":A,...M},onFocus:s=>{var e;z(!0),(e=a.onFocus)==null||e.call(a,s)},onBlur:s=>{var e;z(!1),(e=a.onBlur)==null||e.call(a,s)},onChange:K})}),E=t.jsx("div",{className:"sa-tx-box",children:Q});return m==="outside-left"?t.jsxs("div",{className:S,children:[t.jsxs("div",{className:"sa-tx-label-col",children:[T("sa-tx-label"),l?t.jsx("p",{className:"sa-tx-desc-top",children:l}):null]}),t.jsxs("div",{className:"sa-tx-input-col",children:[E,C]})]}):t.jsxs("div",{className:S,children:[T("sa-tx-label"),l?t.jsx("p",{className:"sa-tx-desc-top",children:l}):null,E,C]})});g.displayName="Textarea",n.Textarea=g,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
|
package/dist/types.d.ts
CHANGED
|
@@ -1,9 +1,26 @@
|
|
|
1
|
-
import { CSSProperties } from "react";
|
|
2
|
-
export
|
|
3
|
-
|
|
1
|
+
import { CSSProperties, ReactNode } from "react";
|
|
2
|
+
export type TextareaSize = "sm" | "md" | "lg" | "xl";
|
|
3
|
+
export type TextareaVariant = "standard" | "outline" | "flushed";
|
|
4
|
+
export type TextareaStatus = "default" | "error" | "success" | "disable";
|
|
5
|
+
export type TextareaLabelPosition = "outside-top" | "outside-left";
|
|
6
|
+
export type TextareaResize = "vertical" | "horizontal" | "both" | "none";
|
|
7
|
+
export type LegacyTextareaStatus = "warning";
|
|
8
|
+
export interface TextareaProps extends Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "size"> {
|
|
9
|
+
size?: TextareaSize;
|
|
10
|
+
variant?: TextareaVariant;
|
|
11
|
+
status?: TextareaStatus | LegacyTextareaStatus;
|
|
12
|
+
label?: ReactNode;
|
|
13
|
+
labelPosition?: TextareaLabelPosition;
|
|
14
|
+
required?: boolean;
|
|
15
|
+
optional?: boolean;
|
|
16
|
+
description?: string;
|
|
17
|
+
helperText?: string;
|
|
18
|
+
errorText?: string;
|
|
19
|
+
resize?: TextareaResize;
|
|
20
|
+
/** Show "n / max" word counter. Reads `maxLength` automatically; pass a
|
|
21
|
+
* number to override the limit, or `false` to hide. */
|
|
22
|
+
showCount?: boolean | number;
|
|
4
23
|
height?: CSSProperties["height"];
|
|
5
24
|
width?: CSSProperties["width"];
|
|
6
|
-
size?: "xs" | "sm" | "md" | "lg";
|
|
7
|
-
status?: "error" | "warning" | "disable" | "default";
|
|
8
25
|
fullWidth?: boolean;
|
|
9
26
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@starasia/textarea",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.1.0",
|
|
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
|
+
}
|