@ayseaistudio/ui-components 3.10.0 → 3.11.1

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/package.json

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