add: seperate password input component

src/app/globals.css

@@ -29,7 +29,7 @@ input[type="number"] {
   -moz-appearance: textfield;
 }
 
-input[type="password"] {
+input[type="password"]:not(:placeholder-shown) {
   font-family: "irancell";
   font-style: normal;
   font-weight: normal;
@@ -91,7 +91,7 @@ input[type="password"] {
 input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0px 0px transparent inset !important;
   box-shadow: 0 0 0px 0px transparent inset !important;
-  -webkit-text-fill-color: #000 !important;
+  -webkit-text-fill-color: #b6b6b6da !important;
   background: currentColor !important;
   transition: background-color 10000s ease-in-out 0s;
 }
@@ -99,7 +99,7 @@ input:-webkit-autofill {
 input:autofill {
   -webkit-box-shadow: 0 0 0px 0px transparent inset !important;
   box-shadow: 0 0 0px 0px transparent inset !important;
-  -webkit-text-fill-color: #000 !important;
+  -webkit-text-fill-color: #b6b6b6da !important;
   background: currentColor !important;
   transition: background-color 10000s ease-in-out 0s;
 }

src/components/input/PasswordField.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import React from 'react'
+import Tooltip from '../utils/Tooltip';
+import clsx from 'clsx';
+import { EyeToggleIcon } from '../icons/EyeToggleIcon';
+import useToggle from '@/hooks/helpers/useToggle';
+import { AUTH_PAGE_ELEMENT } from '@/enums';
+
+type Props = {
+    htmlFor: string;
+    labelText?: React.ReactNode;
+    value?: string;
+    valid?: boolean
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "id">;
+
+
+function PasswordField({ onChange, htmlFor, labelText, children, valid = true, className, ...inputProps }: Props) {
+    const { state, toggle } = useToggle();
+
+    return (
+        <div
+            spellCheck={false}
+            className={`${className} ${valid ? 'border-border' : 'border-invalid'} h-11 inline-flex relative border px-3 w-full rounded-normal group focus-within:border`}>
+            <label
+                className='absolute start-2 -top-2.5 px-2 bg-inherit text-[12px] text-foreground'
+                htmlFor={htmlFor}>
+                {labelText}
+            </label>
+
+            <Tooltip content={inputProps['aria-errormessage']} hidden={!inputProps['aria-errormessage']}>
+                <input
+                    type={state ? 'text' : 'password'}
+                    onChange={onChange}
+                    className={clsx(
+                        inputProps['aria-errormessage'] && '!text-red-300',
+                        'py-2.5 pt-3.5 text-sm2 w-full outline-0 !leading-6'
+                    )}
+                    name={htmlFor}
+                    {...inputProps} />
+                <button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_PASSWORD} type='button' onClick={toggle}>
+                    <EyeToggleIcon slash={state} className="pointer-events-none" />
+                </button>
+                {children}
+            </Tooltip>
+        </div>
+    )
+}
+
+export default PasswordField