next-helios-fe 1.6.27 → 1.6.28
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/index.js +1 -1
- package/package.json +1 -1
- package/src/components/form/input/color.tsx +22 -17
- package/src/components/form/input/date.tsx +22 -17
- package/src/components/form/input/email.tsx +30 -26
- package/src/components/form/input/file.tsx +34 -28
- package/src/components/form/input/number.tsx +31 -27
- package/src/components/form/input/password.tsx +30 -26
- package/src/components/form/input/range.tsx +30 -26
- package/src/components/form/input/text.tsx +30 -26
- package/src/components/form/input/time.tsx +22 -17
- package/src/components/form/other/autocomplete.tsx +22 -17
- package/src/components/form/other/multipleSelect.tsx +21 -17
- package/src/components/form/other/phoneNumber.tsx +22 -17
- package/src/components/form/other/pin.tsx +22 -17
- package/src/components/form/other/secret.tsx +22 -17
- package/src/components/form/other/select.tsx +22 -17
- package/src/components/form/other/textarea.tsx +30 -26
|
@@ -1570,23 +1570,28 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
|
|
|
1570
1570
|
|
|
1571
1571
|
return (
|
|
1572
1572
|
<label className={`grid gap-2 ${width}`}>
|
|
1573
|
-
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
<
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1573
|
+
{(label || description) && (
|
|
1574
|
+
<div className="flex items-center">
|
|
1575
|
+
{label && (
|
|
1576
|
+
<span
|
|
1577
|
+
className={`text-sm select-none ${
|
|
1578
|
+
rest.required &&
|
|
1579
|
+
"after:content-['*'] after:ml-1 after:text-danger"
|
|
1580
|
+
}`}
|
|
1581
|
+
>
|
|
1582
|
+
{label}
|
|
1583
|
+
</span>
|
|
1584
|
+
)}
|
|
1585
|
+
{description && (
|
|
1586
|
+
<span
|
|
1587
|
+
title={description}
|
|
1588
|
+
className="ms-auto text-sm text-primary-dark"
|
|
1589
|
+
>
|
|
1590
|
+
<Icon icon="octicon:info-16" />
|
|
1591
|
+
</span>
|
|
1592
|
+
)}
|
|
1593
|
+
</div>
|
|
1594
|
+
)}
|
|
1590
1595
|
<div className="flex flex-row-reverse gap-4">
|
|
1591
1596
|
<div className="relative flex-1 flex items-center">
|
|
1592
1597
|
<div className="absolute left-0 flex justify-center w-14 border-r">
|
|
@@ -29,23 +29,28 @@ export const Pin: React.FC<PinProps> = ({
|
|
|
29
29
|
|
|
30
30
|
return (
|
|
31
31
|
<label className="grid gap-2 w-fit">
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
<
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
32
|
+
{(label || description) && (
|
|
33
|
+
<div className="flex items-center">
|
|
34
|
+
{label && (
|
|
35
|
+
<span
|
|
36
|
+
className={`text-sm select-none ${
|
|
37
|
+
rest.required &&
|
|
38
|
+
"after:content-['*'] after:ml-1 after:text-danger"
|
|
39
|
+
}`}
|
|
40
|
+
>
|
|
41
|
+
{label}
|
|
42
|
+
</span>
|
|
43
|
+
)}
|
|
44
|
+
{description && (
|
|
45
|
+
<span
|
|
46
|
+
title={description}
|
|
47
|
+
className="ms-auto text-sm text-primary-dark"
|
|
48
|
+
>
|
|
49
|
+
<Icon icon="octicon:info-16" />
|
|
50
|
+
</span>
|
|
51
|
+
)}
|
|
52
|
+
</div>
|
|
53
|
+
)}
|
|
49
54
|
<div className="flex items-center gap-4">
|
|
50
55
|
<PinField
|
|
51
56
|
className={`text-center w-10 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
|
|
@@ -33,23 +33,28 @@ export const Secret: React.FC<SecretProps> = ({
|
|
|
33
33
|
|
|
34
34
|
return (
|
|
35
35
|
<label className={`grid gap-2 ${width}`}>
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
<
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
36
|
+
{(label || description) && (
|
|
37
|
+
<div className="flex items-center">
|
|
38
|
+
{label && (
|
|
39
|
+
<span
|
|
40
|
+
className={`text-sm select-none ${
|
|
41
|
+
rest.required &&
|
|
42
|
+
"after:content-['*'] after:ml-1 after:text-danger"
|
|
43
|
+
}`}
|
|
44
|
+
>
|
|
45
|
+
{label}
|
|
46
|
+
</span>
|
|
47
|
+
)}
|
|
48
|
+
{description && (
|
|
49
|
+
<span
|
|
50
|
+
title={description}
|
|
51
|
+
className="ms-auto text-sm text-primary-dark"
|
|
52
|
+
>
|
|
53
|
+
<Icon icon="octicon:info-16" />
|
|
54
|
+
</span>
|
|
55
|
+
)}
|
|
56
|
+
</div>
|
|
57
|
+
)}
|
|
53
58
|
<div className="relative flex items-center">
|
|
54
59
|
<input
|
|
55
60
|
type="text"
|
|
@@ -70,23 +70,28 @@ export const Select: React.FC<SelectProps> = ({
|
|
|
70
70
|
return (
|
|
71
71
|
<div className="flex flex-row-reverse items-end">
|
|
72
72
|
<label className={`grid gap-2 ${width}`}>
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
<
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
73
|
+
{(label || description) && (
|
|
74
|
+
<div className="flex items-center">
|
|
75
|
+
{label && (
|
|
76
|
+
<span
|
|
77
|
+
className={`text-sm select-none ${
|
|
78
|
+
rest.required &&
|
|
79
|
+
"after:content-['*'] after:ml-1 after:text-danger"
|
|
80
|
+
}`}
|
|
81
|
+
>
|
|
82
|
+
{label}
|
|
83
|
+
</span>
|
|
84
|
+
)}
|
|
85
|
+
{description && (
|
|
86
|
+
<span
|
|
87
|
+
title={description}
|
|
88
|
+
className="ms-auto text-sm text-primary-dark"
|
|
89
|
+
>
|
|
90
|
+
<Icon icon="octicon:info-16" />
|
|
91
|
+
</span>
|
|
92
|
+
)}
|
|
93
|
+
</div>
|
|
94
|
+
)}
|
|
90
95
|
<div className="relative flex items-center cursor-pointer">
|
|
91
96
|
<input
|
|
92
97
|
ref={inputRef}
|
|
@@ -29,32 +29,36 @@ export const Textarea: React.FC<TextareaProps> = ({
|
|
|
29
29
|
|
|
30
30
|
return (
|
|
31
31
|
<label className={`grid gap-2 ${width}`}>
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
32
|
+
{(label ||
|
|
33
|
+
(!options?.hideInputDetail &&
|
|
34
|
+
(rest.minLength || rest.maxLength || description))) && (
|
|
35
|
+
<div className="flex">
|
|
36
|
+
{label && (
|
|
37
|
+
<span
|
|
38
|
+
className={`text-sm select-none ${
|
|
39
|
+
rest.required &&
|
|
40
|
+
"after:content-['*'] after:ml-1 after:text-danger"
|
|
41
|
+
}`}
|
|
42
|
+
>
|
|
43
|
+
{label}
|
|
44
|
+
</span>
|
|
45
|
+
)}
|
|
46
|
+
{!options?.hideInputDetail && (
|
|
47
|
+
<div className="flex justify-end items-center gap-2">
|
|
48
|
+
{(rest.minLength || rest.maxLength) && (
|
|
49
|
+
<span className="text-sm select-none">
|
|
50
|
+
{rest.minLength || 0}/{rest.maxLength || "∞"}
|
|
51
|
+
</span>
|
|
52
|
+
)}
|
|
53
|
+
{description && (
|
|
54
|
+
<span title={description} className="text-sm text-primary-dark">
|
|
55
|
+
<Icon icon="octicon:info-16" />
|
|
56
|
+
</span>
|
|
57
|
+
)}
|
|
58
|
+
</div>
|
|
59
|
+
)}
|
|
60
|
+
</div>
|
|
61
|
+
)}
|
|
58
62
|
<textarea
|
|
59
63
|
rows={rest.rows || 10}
|
|
60
64
|
className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
|