next-helios-fe 1.6.23 → 1.6.24
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/checkbox.tsx +1 -26
- package/src/components/form/input/color.tsx +1 -1
- package/src/components/form/input/date.tsx +9 -15
- package/src/components/form/input/file.tsx +3 -3
- package/src/components/form/input/number.tsx +6 -32
- package/src/components/form/input/password.tsx +1 -1
- package/src/components/form/input/range.tsx +6 -24
- package/src/components/form/input/time.tsx +8 -8
- package/src/components/form/other/autocomplete.tsx +1 -1
- package/src/components/form/other/multipleSelect.tsx +2 -2
- package/src/components/form/other/secret.tsx +1 -1
- package/src/components/form/other/select.tsx +1 -1
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import React
|
|
2
|
+
import React from "react";
|
|
3
3
|
|
|
4
4
|
export interface CheckboxProps
|
|
5
5
|
extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
@@ -17,27 +17,6 @@ export const Checkbox: React.FC<CheckboxProps> = ({
|
|
|
17
17
|
theme,
|
|
18
18
|
...rest
|
|
19
19
|
}) => {
|
|
20
|
-
const [tempChecked, setTempChecked] = useState(false);
|
|
21
|
-
|
|
22
|
-
useEffect(() => {
|
|
23
|
-
if (rest.checked) {
|
|
24
|
-
setTempChecked(rest.checked as boolean);
|
|
25
|
-
return;
|
|
26
|
-
} else if (rest.defaultChecked) {
|
|
27
|
-
setTempChecked(rest.defaultChecked as boolean);
|
|
28
|
-
return;
|
|
29
|
-
}
|
|
30
|
-
}, [rest.value, rest.defaultValue]);
|
|
31
|
-
|
|
32
|
-
useEffect(() => {
|
|
33
|
-
if (tempChecked) {
|
|
34
|
-
rest.onChange &&
|
|
35
|
-
rest.onChange({
|
|
36
|
-
target: { checked: tempChecked } as HTMLInputElement,
|
|
37
|
-
} as any);
|
|
38
|
-
}
|
|
39
|
-
}, [tempChecked]);
|
|
40
|
-
|
|
41
20
|
return (
|
|
42
21
|
<label
|
|
43
22
|
className={`group/checkbox flex items-center ${
|
|
@@ -58,10 +37,6 @@ export const Checkbox: React.FC<CheckboxProps> = ({
|
|
|
58
37
|
theme && "border-0"
|
|
59
38
|
}`}
|
|
60
39
|
style={{ backgroundColor: theme }}
|
|
61
|
-
checked={tempChecked}
|
|
62
|
-
onChange={(e) => {
|
|
63
|
-
setTempChecked(e.target.checked);
|
|
64
|
-
}}
|
|
65
40
|
{...rest}
|
|
66
41
|
/>
|
|
67
42
|
</div>
|
|
@@ -84,7 +84,7 @@ export const Color: React.FC<ColorProps> = ({
|
|
|
84
84
|
<div className="relative flex-1 flex items-center">
|
|
85
85
|
<input
|
|
86
86
|
type="text"
|
|
87
|
-
className={`w-full
|
|
87
|
+
className={`w-full ps-4 pe-14 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}`}
|
|
88
88
|
placeholder={rest.placeholder}
|
|
89
89
|
value={tempValue}
|
|
90
90
|
onChange={(e) => setTempValue(e.target.value.toUpperCase())}
|
|
@@ -53,7 +53,7 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
|
|
|
53
53
|
<div className="relative flex items-center">
|
|
54
54
|
<input
|
|
55
55
|
type="text"
|
|
56
|
-
className={`
|
|
56
|
+
className={`w-full ps-4 pe-14 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}`}
|
|
57
57
|
value={
|
|
58
58
|
selectedRange === "Custom" || !options?.enableSelectRange
|
|
59
59
|
? `${
|
|
@@ -93,15 +93,11 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
|
|
|
93
93
|
</button>
|
|
94
94
|
}
|
|
95
95
|
>
|
|
96
|
-
<div
|
|
97
|
-
className={`flex gap-2 md:w-full overflow-auto md:overflow-clip ${
|
|
98
|
-
options?.enableSelectRange ? "w-80" : "w-full"
|
|
99
|
-
}`}
|
|
100
|
-
>
|
|
96
|
+
<div className="flex gap-2 w-fit overflow-auto md:overflow-clip">
|
|
101
97
|
{options?.enableSelectRange && (
|
|
102
|
-
<div className="w-
|
|
98
|
+
<div className="w-40">
|
|
103
99
|
<button
|
|
104
|
-
className="
|
|
100
|
+
className="w-40 my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
|
|
105
101
|
disabled={selectedRange === "Today"}
|
|
106
102
|
onClick={() => {
|
|
107
103
|
setSelectedRange("Today");
|
|
@@ -114,7 +110,7 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
|
|
|
114
110
|
Today
|
|
115
111
|
</button>
|
|
116
112
|
<button
|
|
117
|
-
className="
|
|
113
|
+
className="w-40 my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
|
|
118
114
|
disabled={selectedRange === "Yesterday"}
|
|
119
115
|
onClick={() => {
|
|
120
116
|
setSelectedRange("Yesterday");
|
|
@@ -127,7 +123,7 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
|
|
|
127
123
|
Yesterday
|
|
128
124
|
</button>
|
|
129
125
|
<button
|
|
130
|
-
className="
|
|
126
|
+
className="w-40 my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
|
|
131
127
|
disabled={selectedRange === "Last 7 days"}
|
|
132
128
|
onClick={() => {
|
|
133
129
|
setSelectedRange("Last 7 days");
|
|
@@ -140,7 +136,7 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
|
|
|
140
136
|
Last 7 days
|
|
141
137
|
</button>
|
|
142
138
|
<button
|
|
143
|
-
className="
|
|
139
|
+
className="w-40 my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
|
|
144
140
|
disabled={selectedRange === "Last 30 days"}
|
|
145
141
|
onClick={() => {
|
|
146
142
|
setSelectedRange("Last 30 days");
|
|
@@ -153,7 +149,7 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
|
|
|
153
149
|
Last 30 days
|
|
154
150
|
</button>
|
|
155
151
|
<button
|
|
156
|
-
className="
|
|
152
|
+
className="w-40 my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
|
|
157
153
|
disabled={selectedRange === "Custom"}
|
|
158
154
|
onClick={() => {
|
|
159
155
|
setSelectedRange("Custom");
|
|
@@ -171,9 +167,7 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
|
|
|
171
167
|
options={{
|
|
172
168
|
enableSelectRange: options?.enableSelectRange ?? false,
|
|
173
169
|
}}
|
|
174
|
-
value={
|
|
175
|
-
options?.enableSelectRange ? tempValue : tempValue[0]
|
|
176
|
-
}
|
|
170
|
+
value={options?.enableSelectRange ? tempValue : tempValue[0]}
|
|
177
171
|
onChange={(value) => {
|
|
178
172
|
setSelectedRange("Custom");
|
|
179
173
|
if (options?.enableSelectRange) {
|
|
@@ -28,10 +28,10 @@ export const File: React.FC<FileProps> = ({
|
|
|
28
28
|
const width = options?.width === "fit" ? "w-fit" : "w-full";
|
|
29
29
|
const height =
|
|
30
30
|
options?.height === "short"
|
|
31
|
-
? "
|
|
31
|
+
? "h-[35px]"
|
|
32
32
|
: options?.height === "high"
|
|
33
|
-
? "
|
|
34
|
-
: "
|
|
33
|
+
? "h-[43px]"
|
|
34
|
+
: "h-[39px]";
|
|
35
35
|
|
|
36
36
|
useEffect(() => {
|
|
37
37
|
document
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import React, {
|
|
2
|
+
import React, { useRef } from "react";
|
|
3
3
|
import { Icon } from "@iconify/react";
|
|
4
4
|
|
|
5
5
|
export interface NumberProps
|
|
@@ -12,7 +12,7 @@ export interface NumberProps
|
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
export const Number: React.FC<NumberProps> = ({ options, label, ...rest }) => {
|
|
15
|
-
const
|
|
15
|
+
const inputRef = useRef<HTMLInputElement>(null);
|
|
16
16
|
const width = options?.width === "fit" ? "w-fit" : "w-full";
|
|
17
17
|
const height =
|
|
18
18
|
options?.height === "short"
|
|
@@ -21,23 +21,6 @@ export const Number: React.FC<NumberProps> = ({ options, label, ...rest }) => {
|
|
|
21
21
|
? "py-2"
|
|
22
22
|
: "py-1.5";
|
|
23
23
|
|
|
24
|
-
useEffect(() => {
|
|
25
|
-
if (rest.value) {
|
|
26
|
-
setTempValue(rest.value as string);
|
|
27
|
-
return;
|
|
28
|
-
} else if (rest.defaultValue || rest.defaultValue === 0) {
|
|
29
|
-
setTempValue(rest.defaultValue as string);
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
}, [rest.value, rest.defaultValue]);
|
|
33
|
-
|
|
34
|
-
useEffect(() => {
|
|
35
|
-
rest.onChange &&
|
|
36
|
-
rest.onChange({
|
|
37
|
-
target: { value: tempValue } as HTMLInputElement,
|
|
38
|
-
} as React.ChangeEvent<HTMLInputElement>);
|
|
39
|
-
}, [tempValue]);
|
|
40
|
-
|
|
41
24
|
return (
|
|
42
25
|
<label className={`grid gap-2 ${width}`}>
|
|
43
26
|
{label && (
|
|
@@ -51,10 +34,9 @@ export const Number: React.FC<NumberProps> = ({ options, label, ...rest }) => {
|
|
|
51
34
|
)}
|
|
52
35
|
<div className="relative flex items-center">
|
|
53
36
|
<input
|
|
37
|
+
ref={inputRef}
|
|
54
38
|
type="number"
|
|
55
|
-
className={`w-full
|
|
56
|
-
value={tempValue}
|
|
57
|
-
onChange={(e) => setTempValue(e.target.value)}
|
|
39
|
+
className={`w-full ps-4 pe-20 border-default border rounded-md bg-secondary-bg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none 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}`}
|
|
58
40
|
{...rest}
|
|
59
41
|
/>
|
|
60
42
|
<div className="absolute right-4 flex gap-2">
|
|
@@ -64,11 +46,7 @@ export const Number: React.FC<NumberProps> = ({ options, label, ...rest }) => {
|
|
|
64
46
|
tabIndex={-1}
|
|
65
47
|
disabled={rest.disabled}
|
|
66
48
|
onClick={() => {
|
|
67
|
-
|
|
68
|
-
(
|
|
69
|
-
(parseInt(tempValue) || 0) - ((rest.step as number) || 1)
|
|
70
|
-
).toString()
|
|
71
|
-
);
|
|
49
|
+
inputRef.current?.stepDown();
|
|
72
50
|
}}
|
|
73
51
|
>
|
|
74
52
|
<Icon icon="ic:round-minus" className="text-lg" />
|
|
@@ -79,11 +57,7 @@ export const Number: React.FC<NumberProps> = ({ options, label, ...rest }) => {
|
|
|
79
57
|
tabIndex={-1}
|
|
80
58
|
disabled={rest.disabled}
|
|
81
59
|
onClick={() => {
|
|
82
|
-
|
|
83
|
-
(
|
|
84
|
-
(parseInt(tempValue) || 0) + ((rest.step as number) || 1)
|
|
85
|
-
).toString()
|
|
86
|
-
);
|
|
60
|
+
inputRef.current?.stepUp();
|
|
87
61
|
}}
|
|
88
62
|
>
|
|
89
63
|
<Icon icon="ic:round-plus" className="text-lg" />
|
|
@@ -39,7 +39,7 @@ export const Password: React.FC<PasswordProps> = ({
|
|
|
39
39
|
<div className="relative flex items-center">
|
|
40
40
|
<input
|
|
41
41
|
type={show ? "text" : "password"}
|
|
42
|
-
className={`w-full
|
|
42
|
+
className={`w-full ps-4 pe-14 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}`}
|
|
43
43
|
{...rest}
|
|
44
44
|
/>
|
|
45
45
|
<button
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import React
|
|
2
|
+
import React from "react";
|
|
3
3
|
|
|
4
4
|
export interface RangeProps
|
|
5
5
|
extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
@@ -16,26 +16,8 @@ export const Range: React.FC<RangeProps> = ({
|
|
|
16
16
|
theme,
|
|
17
17
|
...rest
|
|
18
18
|
}) => {
|
|
19
|
-
const [tempValue, setTempValue] = useState("0");
|
|
20
19
|
const width = options?.width === "fit" ? "w-fit" : "w-full";
|
|
21
20
|
|
|
22
|
-
useEffect(() => {
|
|
23
|
-
if (rest.value) {
|
|
24
|
-
setTempValue(rest.value as string);
|
|
25
|
-
return;
|
|
26
|
-
} else if (rest.defaultValue) {
|
|
27
|
-
setTempValue(rest.defaultValue as string);
|
|
28
|
-
return;
|
|
29
|
-
}
|
|
30
|
-
}, [rest.value, rest.defaultValue]);
|
|
31
|
-
|
|
32
|
-
useEffect(() => {
|
|
33
|
-
rest.onChange &&
|
|
34
|
-
rest.onChange({
|
|
35
|
-
target: { value: tempValue } as HTMLInputElement,
|
|
36
|
-
} as React.ChangeEvent<HTMLInputElement>);
|
|
37
|
-
}, [tempValue]);
|
|
38
|
-
|
|
39
21
|
return (
|
|
40
22
|
<label className={`grid gap-2 ${width}`}>
|
|
41
23
|
{label && (
|
|
@@ -54,13 +36,13 @@ export const Range: React.FC<RangeProps> = ({
|
|
|
54
36
|
theme && "border-0"
|
|
55
37
|
}`}
|
|
56
38
|
style={{ accentColor: theme }}
|
|
57
|
-
value={tempValue}
|
|
58
|
-
onChange={(e) => setTempValue(e.target.value.toString())}
|
|
59
39
|
{...rest}
|
|
60
40
|
/>
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
41
|
+
{(rest.value || rest.defaultValue) && (
|
|
42
|
+
<span className="w-7 text-right">
|
|
43
|
+
{rest.value || rest.defaultValue}
|
|
44
|
+
</span>
|
|
45
|
+
)}
|
|
64
46
|
</div>
|
|
65
47
|
</label>
|
|
66
48
|
);
|
|
@@ -158,7 +158,7 @@ export const Time: React.FC<TimeProps> = ({ options, label, ...rest }) => {
|
|
|
158
158
|
<div className="relative flex items-center">
|
|
159
159
|
<input
|
|
160
160
|
type="text"
|
|
161
|
-
className={`
|
|
161
|
+
className={`w-full ps-4 pe-14 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}`}
|
|
162
162
|
value={tempValue}
|
|
163
163
|
{...rest}
|
|
164
164
|
/>
|
|
@@ -190,16 +190,16 @@ export const Time: React.FC<TimeProps> = ({ options, label, ...rest }) => {
|
|
|
190
190
|
</button>
|
|
191
191
|
}
|
|
192
192
|
>
|
|
193
|
-
<div className="flex gap-2 w-
|
|
193
|
+
<div className="flex gap-2 w-fit overflow-auto md:overflow-clip">
|
|
194
194
|
<div
|
|
195
195
|
ref={hoursRef}
|
|
196
|
-
className="w-
|
|
196
|
+
className="w-16 h-80 overflow-auto [&::-webkit-scrollbar]:hidden"
|
|
197
197
|
>
|
|
198
198
|
{hours.map((item, index) => (
|
|
199
199
|
<button
|
|
200
200
|
key={index}
|
|
201
201
|
type="button"
|
|
202
|
-
className={`w-full my-0.5 px-4 py-2 rounded-md text-sm text-
|
|
202
|
+
className={`w-full my-0.5 px-4 py-2 rounded-md text-sm text-center text-default ${
|
|
203
203
|
tempValue.split(":")[0] === item
|
|
204
204
|
? "bg-primary-transparent cursor-default"
|
|
205
205
|
: "hover:bg-secondary-light"
|
|
@@ -219,13 +219,13 @@ export const Time: React.FC<TimeProps> = ({ options, label, ...rest }) => {
|
|
|
219
219
|
</div>
|
|
220
220
|
<div
|
|
221
221
|
ref={minutesRef}
|
|
222
|
-
className="w-
|
|
222
|
+
className="w-16 h-80 overflow-auto [&::-webkit-scrollbar]:hidden"
|
|
223
223
|
>
|
|
224
224
|
{minutes.map((item, index) => (
|
|
225
225
|
<button
|
|
226
226
|
key={index}
|
|
227
227
|
type="button"
|
|
228
|
-
className={`w-full my-0.5 px-4 py-2 rounded-md text-sm text-
|
|
228
|
+
className={`w-full my-0.5 px-4 py-2 rounded-md text-sm text-center text-default ${
|
|
229
229
|
tempValue.split(":")[1].split(" ")[0] === item
|
|
230
230
|
? "bg-primary-transparent cursor-default"
|
|
231
231
|
: "hover:bg-secondary-light "
|
|
@@ -243,12 +243,12 @@ export const Time: React.FC<TimeProps> = ({ options, label, ...rest }) => {
|
|
|
243
243
|
</button>
|
|
244
244
|
))}
|
|
245
245
|
</div>
|
|
246
|
-
<div className="w-
|
|
246
|
+
<div className="w-16 h-80 overflow-auto [&::-webkit-scrollbar]:hidden">
|
|
247
247
|
{ampm.map((item, index) => (
|
|
248
248
|
<button
|
|
249
249
|
key={index}
|
|
250
250
|
type="button"
|
|
251
|
-
className={`w-full my-0.5 px-4 py-2 rounded-md text-sm text-
|
|
251
|
+
className={`w-full my-0.5 px-4 py-2 rounded-md text-sm text-center text-default ${
|
|
252
252
|
tempValue.split(" ")[1] === item
|
|
253
253
|
? "bg-primary-transparent cursor-default"
|
|
254
254
|
: "hover:bg-secondary-light "
|
|
@@ -132,7 +132,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
|
|
|
132
132
|
>
|
|
133
133
|
<input
|
|
134
134
|
type="text"
|
|
135
|
-
className={`w-full
|
|
135
|
+
className={`w-full ps-4 pe-14 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}`}
|
|
136
136
|
placeholder={placeholder}
|
|
137
137
|
required={rest.required}
|
|
138
138
|
disabled={rest.disabled}
|
|
@@ -90,7 +90,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
|
90
90
|
<div className="relative flex items-center">
|
|
91
91
|
<div
|
|
92
92
|
ref={inputRef}
|
|
93
|
-
className={`group/button flex justify-between items-center gap-2 w-full min-h-10
|
|
93
|
+
className={`group/button flex justify-between items-center gap-2 w-full min-h-10 ps-4 pe-14 border rounded-md caret-transparent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark ${height} ${
|
|
94
94
|
disabled
|
|
95
95
|
? "bg-secondary-light cursor-default pointer-events-none"
|
|
96
96
|
: "bg-secondary-bg cursor-pointer"
|
|
@@ -150,7 +150,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
|
150
150
|
</div>
|
|
151
151
|
</div>
|
|
152
152
|
<div
|
|
153
|
-
className="absolute flex flex-wrap gap-2 h-min
|
|
153
|
+
className="absolute flex flex-wrap gap-2 h-min ps-4 pe-14 pointer-events-none"
|
|
154
154
|
style={{ width: dropdownWidth - 52 }}
|
|
155
155
|
>
|
|
156
156
|
{tempValue?.map((item) => {
|
|
@@ -43,7 +43,7 @@ export const Secret: React.FC<SecretProps> = ({
|
|
|
43
43
|
<div className="relative flex items-center">
|
|
44
44
|
<input
|
|
45
45
|
type="text"
|
|
46
|
-
className={`w-full
|
|
46
|
+
className={`w-full ps-4 pe-20 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}`}
|
|
47
47
|
value={show ? value : value ? value.slice(0, 3) + ".." : ""}
|
|
48
48
|
disabled
|
|
49
49
|
{...rest}
|
|
@@ -82,7 +82,7 @@ export const Select: React.FC<SelectProps> = ({
|
|
|
82
82
|
<input
|
|
83
83
|
ref={inputRef}
|
|
84
84
|
type="text"
|
|
85
|
-
className={`w-full
|
|
85
|
+
className={`w-full ps-4 pe-14 border rounded-md bg-secondary-bg cursor-pointer caret-transparent placeholder:duration-300 placeholder:text-slate-300 focus:placeholder:translate-x-1 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 disabled:cursor-default ${height} ${
|
|
86
86
|
openDropdown
|
|
87
87
|
? "placeholder:translate-x-1 outline-none ring-1 ring-primary shadow shadow-primary border-primary-dark"
|
|
88
88
|
: "border-default placeholder:translate-x-0"
|