@ayseaistudio/ui-components 3.9.6 → 3.11.0

package/dist/InputField/InputField.d.ts

@@ -11,6 +11,7 @@ interface Props {
     clearable?: boolean;
     text?: string;
     headerText?: string;
+    headerVariant?: "medium" | "bold";
     withHeader?: boolean;
     size?: "large" | "with-password-eye" | "medium" | "small" | "with-button";
     status?: "active" | "default" | "hover" | "alert" | "disabled";
@@ -19,6 +20,7 @@ interface Props {
     frameClassName?: string;
     isPassword?: boolean;
     value?: string;
+    noHoverBackground?: boolean;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     onClear?: () => void;
     onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
@@ -28,7 +30,7 @@ interface Props {
     onRequestPopupOpen?: (anchorEl: HTMLElement | null) => void;
 }
 export declare const InputField: {
-    ({ withAlertIcon, withAlertMessage, leftIcon, rightIcon, defaultValue, alertText, clearable, text, headerText, withHeader, size, status, radius, className, frameClassName, isPassword, value, onChange, onClear, onFocus, onBlur, onKeyDown, selectFromPopup, onRequestPopupOpen, }: Props): React.JSX.Element;
+    ({ withAlertIcon, withAlertMessage, leftIcon, rightIcon, defaultValue, alertText, clearable, text, headerText, headerVariant, withHeader, size, status, radius, className, frameClassName, isPassword, value, noHoverBackground, onChange, onClear, onFocus, onBlur, onKeyDown, selectFromPopup, onRequestPopupOpen, }: Props): React.JSX.Element;
     propTypes: {
         withAlertIcon: PropTypes.Requireable<boolean>;
         withAlertMessage: PropTypes.Requireable<boolean>;
@@ -38,6 +40,7 @@ export declare const InputField: {
         withRightIcon: PropTypes.Requireable<boolean>;
         text: PropTypes.Requireable<string>;
         headerText: PropTypes.Requireable<string>;
+        headerVariant: PropTypes.Requireable<string>;
         withHeader: PropTypes.Requireable<boolean>;
         size: PropTypes.Requireable<string>;
         status: PropTypes.Requireable<string>;
@@ -55,6 +58,7 @@ export declare const InputField: {
         onClear: PropTypes.Requireable<(...args: any[]) => any>;
         selectFromPopup: PropTypes.Requireable<boolean>;
         onRequestPopupOpen: PropTypes.Requireable<(...args: any[]) => any>;
+        noHoverBackground: PropTypes.Requireable<boolean>;
     };
 };
 export {};

package/dist/InputField/InputField.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import React, { useEffect, useReducer, useRef, useState } from "react";
 import "./style.css";
-import { IconEyeOff, IconEye, IconX, IconAlertSquareRounded } from "@tabler/icons-react";
+import { IconEyeOff, IconEye, IconX, IconAlertSquareRounded, IconInfoSquareRoundedFilled } from "@tabler/icons-react";
 const initialState = (size, status, radius) => ({
     size,
     status,
@@ -23,7 +23,7 @@ const reducer = (state, action) => {
             return state;
     }
 };
-export const InputField = ({ withAlertIcon = true, withAlertMessage = true, leftIcon, rightIcon, defaultValue = "", alertText = "Doldurulması zorunlu alan.", clearable = false, text = "Placeholder", headerText = "Label", withHeader = true, size = "large", status = "default", radius = "small", className, frameClassName, isPassword = false, value, onChange, onClear, onFocus, onBlur, onKeyDown, selectFromPopup = false, onRequestPopupOpen, }) => {
+export const InputField = ({ withAlertIcon = true, withAlertMessage = true, leftIcon, rightIcon, defaultValue = "", alertText = "Doldurulması zorunlu alan.", clearable = false, text = "Placeholder", headerText = "Label", headerVariant = "medium", withHeader = true, size = "large", status = "default", radius = "small", className, frameClassName, isPassword = false, value, noHoverBackground = false, onChange, onClear, onFocus, onBlur, onKeyDown, selectFromPopup = false, onRequestPopupOpen, }) => {
     const [state, dispatch] = useReducer(reducer, initialState(size, status, radius));
     const [inputValue, setInputValue] = useState(defaultValue);
     const [isPasswordVisible, setIsPasswordVisible] = useState(false);
@@ -33,7 +33,6 @@ export const InputField = ({ withAlertIcon = true, withAlertMessage = true, left
     const handleInputChange = (event) => {
         const newValue = event.target.value;
         if (selectFromPopup) {
-            // typing is disabled in select-from-popup mode
             return;
         }
         if (isControlled) {
@@ -73,7 +72,7 @@ export const InputField = ({ withAlertIcon = true, withAlertMessage = true, left
             return;
         onRequestPopupOpen?.(containerRef.current);
     };
-    // selection is handled by parent when using external popup
+    const iconColor = getStatusColor(state.status);
     return (_jsxs("div", { className: `input-field size-2-${state.size} ${className}`, ref: containerRef, onMouseLeave: () => {
             if (hasValue && isFocused)
                 return;
@@ -82,19 +81,28 @@ export const InputField = ({ withAlertIcon = true, withAlertMessage = true, left
             if (hasValue && isFocused)
                 return;
             dispatch("mouse_enter");
-        }, onClick: () => dispatch("click"), children: [withHeader && (_jsx("div", { className: `frame ${["active", "default", "disabled", "hover"].includes(state.status) ? frameClassName : ""}`, children: _jsx("div", { className: `label-2 ${state.status}`, children: headerText }) })), _jsxs("div", { className: `input-fields size-4-${state.size} status-0-${state.status}`, onClick: toggleDropdown, children: [leftIcon && React.cloneElement(leftIcon, { color: getStatusColor(state.status) }), _jsx("input", { type: isPassword ? (isPasswordVisible ? "text" : "password") : "text", placeholder: text, value: currentValue, onChange: handleInputChange, onFocus: handleFocusInternal, onBlur: handleBlurInternal, onKeyDown: onKeyDown, className: `input-field-placeholder size-${state.size} ${state.status === "alert" ? "alert" : ""}`, style: {
+        }, onClick: () => dispatch("click"), children: [withHeader && (_jsx("div", { className: `frame ${["active", "default", "disabled", "hover"].includes(state.status) ? frameClassName : ""}`, children: _jsx("div", { className: `label-2 label-2-${headerVariant} ${state.status}`, children: headerText }) })), _jsxs("div", { className: `input-fields size-4-${state.size} status-0-${state.status} ${noHoverBackground ? "no-hover-bg" : ""}`, onClick: toggleDropdown, children: [leftIcon &&
+                        React.cloneElement(leftIcon, {
+                            color: iconColor,
+                            style: { ...(leftIcon.props?.style || {}), color: iconColor },
+                        }), _jsx("input", { type: isPassword ? (isPasswordVisible ? "text" : "password") : "text", placeholder: text, value: currentValue, onChange: handleInputChange, onFocus: handleFocusInternal, onBlur: handleBlurInternal, onKeyDown: onKeyDown, className: `input-field-placeholder size-${state.size} ${state.status === "alert" ? "alert" : ""}`, style: {
                             backgroundColor: "transparent",
                             border: "none",
                             flex: 1,
                             minWidth: 0,
                             outline: "none",
                             padding: "0",
-                        }, readOnly: selectFromPopup }), clearable && !!currentValue && currentValue.length > 0 && (_jsx(IconX, { stroke: 1.5, className: "button-clear", color: getStatusColor(state.status), onClick: handleClear })), rightIcon && isPassword && (isPasswordVisible ? (_jsx(IconEyeOff, { stroke: 1.5, className: "button-password-eye", color: getStatusColor(state.status), onClick: () => setIsPasswordVisible(!isPasswordVisible) })) : (_jsx(IconEye, { stroke: 1.5, className: "button-password-eye", color: getStatusColor(state.status), onClick: () => setIsPasswordVisible(!isPasswordVisible) }))), rightIcon && React.cloneElement(rightIcon, { color: getStatusColor(state.status) })] }), false, state.status === "alert" && withAlertMessage && (_jsxs("div", { className: "frame-2", children: [withAlertIcon && _jsx(IconAlertSquareRounded, { size: 20, stroke: 1.5 }), _jsx("div", { className: "doldurulmas-zorunlu", children: alertText })] }))] }));
+                        }, readOnly: selectFromPopup }), clearable && !!currentValue && currentValue.length > 0 && (_jsx(IconX, { stroke: 1.5, className: "button-clear", color: getStatusColor(state.status), onClick: handleClear })), rightIcon && isPassword && (isPasswordVisible ? (_jsx(IconEyeOff, { stroke: 1.5, className: "button-password-eye", color: getStatusColor(state.status), onClick: () => setIsPasswordVisible(!isPasswordVisible) })) : (_jsx(IconEye, { stroke: 1.5, className: "button-password-eye", color: getStatusColor(state.status), onClick: () => setIsPasswordVisible(!isPasswordVisible) }))), rightIcon &&
+                        React.cloneElement(rightIcon, {
+                            color: iconColor,
+                            style: { ...(rightIcon.props?.style || {}), color: iconColor },
+                        })] }), false, state.status === "alert" && withAlertMessage && (_jsxs("div", { className: "frame-2", children: [withAlertIcon &&
+                        (noHoverBackground ? (_jsx(IconInfoSquareRoundedFilled, { size: 12, className: "icons-1019", color: "rgba(255, 55, 55, 1)" })) : (_jsx(IconAlertSquareRounded, { size: 20, stroke: 1.5 }))), _jsx("div", { className: `doldurulmas-zorunlu ${noHoverBackground ? "doldurulmas-zorunlu-variant" : ""}`, children: alertText })] }))] }));
 };
 const getStatusColor = (status) => {
     switch (status) {
         case "hover":
-            return "rgba(136, 136, 136, 1)";
+            return "rgba(48, 48, 48, 1)";
         case "active":
             return "rgba(48, 48, 48, 1)";
         case "disabled":
@@ -115,6 +123,7 @@ InputField.propTypes = {
     withRightIcon: PropTypes.bool,
     text: PropTypes.string,
     headerText: PropTypes.string,
+    headerVariant: PropTypes.oneOf(["medium", "bold"]),
     withHeader: PropTypes.bool,
     size: PropTypes.oneOf(["large", "with-password-eye", "medium", "small", "with-button"]),
     status: PropTypes.oneOf(["active", "default", "hover", "alert", "disabled"]),
@@ -132,4 +141,5 @@ InputField.propTypes = {
     onClear: PropTypes.func,
     selectFromPopup: PropTypes.bool,
     onRequestPopupOpen: PropTypes.func,
+    noHoverBackground: PropTypes.bool,
 };

package/dist/InputField/style.css

@@ -12,7 +12,7 @@
   flex: 0 0 auto;
   gap: 10px;
   justify-content: center;
-  padding: 0px 8px;
+  padding: 0px 4px;
   position: relative;
 }
 
@@ -28,6 +28,15 @@
   position: relative;
 }
 
+.input-field .label-2-bold {
+  font-family: var(--b2-bold-font-family);
+  font-size: var(--b2-bold-font-size);
+  font-style: var(--b2-bold-font-style);
+  font-weight: var(--b2-bold-font-weight);
+  letter-spacing: var(--b2-bold-letter-spacing);
+  line-height: var(--b2-bold-line-height);
+}
+
 .input-field .input-fields {
   align-items: center;
   border-radius: 12px;
@@ -173,6 +182,10 @@
   width: fit-content;
 }
 
+.input-field .doldurulmas-zorunlu-variant {
+  color: rgba(255, 55, 55, 1);
+}
+
 .input-field.size-2-with-password-eye {
   display: inline-flex;
 }
@@ -267,6 +280,12 @@
   border-color: #2424241a;
 }
 
+.input-field .input-fields.status-0-hover.no-hover-bg,
+.input-field .input-fields.status-0-active.no-hover-bg {
+  background-color: transparent;
+  border-color: #2424244c;
+}
+
 .input-field.size-2-with-password-eye .frame {
   width: 241px;
 }

package/dist/LoginInput/LoginInput.js

@@ -1,19 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
-import { useEffect, useReducer, useState } from "react";
+import React, { useEffect, useReducer, useState } from "react";
 import "./style.css";
-import { IconLayoutDashboard, IconUser, IconPassword } from "@tabler/icons-react";
+import { IconLayoutDashboard, IconUser, IconPassword, IconEye, IconEyeOff } from "@tabler/icons-react";
 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, }) => {
-    let finalIcon = icon;
     let finalPlaceholder = placeholder;
     let finalInputType = inputType;
     if (version === "username") {
-        finalIcon = _jsx(IconUser, { size: 20, color: "#B0B0B0" });
         finalPlaceholder = "Kullanıcı Adı";
         finalInputType = "text";
     }
     else if (version === "password") {
-        finalIcon = _jsx(IconPassword, { size: 20, color: "#B0B0B0" });
         finalPlaceholder = "Şifre";
         finalInputType = "password";
     }
@@ -21,16 +18,42 @@ export const LoginInput = ({ withIcon = true, placeholder = "Enter text", status
     const [isFocused, setIsFocused] = useState(false);
     const [inputValue, setInputValue] = useState(value);
     const [actualType, setActualType] = useState("text");
+    const [showPassword, setShowPassword] = useState(false);
+    const hasPasswordToggle = version === "password";
+    const autoCompleteType = version === "username"
+        ? "username"
+        : version === "password"
+            ? "current-password"
+            : "off";
+    const inputName = version === "username"
+        ? "username"
+        : version === "password"
+            ? "password"
+            : "login-input";
+    const isActive = isFocused || inputValue;
+    const iconColor = isActive || state.status === "hover" ? "#888888" : "#B0B0B0";
+    let finalIcon = icon;
+    if (version === "username") {
+        finalIcon = _jsx(IconUser, { size: 20, color: iconColor });
+    }
+    else if (version === "password") {
+        finalIcon = _jsx(IconPassword, { size: 20, color: iconColor });
+    }
+    else if (icon && React.isValidElement(icon) && icon.type === IconLayoutDashboard) {
+        finalIcon = _jsx(IconLayoutDashboard, { size: 20, color: iconColor });
+    }
+    else if (icon && React.isValidElement(icon)) {
+        finalIcon = React.cloneElement(icon, { color: iconColor });
+    }
     useEffect(() => {
         if (version === "password") {
             const timer = setTimeout(() => {
-                setActualType("password");
-            }, 100); // DOM renderlandıktan kısa süre sonra değiştir
+                setActualType(showPassword ? "text" : "password");
+            }, 100);
             return () => clearTimeout(timer);
         }
-    }, [version]);
+    }, [version, showPassword]);
     useEffect(() => {
-        // Sync internal state when external value changes
         setInputValue(value || "");
     }, [value]);
     const handleInputChange = (e) => {
@@ -55,13 +78,16 @@ export const LoginInput = ({ withIcon = true, placeholder = "Enter text", status
         if (!inputValue)
             dispatch("blur");
     };
+    const togglePasswordVisibility = () => {
+        setShowPassword(!showPassword);
+    };
     return (_jsxs("div", { className: `login-input ${state.status} ${className}`, onMouseLeave: () => {
             if (state.status !== "selected")
                 dispatch("mouse_leave");
         }, onMouseEnter: () => {
             if (state.status !== "selected")
                 dispatch("mouse_enter");
-        }, 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", type: version === "password" ? actualType : finalInputType, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: onKeyDown, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", name: `input-${version}-${Math.random().toString(36).substring(2, 15)}`, maxLength: singleChar ? 1 : undefined, ref: inputRef })] }));
+        }, 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 })) }))] }));
 };
 function reducer(state, action) {
     switch (action) {

package/dist/LoginInput/style.css

@@ -19,6 +19,19 @@
   background-color: rgba(36, 36, 36, 0.05);
 }
 
+.login-input:hover .placeholder {
+  color: #888888;
+}
+
+.login-input:hover .icon-container {
+  color: #888888;
+}
+
+.login-input:hover .icon-container svg {
+  color: #888888;
+  stroke: #888888;
+}
+
 .placeholder-container {
   display: flex;
   align-items: center;
@@ -53,7 +66,7 @@
 }
 
 .placeholder-container.active .placeholder {
-  font-size: 12px; /* Placeholder yazı boyutu küçültüldü */
+  font-size: 12px;
   color: #888888;
 }
 
@@ -65,7 +78,12 @@
   width: 100%;
   background-color: transparent;
   color: #242424;
-  margin: 0; /* Varsayılan margin'i kaldır */
+  margin-top: 6px;
+  padding-right: 0;
+}
+
+.input-field.with-password-toggle {
+  padding-right: 40px;
 }
 
 .input-field::placeholder {
@@ -106,4 +124,78 @@
 
 .placeholder-container.active .icon-container {
   transform: scale(0.7) translateY(-1px); /* Küçültüp yukarı taşı */
+}
+
+.login-input.selected .icon-container,
+.login-input.selected:hover .icon-container {
+  color: #888888;
+}
+
+.login-input.selected .icon-container svg,
+.login-input.selected:hover .icon-container svg {
+  color: #888888;
+  stroke: #888888;
+}
+
+.password-toggle {
+  position: absolute;
+  right: 16px;
+  top: 54%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.2s ease;
+  z-index: 1;
+}
+
+.password-toggle:hover {
+  opacity: 0.7;
+}
+
+.password-toggle:focus {
+  outline: none;
+  opacity: 0.7;
+}
+
+.password-toggle svg {
+  color: #b0b0b0;
+  stroke: #b0b0b0;
+  transition: color 0.2s ease, stroke 0.2s ease;
+}
+
+.login-input:hover .password-toggle svg,
+.login-input.selected .password-toggle svg,
+.login-input.selected:hover .password-toggle svg {
+  color: #888888;
+  stroke: #888888;
+}
+
+.input-field:-webkit-autofill,
+.input-field:-webkit-autofill:hover,
+.input-field:-webkit-autofill:focus {
+  -webkit-text-fill-color: #242424;
+  -webkit-box-shadow: 0 0 0 1000px transparent inset;
+  box-shadow: 0 0 0 1000px transparent inset;
+  transition: background-color 9999s ease-in-out 0s;
+}
+
+.login-input:has(.input-field:-webkit-autofill),
+.login-input:has(.input-field:autofill) {
+  border-color: rgba(36, 36, 36, 0.3);
+  background-color: rgba(36, 36, 36, 0.05);
+}
+
+.login-input:has(.input-field:-webkit-autofill) .placeholder,
+.login-input:has(.input-field:autofill) .placeholder,
+.login-input:has(.input-field:-webkit-autofill) .icon-container svg,
+.login-input:has(.input-field:autofill) .icon-container svg,
+.login-input:has(.input-field:-webkit-autofill) .password-toggle svg,
+.login-input:has(.input-field:autofill) .password-toggle svg {
+  color: #888888;
+  stroke: #888888;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ayseaistudio/ui-components",
-  "version": "3.9.6",
+  "version": "3.11.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",