@starasia/input 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/input.es.js +58 -49
- package/dist/input.umd.js +43 -34
- package/package.json +1 -1
package/dist/input.es.js
CHANGED
|
@@ -17,73 +17,73 @@ const G = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
17
17
|
|
|
18
18
|
/* color */
|
|
19
19
|
/* brand */
|
|
20
|
-
--starasia-ui-input-color-primary-blue: var(--starasia-ui-brand-primary-default);
|
|
21
|
-
--starasia-ui-input-color-secondary-blue: var(--starasia-ui-brand-primary-default);
|
|
22
|
-
--starasia-ui-input-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary);
|
|
23
|
-
--starasia-ui-input-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary);
|
|
24
|
-
--starasia-ui-input-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary);
|
|
20
|
+
--starasia-ui-input-color-primary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
21
|
+
--starasia-ui-input-color-secondary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
22
|
+
--starasia-ui-input-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary, rgba(144, 176, 218, 1));
|
|
23
|
+
--starasia-ui-input-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
|
|
24
|
+
--starasia-ui-input-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
|
|
25
25
|
/* gray */
|
|
26
26
|
--starasia-ui-input-color-primary-gray: var(
|
|
27
27
|
--starasia-ui-color-gray-700,
|
|
28
|
-
|
|
28
|
+
rgba(72, 80, 76, 1)
|
|
29
29
|
);
|
|
30
30
|
--starasia-ui-input-color-secondary-gray: var(
|
|
31
31
|
--starasia-ui-color-gray-500,
|
|
32
|
-
|
|
32
|
+
rgba(120, 134, 127, 1)
|
|
33
33
|
);
|
|
34
34
|
--starasia-ui-input-color-tertiary-gray: var(
|
|
35
35
|
--starasia-ui-color-gray-300,
|
|
36
|
-
|
|
36
|
+
rgba(174, 182, 178, 1)
|
|
37
37
|
);
|
|
38
38
|
--starasia-ui-input-color-quaternary-gray: var(
|
|
39
39
|
--starasia-ui-color-gray-100,
|
|
40
|
-
|
|
40
|
+
rgba(239, 243, 248, 1)
|
|
41
41
|
);
|
|
42
42
|
--starasia-ui-input-color-quinary-gray: var(
|
|
43
43
|
--starasia-ui-color-gray-50,
|
|
44
|
-
|
|
44
|
+
rgba(255, 254, 255, 1)
|
|
45
45
|
);
|
|
46
46
|
/* red */
|
|
47
47
|
--starasia-ui-input-color-primary-red: var(
|
|
48
48
|
--starasia-ui-color-red-700,
|
|
49
|
-
|
|
49
|
+
rgba(164, 19, 60, 1)
|
|
50
50
|
);
|
|
51
51
|
--starasia-ui-input-color-secondary-red: var(
|
|
52
52
|
--starasia-ui-color-red-500,
|
|
53
|
-
|
|
53
|
+
rgba(255, 77, 109, 1)
|
|
54
54
|
);
|
|
55
55
|
--starasia-ui-input-color-tertiary-red: var(
|
|
56
56
|
--starasia-ui-color-red-300,
|
|
57
|
-
|
|
57
|
+
rgba(255, 143, 163, 1)
|
|
58
58
|
);
|
|
59
59
|
--starasia-ui-input-color-quaternary-red: var(
|
|
60
60
|
--starasia-ui-color-red-100,
|
|
61
|
-
|
|
61
|
+
rgba(255, 204, 213, 1)
|
|
62
62
|
);
|
|
63
63
|
--starasia-ui-input-color-quinary-red: var(
|
|
64
64
|
--starasia-ui-color-red-50,
|
|
65
|
-
|
|
65
|
+
rgba(255, 240, 243, 1)
|
|
66
66
|
);
|
|
67
67
|
/* orange */
|
|
68
68
|
--starasia-ui-input-color-primary-orange: var(
|
|
69
69
|
--starasia-ui-color-orange-700,
|
|
70
|
-
|
|
70
|
+
rgba(152, 104, 0, 1)
|
|
71
71
|
);
|
|
72
72
|
--starasia-ui-input-color-secondary-orange: var(
|
|
73
73
|
--starasia-ui-color-orange-500,
|
|
74
|
-
|
|
74
|
+
rgba(210, 160, 58, 1)
|
|
75
75
|
);
|
|
76
76
|
--starasia-ui-input-color-tertiary-orange: var(
|
|
77
77
|
--starasia-ui-color-orange-300,
|
|
78
|
-
|
|
78
|
+
rgba(255, 203, 105, 1)
|
|
79
79
|
);
|
|
80
80
|
--starasia-ui-input-color-quaternary-orange: var(
|
|
81
81
|
--starasia-ui-color-orange-100,
|
|
82
|
-
|
|
82
|
+
rgba(255, 245, 193, 1)
|
|
83
83
|
);
|
|
84
84
|
--starasia-ui-input-color-quinary-orange: var(
|
|
85
85
|
--starasia-ui-color-orange-50,
|
|
86
|
-
|
|
86
|
+
rgba(250, 246, 224, 1)
|
|
87
87
|
);
|
|
88
88
|
|
|
89
89
|
/* text color */
|
|
@@ -96,6 +96,15 @@ const G = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
96
96
|
/* border color */
|
|
97
97
|
--starasia-ui-color-border: rgba(120, 134, 127, 0.2);
|
|
98
98
|
|
|
99
|
+
/* disabled */
|
|
100
|
+
--starasia-ui-input-color-disabled-bg: rgba(242, 243, 242, 1);
|
|
101
|
+
--starasia-ui-input-color-disabled-text: rgba(147, 158, 153, 1);
|
|
102
|
+
--starasia-ui-input-color-addons-bg: rgba(120, 134, 127, 0.1);
|
|
103
|
+
--starasia-ui-input-color-addons-bg-disabled: rgba(120, 134, 127, 0.3);
|
|
104
|
+
|
|
105
|
+
/* white */
|
|
106
|
+
--starasia-ui-input-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
|
|
107
|
+
|
|
99
108
|
/* height */
|
|
100
109
|
--starasia-ui-input-height-sm: var(--starasia-ui-h-8, 32px);
|
|
101
110
|
/* --starasia-ui-input-height-md: var(--starasia-ui-h-10, 40px); */
|
|
@@ -109,7 +118,7 @@ const G = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
109
118
|
|
|
110
119
|
--starasia-ui-input-placeholder-color: var(
|
|
111
120
|
--starasia-ui-color-gray-200,
|
|
112
|
-
|
|
121
|
+
rgba(201, 206, 204, 1)
|
|
113
122
|
);
|
|
114
123
|
}
|
|
115
124
|
|
|
@@ -128,25 +137,25 @@ const G = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
128
137
|
|
|
129
138
|
.starasia-input-container:has(input:disabled)
|
|
130
139
|
.starasia-input-container-icon-left {
|
|
131
|
-
background-color:
|
|
140
|
+
background-color: var(--starasia-ui-input-color-disabled-bg);
|
|
132
141
|
}
|
|
133
142
|
|
|
134
143
|
.starasia-input-container:has(input:disabled)
|
|
135
144
|
.starasia-input-container-icon-right {
|
|
136
|
-
background-color:
|
|
145
|
+
background-color: var(--starasia-ui-input-color-disabled-bg);
|
|
137
146
|
}
|
|
138
147
|
|
|
139
148
|
.starasia-input-container:has(input:disabled) {
|
|
140
149
|
/* border-color: var(--starasia-ui-input-color-tertiary-gray); */
|
|
141
150
|
/* background-color: var(--starasia-ui-input-color-tertiary-gray); */
|
|
142
|
-
border-color:
|
|
143
|
-
background-color:
|
|
151
|
+
border-color: var(--starasia-ui-color-border);
|
|
152
|
+
background-color: var(--starasia-ui-input-color-disabled-bg);
|
|
144
153
|
}
|
|
145
154
|
|
|
146
155
|
.starasia-input-container:has(input:disabled) input {
|
|
147
|
-
color:
|
|
148
|
-
border-color:
|
|
149
|
-
background-color:
|
|
156
|
+
color: var(--starasia-ui-input-color-disabled-text) !important;
|
|
157
|
+
border-color: var(--starasia-ui-color-border);
|
|
158
|
+
background-color: var(--starasia-ui-input-color-disabled-bg);
|
|
150
159
|
}
|
|
151
160
|
|
|
152
161
|
.starasia-input-outline.starasia-input-container-error {
|
|
@@ -287,7 +296,7 @@ const G = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
287
296
|
|
|
288
297
|
/* INPUT ADDONS */
|
|
289
298
|
.starasia-input-container-addons-left {
|
|
290
|
-
background-color:
|
|
299
|
+
background-color: var(--starasia-ui-input-color-addons-bg);
|
|
291
300
|
height: 100%;
|
|
292
301
|
display: flex;
|
|
293
302
|
padding-inline: var(--starasia-ui-input-spacing-ms);
|
|
@@ -299,7 +308,7 @@ const G = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
299
308
|
}
|
|
300
309
|
|
|
301
310
|
.starasia-input-container-addons-right {
|
|
302
|
-
background-color:
|
|
311
|
+
background-color: var(--starasia-ui-input-color-addons-bg);
|
|
303
312
|
height: 100%;
|
|
304
313
|
display: flex;
|
|
305
314
|
padding-inline: var(--starasia-ui-input-spacing-ms);
|
|
@@ -312,12 +321,12 @@ const G = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
312
321
|
|
|
313
322
|
.starasia-input-container:has(input:disabled)
|
|
314
323
|
.starasia-input-container-addons-right {
|
|
315
|
-
background-color:
|
|
324
|
+
background-color: var(--starasia-ui-input-color-addons-bg-disabled) !important;
|
|
316
325
|
}
|
|
317
326
|
|
|
318
327
|
.starasia-input-container:has(input:disabled)
|
|
319
328
|
.starasia-input-container-addons-left {
|
|
320
|
-
background-color:
|
|
329
|
+
background-color: var(--starasia-ui-input-color-addons-bg-disabled) !important;
|
|
321
330
|
}
|
|
322
331
|
|
|
323
332
|
.starasia-input::placeholder {
|
|
@@ -335,8 +344,8 @@ const G = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
335
344
|
({ options: a, value: n, setValue: s, isComponentVisible: o, onOptionChange: e }, i) => {
|
|
336
345
|
const [k, V] = w([]), u = A(null), g = () => {
|
|
337
346
|
if (i != null && i.current && u.current) {
|
|
338
|
-
const h = window.innerHeight,
|
|
339
|
-
u.current.style.left = `${
|
|
347
|
+
const h = window.innerHeight, b = i == null ? void 0 : i.current.getBoundingClientRect(), C = u.current.getBoundingClientRect(), m = b.bottom + C.height;
|
|
348
|
+
u.current.style.left = `${b.left}px`, u.current.style.width = `${b.width}px`, m >= h - 10 ? u.current.style.top = `${b.top - C.height - 5}px` : u.current.style.top = `${b.top + b.height}px`;
|
|
340
349
|
}
|
|
341
350
|
};
|
|
342
351
|
return x(() => (window.addEventListener("scroll", g), window.addEventListener("resize", g), () => {
|
|
@@ -425,7 +434,7 @@ const z = (a) => {
|
|
|
425
434
|
leftAddons: u,
|
|
426
435
|
rightAddons: g,
|
|
427
436
|
onClickLeftIcon: h,
|
|
428
|
-
onClickRightIcon:
|
|
437
|
+
onClickRightIcon: b,
|
|
429
438
|
highlightPlaceholder: C,
|
|
430
439
|
currency: m,
|
|
431
440
|
fullWidth: O = !1,
|
|
@@ -434,7 +443,7 @@ const z = (a) => {
|
|
|
434
443
|
...r
|
|
435
444
|
} = a;
|
|
436
445
|
{
|
|
437
|
-
const [F, L] = w(!0), [
|
|
446
|
+
const [F, L] = w(!0), [v, S] = w(""), [H, R] = w(""), {
|
|
438
447
|
isComponentVisible: q,
|
|
439
448
|
ref: $,
|
|
440
449
|
setIsComponentVisible: U
|
|
@@ -481,13 +490,13 @@ const z = (a) => {
|
|
|
481
490
|
const l = t.target.selectionStart;
|
|
482
491
|
if (m)
|
|
483
492
|
if (H === "Backspace")
|
|
484
|
-
if (typeof l == "number" &&
|
|
485
|
-
let
|
|
493
|
+
if (typeof l == "number" && v[l] === ".") {
|
|
494
|
+
let f = d.slice(0, l - 1), y = d.slice(
|
|
486
495
|
l,
|
|
487
496
|
d.length
|
|
488
497
|
);
|
|
489
|
-
d = z(
|
|
490
|
-
const p =
|
|
498
|
+
d = z(f + y);
|
|
499
|
+
const p = v.length - 1, I = d.length - 1;
|
|
491
500
|
setTimeout(
|
|
492
501
|
() => t.target.setSelectionRange(
|
|
493
502
|
l - (p - I) < 0 ? 0 : l - (p - I),
|
|
@@ -496,8 +505,8 @@ const z = (a) => {
|
|
|
496
505
|
0
|
|
497
506
|
);
|
|
498
507
|
} else {
|
|
499
|
-
const
|
|
500
|
-
let p = l + 1 - (
|
|
508
|
+
const f = v.length - 1, y = d.length - 1;
|
|
509
|
+
let p = l + 1 - (f - y);
|
|
501
510
|
setTimeout(
|
|
502
511
|
() => t.target.setSelectionRange(
|
|
503
512
|
p < 0 ? 0 : p,
|
|
@@ -507,11 +516,11 @@ const z = (a) => {
|
|
|
507
516
|
);
|
|
508
517
|
}
|
|
509
518
|
else {
|
|
510
|
-
const
|
|
519
|
+
const f = v.length - 1, y = d.length - 1;
|
|
511
520
|
setTimeout(
|
|
512
521
|
() => t.target.setSelectionRange(
|
|
513
|
-
l + (y -
|
|
514
|
-
l + (y -
|
|
522
|
+
l + (y - f) - 1,
|
|
523
|
+
l + (y - f) - 1
|
|
515
524
|
),
|
|
516
525
|
0
|
|
517
526
|
);
|
|
@@ -525,7 +534,7 @@ const z = (a) => {
|
|
|
525
534
|
}
|
|
526
535
|
}), R("");
|
|
527
536
|
},
|
|
528
|
-
value:
|
|
537
|
+
value: v,
|
|
529
538
|
onKeyDown: (t) => {
|
|
530
539
|
t.key === "Backspace" && R(t.key), r.onKeyDown && r.onKeyDown(t);
|
|
531
540
|
}
|
|
@@ -536,7 +545,7 @@ const z = (a) => {
|
|
|
536
545
|
o ? /* @__PURE__ */ c("div", { className: "starasia-input-container-icon-right", children: B.cloneElement(o, {
|
|
537
546
|
width: P(e),
|
|
538
547
|
color: j(r.disabled ? "disable" : i),
|
|
539
|
-
onClick:
|
|
548
|
+
onClick: b,
|
|
540
549
|
style: {
|
|
541
550
|
color: `${j(
|
|
542
551
|
r.disabled ? "disable" : i
|
|
@@ -544,11 +553,11 @@ const z = (a) => {
|
|
|
544
553
|
}
|
|
545
554
|
}) }) : null,
|
|
546
555
|
g ? /* @__PURE__ */ c("div", { className: "starasia-input-container-addons-right", children: g }) : null,
|
|
547
|
-
|
|
556
|
+
v && q && (E != null && E.length) ? /* @__PURE__ */ c(
|
|
548
557
|
J,
|
|
549
558
|
{
|
|
550
559
|
options: E,
|
|
551
|
-
value:
|
|
560
|
+
value: v,
|
|
552
561
|
setValue: S,
|
|
553
562
|
ref: $,
|
|
554
563
|
isComponentVisible: q,
|
package/dist/input.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(b,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],i):(b=typeof globalThis<"u"?globalThis:b||self,i(b.Input={},b.jsxRuntime,b.React))})(this,function(b,i,t){"use strict";const D=`@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;
|
|
@@ -15,73 +15,73 @@
|
|
|
15
15
|
|
|
16
16
|
/* color */
|
|
17
17
|
/* brand */
|
|
18
|
-
--starasia-ui-input-color-primary-blue: var(--starasia-ui-brand-primary-default);
|
|
19
|
-
--starasia-ui-input-color-secondary-blue: var(--starasia-ui-brand-primary-default);
|
|
20
|
-
--starasia-ui-input-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary);
|
|
21
|
-
--starasia-ui-input-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary);
|
|
22
|
-
--starasia-ui-input-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary);
|
|
18
|
+
--starasia-ui-input-color-primary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
19
|
+
--starasia-ui-input-color-secondary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
20
|
+
--starasia-ui-input-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary, rgba(144, 176, 218, 1));
|
|
21
|
+
--starasia-ui-input-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
|
|
22
|
+
--starasia-ui-input-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
|
|
23
23
|
/* gray */
|
|
24
24
|
--starasia-ui-input-color-primary-gray: var(
|
|
25
25
|
--starasia-ui-color-gray-700,
|
|
26
|
-
|
|
26
|
+
rgba(72, 80, 76, 1)
|
|
27
27
|
);
|
|
28
28
|
--starasia-ui-input-color-secondary-gray: var(
|
|
29
29
|
--starasia-ui-color-gray-500,
|
|
30
|
-
|
|
30
|
+
rgba(120, 134, 127, 1)
|
|
31
31
|
);
|
|
32
32
|
--starasia-ui-input-color-tertiary-gray: var(
|
|
33
33
|
--starasia-ui-color-gray-300,
|
|
34
|
-
|
|
34
|
+
rgba(174, 182, 178, 1)
|
|
35
35
|
);
|
|
36
36
|
--starasia-ui-input-color-quaternary-gray: var(
|
|
37
37
|
--starasia-ui-color-gray-100,
|
|
38
|
-
|
|
38
|
+
rgba(239, 243, 248, 1)
|
|
39
39
|
);
|
|
40
40
|
--starasia-ui-input-color-quinary-gray: var(
|
|
41
41
|
--starasia-ui-color-gray-50,
|
|
42
|
-
|
|
42
|
+
rgba(255, 254, 255, 1)
|
|
43
43
|
);
|
|
44
44
|
/* red */
|
|
45
45
|
--starasia-ui-input-color-primary-red: var(
|
|
46
46
|
--starasia-ui-color-red-700,
|
|
47
|
-
|
|
47
|
+
rgba(164, 19, 60, 1)
|
|
48
48
|
);
|
|
49
49
|
--starasia-ui-input-color-secondary-red: var(
|
|
50
50
|
--starasia-ui-color-red-500,
|
|
51
|
-
|
|
51
|
+
rgba(255, 77, 109, 1)
|
|
52
52
|
);
|
|
53
53
|
--starasia-ui-input-color-tertiary-red: var(
|
|
54
54
|
--starasia-ui-color-red-300,
|
|
55
|
-
|
|
55
|
+
rgba(255, 143, 163, 1)
|
|
56
56
|
);
|
|
57
57
|
--starasia-ui-input-color-quaternary-red: var(
|
|
58
58
|
--starasia-ui-color-red-100,
|
|
59
|
-
|
|
59
|
+
rgba(255, 204, 213, 1)
|
|
60
60
|
);
|
|
61
61
|
--starasia-ui-input-color-quinary-red: var(
|
|
62
62
|
--starasia-ui-color-red-50,
|
|
63
|
-
|
|
63
|
+
rgba(255, 240, 243, 1)
|
|
64
64
|
);
|
|
65
65
|
/* orange */
|
|
66
66
|
--starasia-ui-input-color-primary-orange: var(
|
|
67
67
|
--starasia-ui-color-orange-700,
|
|
68
|
-
|
|
68
|
+
rgba(152, 104, 0, 1)
|
|
69
69
|
);
|
|
70
70
|
--starasia-ui-input-color-secondary-orange: var(
|
|
71
71
|
--starasia-ui-color-orange-500,
|
|
72
|
-
|
|
72
|
+
rgba(210, 160, 58, 1)
|
|
73
73
|
);
|
|
74
74
|
--starasia-ui-input-color-tertiary-orange: var(
|
|
75
75
|
--starasia-ui-color-orange-300,
|
|
76
|
-
|
|
76
|
+
rgba(255, 203, 105, 1)
|
|
77
77
|
);
|
|
78
78
|
--starasia-ui-input-color-quaternary-orange: var(
|
|
79
79
|
--starasia-ui-color-orange-100,
|
|
80
|
-
|
|
80
|
+
rgba(255, 245, 193, 1)
|
|
81
81
|
);
|
|
82
82
|
--starasia-ui-input-color-quinary-orange: var(
|
|
83
83
|
--starasia-ui-color-orange-50,
|
|
84
|
-
|
|
84
|
+
rgba(250, 246, 224, 1)
|
|
85
85
|
);
|
|
86
86
|
|
|
87
87
|
/* text color */
|
|
@@ -94,6 +94,15 @@
|
|
|
94
94
|
/* border color */
|
|
95
95
|
--starasia-ui-color-border: rgba(120, 134, 127, 0.2);
|
|
96
96
|
|
|
97
|
+
/* disabled */
|
|
98
|
+
--starasia-ui-input-color-disabled-bg: rgba(242, 243, 242, 1);
|
|
99
|
+
--starasia-ui-input-color-disabled-text: rgba(147, 158, 153, 1);
|
|
100
|
+
--starasia-ui-input-color-addons-bg: rgba(120, 134, 127, 0.1);
|
|
101
|
+
--starasia-ui-input-color-addons-bg-disabled: rgba(120, 134, 127, 0.3);
|
|
102
|
+
|
|
103
|
+
/* white */
|
|
104
|
+
--starasia-ui-input-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
|
|
105
|
+
|
|
97
106
|
/* height */
|
|
98
107
|
--starasia-ui-input-height-sm: var(--starasia-ui-h-8, 32px);
|
|
99
108
|
/* --starasia-ui-input-height-md: var(--starasia-ui-h-10, 40px); */
|
|
@@ -107,7 +116,7 @@
|
|
|
107
116
|
|
|
108
117
|
--starasia-ui-input-placeholder-color: var(
|
|
109
118
|
--starasia-ui-color-gray-200,
|
|
110
|
-
|
|
119
|
+
rgba(201, 206, 204, 1)
|
|
111
120
|
);
|
|
112
121
|
}
|
|
113
122
|
|
|
@@ -126,25 +135,25 @@
|
|
|
126
135
|
|
|
127
136
|
.starasia-input-container:has(input:disabled)
|
|
128
137
|
.starasia-input-container-icon-left {
|
|
129
|
-
background-color:
|
|
138
|
+
background-color: var(--starasia-ui-input-color-disabled-bg);
|
|
130
139
|
}
|
|
131
140
|
|
|
132
141
|
.starasia-input-container:has(input:disabled)
|
|
133
142
|
.starasia-input-container-icon-right {
|
|
134
|
-
background-color:
|
|
143
|
+
background-color: var(--starasia-ui-input-color-disabled-bg);
|
|
135
144
|
}
|
|
136
145
|
|
|
137
146
|
.starasia-input-container:has(input:disabled) {
|
|
138
147
|
/* border-color: var(--starasia-ui-input-color-tertiary-gray); */
|
|
139
148
|
/* background-color: var(--starasia-ui-input-color-tertiary-gray); */
|
|
140
|
-
border-color:
|
|
141
|
-
background-color:
|
|
149
|
+
border-color: var(--starasia-ui-color-border);
|
|
150
|
+
background-color: var(--starasia-ui-input-color-disabled-bg);
|
|
142
151
|
}
|
|
143
152
|
|
|
144
153
|
.starasia-input-container:has(input:disabled) input {
|
|
145
|
-
color:
|
|
146
|
-
border-color:
|
|
147
|
-
background-color:
|
|
154
|
+
color: var(--starasia-ui-input-color-disabled-text) !important;
|
|
155
|
+
border-color: var(--starasia-ui-color-border);
|
|
156
|
+
background-color: var(--starasia-ui-input-color-disabled-bg);
|
|
148
157
|
}
|
|
149
158
|
|
|
150
159
|
.starasia-input-outline.starasia-input-container-error {
|
|
@@ -285,7 +294,7 @@
|
|
|
285
294
|
|
|
286
295
|
/* INPUT ADDONS */
|
|
287
296
|
.starasia-input-container-addons-left {
|
|
288
|
-
background-color:
|
|
297
|
+
background-color: var(--starasia-ui-input-color-addons-bg);
|
|
289
298
|
height: 100%;
|
|
290
299
|
display: flex;
|
|
291
300
|
padding-inline: var(--starasia-ui-input-spacing-ms);
|
|
@@ -297,7 +306,7 @@
|
|
|
297
306
|
}
|
|
298
307
|
|
|
299
308
|
.starasia-input-container-addons-right {
|
|
300
|
-
background-color:
|
|
309
|
+
background-color: var(--starasia-ui-input-color-addons-bg);
|
|
301
310
|
height: 100%;
|
|
302
311
|
display: flex;
|
|
303
312
|
padding-inline: var(--starasia-ui-input-spacing-ms);
|
|
@@ -310,16 +319,16 @@
|
|
|
310
319
|
|
|
311
320
|
.starasia-input-container:has(input:disabled)
|
|
312
321
|
.starasia-input-container-addons-right {
|
|
313
|
-
background-color:
|
|
322
|
+
background-color: var(--starasia-ui-input-color-addons-bg-disabled) !important;
|
|
314
323
|
}
|
|
315
324
|
|
|
316
325
|
.starasia-input-container:has(input:disabled)
|
|
317
326
|
.starasia-input-container-addons-left {
|
|
318
|
-
background-color:
|
|
327
|
+
background-color: var(--starasia-ui-input-color-addons-bg-disabled) !important;
|
|
319
328
|
}
|
|
320
329
|
|
|
321
330
|
.starasia-input::placeholder {
|
|
322
331
|
color: var(--starasia-ui-input-placeholder-color);
|
|
323
332
|
font-weight: var(--starasia-ui-fontWeights-normal, 300);
|
|
324
333
|
}
|
|
325
|
-
`,q=a=>{if(a==="sm")return 16;if(a==="md")return 16;if(a==="lg")return 20},z=a=>a==="default"?"#939E99":a==="error"?"#EF4444":a==="warning"?"#EAB308":"#939E99",j=a=>a==="default"?"#939E99":a==="error"?"#EF4444":a==="warning"?"#EAB308":"#939E99",O=t.forwardRef(({options:a,value:n,setValue:o,isComponentVisible:l,onOptionChange:u},
|
|
334
|
+
`,q=a=>{if(a==="sm")return 16;if(a==="md")return 16;if(a==="lg")return 20},z=a=>a==="default"?"#939E99":a==="error"?"#EF4444":a==="warning"?"#EAB308":"#939E99",j=a=>a==="default"?"#939E99":a==="error"?"#EF4444":a==="warning"?"#EAB308":"#939E99",O=t.forwardRef(({options:a,value:n,setValue:o,isComponentVisible:l,onOptionChange:u},s)=>{const[k,V]=t.useState([]),d=t.useRef(null),h=()=>{if(s!=null&&s.current&&d.current){const v=window.innerHeight,f=s==null?void 0:s.current.getBoundingClientRect(),C=d.current.getBoundingClientRect(),m=f.bottom+C.height;d.current.style.left=`${f.left}px`,d.current.style.width=`${f.width}px`,m>=v-10?d.current.style.top=`${f.top-C.height-5}px`:d.current.style.top=`${f.top+f.height}px`}};return t.useEffect(()=>(window.addEventListener("scroll",h),window.addEventListener("resize",h),()=>{window.removeEventListener("scroll",h),window.removeEventListener("resize",h)}),[s,d]),t.useEffect(()=>{h()},[l]),t.useEffect(()=>{V((a==null?void 0:a.filter(v=>v.toLowerCase().startsWith(n.toLowerCase())))||[])},[n,a]),i.jsx("div",{ref:d,style:{position:"fixed",padding:"8px",boxSizing:"border-box",boxShadow:"0px 8px 12px 0px rgba(0, 0, 0, 0.08)",borderRadius:"8px",background:"white",overflow:"auto",zIndex:5e4},children:k==null?void 0:k.map(v=>W(v,n,o,u))})}),W=(a,n,o,l)=>{const u=a.toLowerCase().indexOf(n.toLowerCase());return i.jsxs("p",{style:{fontFamily:"Poppins",color:"#c9cecc",fontWeight:500,padding:"8px 14px",cursor:"pointer"},onClick:()=>{o(a),l&&l(a)},children:[a.slice(0,u),i.jsx("span",{style:{color:"#374151"},children:a.slice(u,u+n.length)}),a.slice(u+n.length)]})};function A(a){const[n,o]=t.useState(a),l=t.useRef(null),u=s=>{l.current&&!l.current.contains(s.target)&&o(!1)};return t.useEffect(()=>(document.addEventListener("click",u,!0),()=>{document.removeEventListener("click",u,!0)}),[]),{ref:l,isComponentVisible:n,setIsComponentVisible:o}}const T="starasia-input-styles";(a=>{if(!document.getElementById(T)){const n=document.createElement("style");n.id=T,n.textContent=a,document.head.appendChild(n)}})(D);function K(a){return Number(a.replace(/\./g,""))}const N=a=>{let n=a.replace(/[^\d]/g,"");return n=n.replace(/^0+(?=\d)/,""),n.replace(/\B(?=(\d{3})+(?!\d))/g,".")},F=t.forwardRef((a,n)=>{const{leftIcon:o,rightIcon:l,size:u="md",status:s="default",inputUse:k="icon",variant:V="outline",leftAddons:d,rightAddons:h,onClickLeftIcon:v,onClickRightIcon:f,highlightPlaceholder:C,currency:m,fullWidth:U=!1,options:S,onOptionChange:M,...r}=a;{const[Y,E]=t.useState(!0),[y,I]=t.useState(""),[G,$]=t.useState(""),{isComponentVisible:B,ref:P,setIsComponentVisible:J}=A(!1),Q=()=>{J(e=>!e)};return t.useEffect(()=>{typeof r.value=="string"&&r.value.length||r.defaultValue||typeof r.value=="number"?E(!1):E(!0)},[r.value,r.defaultValue]),t.useEffect(()=>{I(m?N(String(r.value)):r.value||"")},[r]),i.jsxs("div",{className:`starasia-input-container starasia-input-${V} starasia-input-container-${s} ${u} `,style:{width:U?"auto":"max-content",position:"relative"},ref:P,onClick:Q,children:[d?i.jsx("div",{className:"starasia-input-container-addons-left",children:d}):null,o?i.jsx("div",{className:"starasia-input-container-icon-left",children:t.cloneElement(o,{width:q(u),color:z(r.disabled?"disable":s),onClick:v,style:{color:`${z(r.disabled?"disable":s)}`}})}):null,i.jsxs("div",{className:"starasia-input-preview-container",children:[i.jsx("input",{className:"starasia-input",...r,placeholder:"",disabled:s==="disable"?!0:r.disabled,ref:n,onChange:e=>{let p=m?N(e.target.value):e.target.value;const c=e.target.selectionStart;if(m)if(G==="Backspace")if(typeof c=="number"&&y[c]==="."){let x=p.slice(0,c-1),w=p.slice(c,p.length);p=N(x+w);const g=y.length-1,L=p.length-1;setTimeout(()=>e.target.setSelectionRange(c-(g-L)<0?0:c-(g-L),c-(g-L)<0?0:c-(g-L)),0)}else{const x=y.length-1,w=p.length-1;let g=c+1-(x-w);setTimeout(()=>e.target.setSelectionRange(g<0?0:g,g<0?0:g),0)}else{const x=y.length-1,w=p.length-1;setTimeout(()=>e.target.setSelectionRange(c+(w-x)-1,c+(w-x)-1),0)}I(p),e.target.value?E(!1):E(!0),r.onChange&&r.onChange({...e,target:{...e.target,value:m?String(K(p)):p,name:e.target.name}}),$("")},value:y,onKeyDown:e=>{e.key==="Backspace"&&$(e.key),r.onKeyDown&&r.onKeyDown(e)}}),Y?H(r.placeholder,C):null]}),l?i.jsx("div",{className:"starasia-input-container-icon-right",children:t.cloneElement(l,{width:q(u),color:j(r.disabled?"disable":s),onClick:f,style:{color:`${j(r.disabled?"disable":s)}`}})}):null,h?i.jsx("div",{className:"starasia-input-container-addons-right",children:h}):null,y&&B&&(S!=null&&S.length)?i.jsx(O,{options:S,value:y,setValue:I,ref:P,isComponentVisible:B,onOptionChange:M}):null]})}}),H=(a,n)=>{if(!a||!n)return i.jsx("p",{className:"starasia-input-placeholder",children:a||""});const o=a.toLowerCase().indexOf(n.toLowerCase());return o===-1?i.jsx("p",{className:"starasia-input-placeholder",children:a}):i.jsxs("p",{className:"starasia-input-placeholder",children:[a.slice(0,o),i.jsx("span",{className:"starasia-input-placeholder-highlighted",children:a.slice(o,o+n.length)}),a.slice(o+n.length)]})};b.Input=F,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})});
|