@ayseaistudio/ui-components 3.9.6 → 3.10.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/LoginInput/LoginInput.js +36 -10
- package/dist/LoginInput/style.css +94 -2
- package/package.json +1 -1
|
@@ -1,19 +1,16 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import PropTypes from "prop-types";
|
|
3
|
-
import { useEffect, useReducer, useState } from "react";
|
|
3
|
+
import React, { useEffect, useReducer, useState } from "react";
|
|
4
4
|
import "./style.css";
|
|
5
|
-
import { IconLayoutDashboard, IconUser, IconPassword } from "@tabler/icons-react";
|
|
5
|
+
import { IconLayoutDashboard, IconUser, IconPassword, IconEye, IconEyeOff } from "@tabler/icons-react";
|
|
6
6
|
export const LoginInput = ({ withIcon = true, placeholder = "Enter text", status = "default", className = "", icon = _jsx(IconLayoutDashboard, { size: 20, color: "#B0B0B0" }), value = "", onChange, inputType = "text", version, singleChar = false, inputRef, onKeyDown, }) => {
|
|
7
|
-
let finalIcon = icon;
|
|
8
7
|
let finalPlaceholder = placeholder;
|
|
9
8
|
let finalInputType = inputType;
|
|
10
9
|
if (version === "username") {
|
|
11
|
-
finalIcon = _jsx(IconUser, { size: 20, color: "#B0B0B0" });
|
|
12
10
|
finalPlaceholder = "Kullanıcı Adı";
|
|
13
11
|
finalInputType = "text";
|
|
14
12
|
}
|
|
15
13
|
else if (version === "password") {
|
|
16
|
-
finalIcon = _jsx(IconPassword, { size: 20, color: "#B0B0B0" });
|
|
17
14
|
finalPlaceholder = "Şifre";
|
|
18
15
|
finalInputType = "password";
|
|
19
16
|
}
|
|
@@ -21,16 +18,42 @@ export const LoginInput = ({ withIcon = true, placeholder = "Enter text", status
|
|
|
21
18
|
const [isFocused, setIsFocused] = useState(false);
|
|
22
19
|
const [inputValue, setInputValue] = useState(value);
|
|
23
20
|
const [actualType, setActualType] = useState("text");
|
|
21
|
+
const [showPassword, setShowPassword] = useState(false);
|
|
22
|
+
const hasPasswordToggle = version === "password";
|
|
23
|
+
const autoCompleteType = version === "username"
|
|
24
|
+
? "username"
|
|
25
|
+
: version === "password"
|
|
26
|
+
? "current-password"
|
|
27
|
+
: "off";
|
|
28
|
+
const inputName = version === "username"
|
|
29
|
+
? "username"
|
|
30
|
+
: version === "password"
|
|
31
|
+
? "password"
|
|
32
|
+
: "login-input";
|
|
33
|
+
const isActive = isFocused || inputValue;
|
|
34
|
+
const iconColor = isActive || state.status === "hover" ? "#888888" : "#B0B0B0";
|
|
35
|
+
let finalIcon = icon;
|
|
36
|
+
if (version === "username") {
|
|
37
|
+
finalIcon = _jsx(IconUser, { size: 20, color: iconColor });
|
|
38
|
+
}
|
|
39
|
+
else if (version === "password") {
|
|
40
|
+
finalIcon = _jsx(IconPassword, { size: 20, color: iconColor });
|
|
41
|
+
}
|
|
42
|
+
else if (icon && React.isValidElement(icon) && icon.type === IconLayoutDashboard) {
|
|
43
|
+
finalIcon = _jsx(IconLayoutDashboard, { size: 20, color: iconColor });
|
|
44
|
+
}
|
|
45
|
+
else if (icon && React.isValidElement(icon)) {
|
|
46
|
+
finalIcon = React.cloneElement(icon, { color: iconColor });
|
|
47
|
+
}
|
|
24
48
|
useEffect(() => {
|
|
25
49
|
if (version === "password") {
|
|
26
50
|
const timer = setTimeout(() => {
|
|
27
|
-
setActualType("password");
|
|
28
|
-
}, 100);
|
|
51
|
+
setActualType(showPassword ? "text" : "password");
|
|
52
|
+
}, 100);
|
|
29
53
|
return () => clearTimeout(timer);
|
|
30
54
|
}
|
|
31
|
-
}, [version]);
|
|
55
|
+
}, [version, showPassword]);
|
|
32
56
|
useEffect(() => {
|
|
33
|
-
// Sync internal state when external value changes
|
|
34
57
|
setInputValue(value || "");
|
|
35
58
|
}, [value]);
|
|
36
59
|
const handleInputChange = (e) => {
|
|
@@ -55,13 +78,16 @@ export const LoginInput = ({ withIcon = true, placeholder = "Enter text", status
|
|
|
55
78
|
if (!inputValue)
|
|
56
79
|
dispatch("blur");
|
|
57
80
|
};
|
|
81
|
+
const togglePasswordVisibility = () => {
|
|
82
|
+
setShowPassword(!showPassword);
|
|
83
|
+
};
|
|
58
84
|
return (_jsxs("div", { className: `login-input ${state.status} ${className}`, onMouseLeave: () => {
|
|
59
85
|
if (state.status !== "selected")
|
|
60
86
|
dispatch("mouse_leave");
|
|
61
87
|
}, onMouseEnter: () => {
|
|
62
88
|
if (state.status !== "selected")
|
|
63
89
|
dispatch("mouse_enter");
|
|
64
|
-
}, children: [_jsxs("div", { className: `placeholder-container ${isFocused || inputValue ? "active" : ""}`, children: [withIcon && _jsx("span", { className: "icon-container", children: finalIcon }), _jsx("label", { className: "placeholder", htmlFor: "login-input", children: finalPlaceholder })] }), _jsx("input", { id: `login-input-${version}`, className:
|
|
90
|
+
}, children: [_jsxs("div", { className: `placeholder-container ${isFocused || inputValue ? "active" : ""}`, children: [withIcon && _jsx("span", { className: "icon-container", children: finalIcon }), _jsx("label", { className: "placeholder", htmlFor: "login-input", children: finalPlaceholder })] }), _jsx("input", { id: `login-input-${version}`, className: `input-field ${hasPasswordToggle ? "with-password-toggle" : ""}`, type: version === "password" ? actualType : finalInputType, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: onKeyDown, autoComplete: autoCompleteType, autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", name: inputName, maxLength: singleChar ? 1 : undefined, ref: inputRef }), hasPasswordToggle && (_jsx("button", { type: "button", className: "password-toggle", onClick: togglePasswordVisibility, tabIndex: 0, children: showPassword ? (_jsx(IconEyeOff, { size: 24, strokeWidth: 1.5 })) : (_jsx(IconEye, { size: 24, strokeWidth: 1.5 })) }))] }));
|
|
65
91
|
};
|
|
66
92
|
function reducer(state, action) {
|
|
67
93
|
switch (action) {
|
|
@@ -19,6 +19,19 @@
|
|
|
19
19
|
background-color: rgba(36, 36, 36, 0.05);
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
+
.login-input:hover .placeholder {
|
|
23
|
+
color: #888888;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.login-input:hover .icon-container {
|
|
27
|
+
color: #888888;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.login-input:hover .icon-container svg {
|
|
31
|
+
color: #888888;
|
|
32
|
+
stroke: #888888;
|
|
33
|
+
}
|
|
34
|
+
|
|
22
35
|
.placeholder-container {
|
|
23
36
|
display: flex;
|
|
24
37
|
align-items: center;
|
|
@@ -53,7 +66,7 @@
|
|
|
53
66
|
}
|
|
54
67
|
|
|
55
68
|
.placeholder-container.active .placeholder {
|
|
56
|
-
font-size: 12px;
|
|
69
|
+
font-size: 12px;
|
|
57
70
|
color: #888888;
|
|
58
71
|
}
|
|
59
72
|
|
|
@@ -65,7 +78,12 @@
|
|
|
65
78
|
width: 100%;
|
|
66
79
|
background-color: transparent;
|
|
67
80
|
color: #242424;
|
|
68
|
-
margin:
|
|
81
|
+
margin-top: 6px;
|
|
82
|
+
padding-right: 0;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.input-field.with-password-toggle {
|
|
86
|
+
padding-right: 40px;
|
|
69
87
|
}
|
|
70
88
|
|
|
71
89
|
.input-field::placeholder {
|
|
@@ -106,4 +124,78 @@
|
|
|
106
124
|
|
|
107
125
|
.placeholder-container.active .icon-container {
|
|
108
126
|
transform: scale(0.7) translateY(-1px); /* Küçültüp yukarı taşı */
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.login-input.selected .icon-container,
|
|
130
|
+
.login-input.selected:hover .icon-container {
|
|
131
|
+
color: #888888;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.login-input.selected .icon-container svg,
|
|
135
|
+
.login-input.selected:hover .icon-container svg {
|
|
136
|
+
color: #888888;
|
|
137
|
+
stroke: #888888;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.password-toggle {
|
|
141
|
+
position: absolute;
|
|
142
|
+
right: 16px;
|
|
143
|
+
top: 54%;
|
|
144
|
+
transform: translateY(-50%);
|
|
145
|
+
background: none;
|
|
146
|
+
border: none;
|
|
147
|
+
cursor: pointer;
|
|
148
|
+
padding: 4px;
|
|
149
|
+
display: flex;
|
|
150
|
+
align-items: center;
|
|
151
|
+
justify-content: center;
|
|
152
|
+
transition: opacity 0.2s ease;
|
|
153
|
+
z-index: 1;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.password-toggle:hover {
|
|
157
|
+
opacity: 0.7;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.password-toggle:focus {
|
|
161
|
+
outline: none;
|
|
162
|
+
opacity: 0.7;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.password-toggle svg {
|
|
166
|
+
color: #b0b0b0;
|
|
167
|
+
stroke: #b0b0b0;
|
|
168
|
+
transition: color 0.2s ease, stroke 0.2s ease;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.login-input:hover .password-toggle svg,
|
|
172
|
+
.login-input.selected .password-toggle svg,
|
|
173
|
+
.login-input.selected:hover .password-toggle svg {
|
|
174
|
+
color: #888888;
|
|
175
|
+
stroke: #888888;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.input-field:-webkit-autofill,
|
|
179
|
+
.input-field:-webkit-autofill:hover,
|
|
180
|
+
.input-field:-webkit-autofill:focus {
|
|
181
|
+
-webkit-text-fill-color: #242424;
|
|
182
|
+
-webkit-box-shadow: 0 0 0 1000px transparent inset;
|
|
183
|
+
box-shadow: 0 0 0 1000px transparent inset;
|
|
184
|
+
transition: background-color 9999s ease-in-out 0s;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.login-input:has(.input-field:-webkit-autofill),
|
|
188
|
+
.login-input:has(.input-field:autofill) {
|
|
189
|
+
border-color: rgba(36, 36, 36, 0.3);
|
|
190
|
+
background-color: rgba(36, 36, 36, 0.05);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.login-input:has(.input-field:-webkit-autofill) .placeholder,
|
|
194
|
+
.login-input:has(.input-field:autofill) .placeholder,
|
|
195
|
+
.login-input:has(.input-field:-webkit-autofill) .icon-container svg,
|
|
196
|
+
.login-input:has(.input-field:autofill) .icon-container svg,
|
|
197
|
+
.login-input:has(.input-field:-webkit-autofill) .password-toggle svg,
|
|
198
|
+
.login-input:has(.input-field:autofill) .password-toggle svg {
|
|
199
|
+
color: #888888;
|
|
200
|
+
stroke: #888888;
|
|
109
201
|
}
|