@starasia/input 1.0.2 → 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 +59 -65
- package/dist/input.umd.js +44 -50
- package/package.json +6 -6
package/dist/input.es.js
CHANGED
|
@@ -16,89 +16,74 @@ const G = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
16
16
|
--starasia-ui-input-spacing-lg: var(--starasia-ui-spacing-xl, 24px);
|
|
17
17
|
|
|
18
18
|
/* color */
|
|
19
|
-
/*
|
|
20
|
-
--starasia-ui-input-color-primary-blue: var(
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
);
|
|
24
|
-
--starasia-ui-input-color-
|
|
25
|
-
--starasia-ui-color-blue-500,
|
|
26
|
-
#2196f3
|
|
27
|
-
);
|
|
28
|
-
--starasia-ui-input-color-tertiary-blue: var(
|
|
29
|
-
--starasia-ui-color-blue-300,
|
|
30
|
-
#64b5f6
|
|
31
|
-
);
|
|
32
|
-
--starasia-ui-input-color-quaternary-blue: var(
|
|
33
|
-
--starasia-ui-color-blue-100,
|
|
34
|
-
#bbdefb
|
|
35
|
-
);
|
|
36
|
-
--starasia-ui-input-color-quinary-blue: var(
|
|
37
|
-
--starasia-ui-color-blue-50,
|
|
38
|
-
#e3f2fd
|
|
39
|
-
);
|
|
19
|
+
/* brand */
|
|
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));
|
|
40
25
|
/* gray */
|
|
41
26
|
--starasia-ui-input-color-primary-gray: var(
|
|
42
27
|
--starasia-ui-color-gray-700,
|
|
43
|
-
|
|
28
|
+
rgba(72, 80, 76, 1)
|
|
44
29
|
);
|
|
45
30
|
--starasia-ui-input-color-secondary-gray: var(
|
|
46
31
|
--starasia-ui-color-gray-500,
|
|
47
|
-
|
|
32
|
+
rgba(120, 134, 127, 1)
|
|
48
33
|
);
|
|
49
34
|
--starasia-ui-input-color-tertiary-gray: var(
|
|
50
35
|
--starasia-ui-color-gray-300,
|
|
51
|
-
|
|
36
|
+
rgba(174, 182, 178, 1)
|
|
52
37
|
);
|
|
53
38
|
--starasia-ui-input-color-quaternary-gray: var(
|
|
54
39
|
--starasia-ui-color-gray-100,
|
|
55
|
-
|
|
40
|
+
rgba(239, 243, 248, 1)
|
|
56
41
|
);
|
|
57
42
|
--starasia-ui-input-color-quinary-gray: var(
|
|
58
43
|
--starasia-ui-color-gray-50,
|
|
59
|
-
|
|
44
|
+
rgba(255, 254, 255, 1)
|
|
60
45
|
);
|
|
61
46
|
/* red */
|
|
62
47
|
--starasia-ui-input-color-primary-red: var(
|
|
63
48
|
--starasia-ui-color-red-700,
|
|
64
|
-
|
|
49
|
+
rgba(164, 19, 60, 1)
|
|
65
50
|
);
|
|
66
51
|
--starasia-ui-input-color-secondary-red: var(
|
|
67
52
|
--starasia-ui-color-red-500,
|
|
68
|
-
|
|
53
|
+
rgba(255, 77, 109, 1)
|
|
69
54
|
);
|
|
70
55
|
--starasia-ui-input-color-tertiary-red: var(
|
|
71
56
|
--starasia-ui-color-red-300,
|
|
72
|
-
|
|
57
|
+
rgba(255, 143, 163, 1)
|
|
73
58
|
);
|
|
74
59
|
--starasia-ui-input-color-quaternary-red: var(
|
|
75
60
|
--starasia-ui-color-red-100,
|
|
76
|
-
|
|
61
|
+
rgba(255, 204, 213, 1)
|
|
77
62
|
);
|
|
78
63
|
--starasia-ui-input-color-quinary-red: var(
|
|
79
64
|
--starasia-ui-color-red-50,
|
|
80
|
-
|
|
65
|
+
rgba(255, 240, 243, 1)
|
|
81
66
|
);
|
|
82
67
|
/* orange */
|
|
83
68
|
--starasia-ui-input-color-primary-orange: var(
|
|
84
69
|
--starasia-ui-color-orange-700,
|
|
85
|
-
|
|
70
|
+
rgba(152, 104, 0, 1)
|
|
86
71
|
);
|
|
87
72
|
--starasia-ui-input-color-secondary-orange: var(
|
|
88
73
|
--starasia-ui-color-orange-500,
|
|
89
|
-
|
|
74
|
+
rgba(210, 160, 58, 1)
|
|
90
75
|
);
|
|
91
76
|
--starasia-ui-input-color-tertiary-orange: var(
|
|
92
77
|
--starasia-ui-color-orange-300,
|
|
93
|
-
|
|
78
|
+
rgba(255, 203, 105, 1)
|
|
94
79
|
);
|
|
95
80
|
--starasia-ui-input-color-quaternary-orange: var(
|
|
96
81
|
--starasia-ui-color-orange-100,
|
|
97
|
-
|
|
82
|
+
rgba(255, 245, 193, 1)
|
|
98
83
|
);
|
|
99
84
|
--starasia-ui-input-color-quinary-orange: var(
|
|
100
85
|
--starasia-ui-color-orange-50,
|
|
101
|
-
|
|
86
|
+
rgba(250, 246, 224, 1)
|
|
102
87
|
);
|
|
103
88
|
|
|
104
89
|
/* text color */
|
|
@@ -111,6 +96,15 @@ const G = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
111
96
|
/* border color */
|
|
112
97
|
--starasia-ui-color-border: rgba(120, 134, 127, 0.2);
|
|
113
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
|
+
|
|
114
108
|
/* height */
|
|
115
109
|
--starasia-ui-input-height-sm: var(--starasia-ui-h-8, 32px);
|
|
116
110
|
/* --starasia-ui-input-height-md: var(--starasia-ui-h-10, 40px); */
|
|
@@ -124,7 +118,7 @@ const G = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
124
118
|
|
|
125
119
|
--starasia-ui-input-placeholder-color: var(
|
|
126
120
|
--starasia-ui-color-gray-200,
|
|
127
|
-
|
|
121
|
+
rgba(201, 206, 204, 1)
|
|
128
122
|
);
|
|
129
123
|
}
|
|
130
124
|
|
|
@@ -143,25 +137,25 @@ const G = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
143
137
|
|
|
144
138
|
.starasia-input-container:has(input:disabled)
|
|
145
139
|
.starasia-input-container-icon-left {
|
|
146
|
-
background-color:
|
|
140
|
+
background-color: var(--starasia-ui-input-color-disabled-bg);
|
|
147
141
|
}
|
|
148
142
|
|
|
149
143
|
.starasia-input-container:has(input:disabled)
|
|
150
144
|
.starasia-input-container-icon-right {
|
|
151
|
-
background-color:
|
|
145
|
+
background-color: var(--starasia-ui-input-color-disabled-bg);
|
|
152
146
|
}
|
|
153
147
|
|
|
154
148
|
.starasia-input-container:has(input:disabled) {
|
|
155
149
|
/* border-color: var(--starasia-ui-input-color-tertiary-gray); */
|
|
156
150
|
/* background-color: var(--starasia-ui-input-color-tertiary-gray); */
|
|
157
|
-
border-color:
|
|
158
|
-
background-color:
|
|
151
|
+
border-color: var(--starasia-ui-color-border);
|
|
152
|
+
background-color: var(--starasia-ui-input-color-disabled-bg);
|
|
159
153
|
}
|
|
160
154
|
|
|
161
155
|
.starasia-input-container:has(input:disabled) input {
|
|
162
|
-
color:
|
|
163
|
-
border-color:
|
|
164
|
-
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);
|
|
165
159
|
}
|
|
166
160
|
|
|
167
161
|
.starasia-input-outline.starasia-input-container-error {
|
|
@@ -302,7 +296,7 @@ const G = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
302
296
|
|
|
303
297
|
/* INPUT ADDONS */
|
|
304
298
|
.starasia-input-container-addons-left {
|
|
305
|
-
background-color:
|
|
299
|
+
background-color: var(--starasia-ui-input-color-addons-bg);
|
|
306
300
|
height: 100%;
|
|
307
301
|
display: flex;
|
|
308
302
|
padding-inline: var(--starasia-ui-input-spacing-ms);
|
|
@@ -314,7 +308,7 @@ const G = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
314
308
|
}
|
|
315
309
|
|
|
316
310
|
.starasia-input-container-addons-right {
|
|
317
|
-
background-color:
|
|
311
|
+
background-color: var(--starasia-ui-input-color-addons-bg);
|
|
318
312
|
height: 100%;
|
|
319
313
|
display: flex;
|
|
320
314
|
padding-inline: var(--starasia-ui-input-spacing-ms);
|
|
@@ -327,12 +321,12 @@ const G = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
327
321
|
|
|
328
322
|
.starasia-input-container:has(input:disabled)
|
|
329
323
|
.starasia-input-container-addons-right {
|
|
330
|
-
background-color:
|
|
324
|
+
background-color: var(--starasia-ui-input-color-addons-bg-disabled) !important;
|
|
331
325
|
}
|
|
332
326
|
|
|
333
327
|
.starasia-input-container:has(input:disabled)
|
|
334
328
|
.starasia-input-container-addons-left {
|
|
335
|
-
background-color:
|
|
329
|
+
background-color: var(--starasia-ui-input-color-addons-bg-disabled) !important;
|
|
336
330
|
}
|
|
337
331
|
|
|
338
332
|
.starasia-input::placeholder {
|
|
@@ -350,8 +344,8 @@ const G = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
350
344
|
({ options: a, value: n, setValue: s, isComponentVisible: o, onOptionChange: e }, i) => {
|
|
351
345
|
const [k, V] = w([]), u = A(null), g = () => {
|
|
352
346
|
if (i != null && i.current && u.current) {
|
|
353
|
-
const h = window.innerHeight,
|
|
354
|
-
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`;
|
|
355
349
|
}
|
|
356
350
|
};
|
|
357
351
|
return x(() => (window.addEventListener("scroll", g), window.addEventListener("resize", g), () => {
|
|
@@ -440,7 +434,7 @@ const z = (a) => {
|
|
|
440
434
|
leftAddons: u,
|
|
441
435
|
rightAddons: g,
|
|
442
436
|
onClickLeftIcon: h,
|
|
443
|
-
onClickRightIcon:
|
|
437
|
+
onClickRightIcon: b,
|
|
444
438
|
highlightPlaceholder: C,
|
|
445
439
|
currency: m,
|
|
446
440
|
fullWidth: O = !1,
|
|
@@ -449,7 +443,7 @@ const z = (a) => {
|
|
|
449
443
|
...r
|
|
450
444
|
} = a;
|
|
451
445
|
{
|
|
452
|
-
const [F, L] = w(!0), [
|
|
446
|
+
const [F, L] = w(!0), [v, S] = w(""), [H, R] = w(""), {
|
|
453
447
|
isComponentVisible: q,
|
|
454
448
|
ref: $,
|
|
455
449
|
setIsComponentVisible: U
|
|
@@ -496,13 +490,13 @@ const z = (a) => {
|
|
|
496
490
|
const l = t.target.selectionStart;
|
|
497
491
|
if (m)
|
|
498
492
|
if (H === "Backspace")
|
|
499
|
-
if (typeof l == "number" &&
|
|
500
|
-
let
|
|
493
|
+
if (typeof l == "number" && v[l] === ".") {
|
|
494
|
+
let f = d.slice(0, l - 1), y = d.slice(
|
|
501
495
|
l,
|
|
502
496
|
d.length
|
|
503
497
|
);
|
|
504
|
-
d = z(
|
|
505
|
-
const p =
|
|
498
|
+
d = z(f + y);
|
|
499
|
+
const p = v.length - 1, I = d.length - 1;
|
|
506
500
|
setTimeout(
|
|
507
501
|
() => t.target.setSelectionRange(
|
|
508
502
|
l - (p - I) < 0 ? 0 : l - (p - I),
|
|
@@ -511,8 +505,8 @@ const z = (a) => {
|
|
|
511
505
|
0
|
|
512
506
|
);
|
|
513
507
|
} else {
|
|
514
|
-
const
|
|
515
|
-
let p = l + 1 - (
|
|
508
|
+
const f = v.length - 1, y = d.length - 1;
|
|
509
|
+
let p = l + 1 - (f - y);
|
|
516
510
|
setTimeout(
|
|
517
511
|
() => t.target.setSelectionRange(
|
|
518
512
|
p < 0 ? 0 : p,
|
|
@@ -522,11 +516,11 @@ const z = (a) => {
|
|
|
522
516
|
);
|
|
523
517
|
}
|
|
524
518
|
else {
|
|
525
|
-
const
|
|
519
|
+
const f = v.length - 1, y = d.length - 1;
|
|
526
520
|
setTimeout(
|
|
527
521
|
() => t.target.setSelectionRange(
|
|
528
|
-
l + (y -
|
|
529
|
-
l + (y -
|
|
522
|
+
l + (y - f) - 1,
|
|
523
|
+
l + (y - f) - 1
|
|
530
524
|
),
|
|
531
525
|
0
|
|
532
526
|
);
|
|
@@ -540,7 +534,7 @@ const z = (a) => {
|
|
|
540
534
|
}
|
|
541
535
|
}), R("");
|
|
542
536
|
},
|
|
543
|
-
value:
|
|
537
|
+
value: v,
|
|
544
538
|
onKeyDown: (t) => {
|
|
545
539
|
t.key === "Backspace" && R(t.key), r.onKeyDown && r.onKeyDown(t);
|
|
546
540
|
}
|
|
@@ -551,7 +545,7 @@ const z = (a) => {
|
|
|
551
545
|
o ? /* @__PURE__ */ c("div", { className: "starasia-input-container-icon-right", children: B.cloneElement(o, {
|
|
552
546
|
width: P(e),
|
|
553
547
|
color: j(r.disabled ? "disable" : i),
|
|
554
|
-
onClick:
|
|
548
|
+
onClick: b,
|
|
555
549
|
style: {
|
|
556
550
|
color: `${j(
|
|
557
551
|
r.disabled ? "disable" : i
|
|
@@ -559,11 +553,11 @@ const z = (a) => {
|
|
|
559
553
|
}
|
|
560
554
|
}) }) : null,
|
|
561
555
|
g ? /* @__PURE__ */ c("div", { className: "starasia-input-container-addons-right", children: g }) : null,
|
|
562
|
-
|
|
556
|
+
v && q && (E != null && E.length) ? /* @__PURE__ */ c(
|
|
563
557
|
J,
|
|
564
558
|
{
|
|
565
559
|
options: E,
|
|
566
|
-
value:
|
|
560
|
+
value: v,
|
|
567
561
|
setValue: S,
|
|
568
562
|
ref: $,
|
|
569
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;
|
|
@@ -14,89 +14,74 @@
|
|
|
14
14
|
--starasia-ui-input-spacing-lg: var(--starasia-ui-spacing-xl, 24px);
|
|
15
15
|
|
|
16
16
|
/* color */
|
|
17
|
-
/*
|
|
18
|
-
--starasia-ui-input-color-primary-blue: var(
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
);
|
|
22
|
-
--starasia-ui-input-color-
|
|
23
|
-
--starasia-ui-color-blue-500,
|
|
24
|
-
#2196f3
|
|
25
|
-
);
|
|
26
|
-
--starasia-ui-input-color-tertiary-blue: var(
|
|
27
|
-
--starasia-ui-color-blue-300,
|
|
28
|
-
#64b5f6
|
|
29
|
-
);
|
|
30
|
-
--starasia-ui-input-color-quaternary-blue: var(
|
|
31
|
-
--starasia-ui-color-blue-100,
|
|
32
|
-
#bbdefb
|
|
33
|
-
);
|
|
34
|
-
--starasia-ui-input-color-quinary-blue: var(
|
|
35
|
-
--starasia-ui-color-blue-50,
|
|
36
|
-
#e3f2fd
|
|
37
|
-
);
|
|
17
|
+
/* brand */
|
|
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));
|
|
38
23
|
/* gray */
|
|
39
24
|
--starasia-ui-input-color-primary-gray: var(
|
|
40
25
|
--starasia-ui-color-gray-700,
|
|
41
|
-
|
|
26
|
+
rgba(72, 80, 76, 1)
|
|
42
27
|
);
|
|
43
28
|
--starasia-ui-input-color-secondary-gray: var(
|
|
44
29
|
--starasia-ui-color-gray-500,
|
|
45
|
-
|
|
30
|
+
rgba(120, 134, 127, 1)
|
|
46
31
|
);
|
|
47
32
|
--starasia-ui-input-color-tertiary-gray: var(
|
|
48
33
|
--starasia-ui-color-gray-300,
|
|
49
|
-
|
|
34
|
+
rgba(174, 182, 178, 1)
|
|
50
35
|
);
|
|
51
36
|
--starasia-ui-input-color-quaternary-gray: var(
|
|
52
37
|
--starasia-ui-color-gray-100,
|
|
53
|
-
|
|
38
|
+
rgba(239, 243, 248, 1)
|
|
54
39
|
);
|
|
55
40
|
--starasia-ui-input-color-quinary-gray: var(
|
|
56
41
|
--starasia-ui-color-gray-50,
|
|
57
|
-
|
|
42
|
+
rgba(255, 254, 255, 1)
|
|
58
43
|
);
|
|
59
44
|
/* red */
|
|
60
45
|
--starasia-ui-input-color-primary-red: var(
|
|
61
46
|
--starasia-ui-color-red-700,
|
|
62
|
-
|
|
47
|
+
rgba(164, 19, 60, 1)
|
|
63
48
|
);
|
|
64
49
|
--starasia-ui-input-color-secondary-red: var(
|
|
65
50
|
--starasia-ui-color-red-500,
|
|
66
|
-
|
|
51
|
+
rgba(255, 77, 109, 1)
|
|
67
52
|
);
|
|
68
53
|
--starasia-ui-input-color-tertiary-red: var(
|
|
69
54
|
--starasia-ui-color-red-300,
|
|
70
|
-
|
|
55
|
+
rgba(255, 143, 163, 1)
|
|
71
56
|
);
|
|
72
57
|
--starasia-ui-input-color-quaternary-red: var(
|
|
73
58
|
--starasia-ui-color-red-100,
|
|
74
|
-
|
|
59
|
+
rgba(255, 204, 213, 1)
|
|
75
60
|
);
|
|
76
61
|
--starasia-ui-input-color-quinary-red: var(
|
|
77
62
|
--starasia-ui-color-red-50,
|
|
78
|
-
|
|
63
|
+
rgba(255, 240, 243, 1)
|
|
79
64
|
);
|
|
80
65
|
/* orange */
|
|
81
66
|
--starasia-ui-input-color-primary-orange: var(
|
|
82
67
|
--starasia-ui-color-orange-700,
|
|
83
|
-
|
|
68
|
+
rgba(152, 104, 0, 1)
|
|
84
69
|
);
|
|
85
70
|
--starasia-ui-input-color-secondary-orange: var(
|
|
86
71
|
--starasia-ui-color-orange-500,
|
|
87
|
-
|
|
72
|
+
rgba(210, 160, 58, 1)
|
|
88
73
|
);
|
|
89
74
|
--starasia-ui-input-color-tertiary-orange: var(
|
|
90
75
|
--starasia-ui-color-orange-300,
|
|
91
|
-
|
|
76
|
+
rgba(255, 203, 105, 1)
|
|
92
77
|
);
|
|
93
78
|
--starasia-ui-input-color-quaternary-orange: var(
|
|
94
79
|
--starasia-ui-color-orange-100,
|
|
95
|
-
|
|
80
|
+
rgba(255, 245, 193, 1)
|
|
96
81
|
);
|
|
97
82
|
--starasia-ui-input-color-quinary-orange: var(
|
|
98
83
|
--starasia-ui-color-orange-50,
|
|
99
|
-
|
|
84
|
+
rgba(250, 246, 224, 1)
|
|
100
85
|
);
|
|
101
86
|
|
|
102
87
|
/* text color */
|
|
@@ -109,6 +94,15 @@
|
|
|
109
94
|
/* border color */
|
|
110
95
|
--starasia-ui-color-border: rgba(120, 134, 127, 0.2);
|
|
111
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
|
+
|
|
112
106
|
/* height */
|
|
113
107
|
--starasia-ui-input-height-sm: var(--starasia-ui-h-8, 32px);
|
|
114
108
|
/* --starasia-ui-input-height-md: var(--starasia-ui-h-10, 40px); */
|
|
@@ -122,7 +116,7 @@
|
|
|
122
116
|
|
|
123
117
|
--starasia-ui-input-placeholder-color: var(
|
|
124
118
|
--starasia-ui-color-gray-200,
|
|
125
|
-
|
|
119
|
+
rgba(201, 206, 204, 1)
|
|
126
120
|
);
|
|
127
121
|
}
|
|
128
122
|
|
|
@@ -141,25 +135,25 @@
|
|
|
141
135
|
|
|
142
136
|
.starasia-input-container:has(input:disabled)
|
|
143
137
|
.starasia-input-container-icon-left {
|
|
144
|
-
background-color:
|
|
138
|
+
background-color: var(--starasia-ui-input-color-disabled-bg);
|
|
145
139
|
}
|
|
146
140
|
|
|
147
141
|
.starasia-input-container:has(input:disabled)
|
|
148
142
|
.starasia-input-container-icon-right {
|
|
149
|
-
background-color:
|
|
143
|
+
background-color: var(--starasia-ui-input-color-disabled-bg);
|
|
150
144
|
}
|
|
151
145
|
|
|
152
146
|
.starasia-input-container:has(input:disabled) {
|
|
153
147
|
/* border-color: var(--starasia-ui-input-color-tertiary-gray); */
|
|
154
148
|
/* background-color: var(--starasia-ui-input-color-tertiary-gray); */
|
|
155
|
-
border-color:
|
|
156
|
-
background-color:
|
|
149
|
+
border-color: var(--starasia-ui-color-border);
|
|
150
|
+
background-color: var(--starasia-ui-input-color-disabled-bg);
|
|
157
151
|
}
|
|
158
152
|
|
|
159
153
|
.starasia-input-container:has(input:disabled) input {
|
|
160
|
-
color:
|
|
161
|
-
border-color:
|
|
162
|
-
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);
|
|
163
157
|
}
|
|
164
158
|
|
|
165
159
|
.starasia-input-outline.starasia-input-container-error {
|
|
@@ -300,7 +294,7 @@
|
|
|
300
294
|
|
|
301
295
|
/* INPUT ADDONS */
|
|
302
296
|
.starasia-input-container-addons-left {
|
|
303
|
-
background-color:
|
|
297
|
+
background-color: var(--starasia-ui-input-color-addons-bg);
|
|
304
298
|
height: 100%;
|
|
305
299
|
display: flex;
|
|
306
300
|
padding-inline: var(--starasia-ui-input-spacing-ms);
|
|
@@ -312,7 +306,7 @@
|
|
|
312
306
|
}
|
|
313
307
|
|
|
314
308
|
.starasia-input-container-addons-right {
|
|
315
|
-
background-color:
|
|
309
|
+
background-color: var(--starasia-ui-input-color-addons-bg);
|
|
316
310
|
height: 100%;
|
|
317
311
|
display: flex;
|
|
318
312
|
padding-inline: var(--starasia-ui-input-spacing-ms);
|
|
@@ -325,16 +319,16 @@
|
|
|
325
319
|
|
|
326
320
|
.starasia-input-container:has(input:disabled)
|
|
327
321
|
.starasia-input-container-addons-right {
|
|
328
|
-
background-color:
|
|
322
|
+
background-color: var(--starasia-ui-input-color-addons-bg-disabled) !important;
|
|
329
323
|
}
|
|
330
324
|
|
|
331
325
|
.starasia-input-container:has(input:disabled)
|
|
332
326
|
.starasia-input-container-addons-left {
|
|
333
|
-
background-color:
|
|
327
|
+
background-color: var(--starasia-ui-input-color-addons-bg-disabled) !important;
|
|
334
328
|
}
|
|
335
329
|
|
|
336
330
|
.starasia-input::placeholder {
|
|
337
331
|
color: var(--starasia-ui-input-placeholder-color);
|
|
338
332
|
font-weight: var(--starasia-ui-fontWeights-normal, 300);
|
|
339
333
|
}
|
|
340
|
-
`,q=
|
|
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"})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@starasia/input",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "input component for starasia UI",
|
|
5
5
|
"author": "Prawito Hudoro",
|
|
6
6
|
"main": "dist/input.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
|
+
}
|