WALL-2169: Base Components - Input (binary-com#10743)

* chore: added Wallet TextField component

* fix: added hover affects, helper message and character counter

* fix: resolve comments

* fix: resolve comments

* fix: remove ...rest

* fix: resolve comments

* fix: updated colors

packages/wallets/src/components/Base/WalletText/WalletText.module.css

@@ -135,6 +135,10 @@
         color: #000000;
     }
 
+    &-color-less-prominent {
+        color: #999999;
+    }
+
     &-color-red {
         color: #ff444f;
     }

packages/wallets/src/components/Base/WalletTextField/WalletTextField.modules.css

@@ -0,0 +1,82 @@
+.wallets-textfield {
+    min-width: 12rem;
+    max-width: 28rem;
+    position: relative;
+
+    &__content {
+        height: 4rem;
+        width: 100%;
+        border-radius: 0.4rem;
+        padding: 1rem 1.6rem;
+        border: 1px solid var(--system-light-5-active-background, #d6dadb);
+        background: var(--system-light-8-primary-background, #fff);
+        display: inline-flex;
+        gap: 1.6rem;
+        align-items: center;
+        transition: border-color 0.2s;
+
+        &:hover {
+            border-color: var(--system-light-3-less-prominent-text, #999);
+        }
+    }
+
+    &__content:has(&__field:focus) {
+        border: 1px solid var(--brand-blue, #85acb0);
+    }
+
+    &__icon {
+        margin: auto;
+        width: 1.6rem;
+        height: 1.6rem;
+    }
+
+    &__message-container {
+        height: 2rem;
+        padding: 0.2rem 0rem 0rem 1.6rem;
+        width: 100%;
+    }
+
+    &__field {
+        font-family: inherit;
+        outline: 0;
+        font-size: 1.4rem;
+        color: var(--system-light-2-general-text, #333);
+        transition: border-color 0.2s;
+        flex: 1;
+    }
+
+    &__field::placeholder {
+        color: transparent;
+    }
+
+    &__field:placeholder-shown ~ &__label {
+        font-size: 1.4rem;
+        cursor: text;
+        top: 20%;
+        padding: 0;
+    }
+
+    &__field:placeholder-shown ~ &__label--with-icon {
+        left: 4.4rem;
+    }
+
+    label,
+    &__field:focus ~ &__label {
+        position: absolute;
+        top: -10%;
+        display: block;
+        transition: 0.2s;
+        font-size: 1rem;
+        color: var(--system-light-3-less-prominent-text, #999);
+        background: var(--system-light-8-primary-background, #fff);
+        padding-inline: 0.4rem;
+        left: 1.6rem;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+
+    &__field:focus ~ &__label {
+        color: var(--brand-blue, #85acb0);
+    }
+}

packages/wallets/src/components/Base/WalletTextField/WalletTextField.tsx

@@ -0,0 +1,81 @@
+import React, { ChangeEvent, ComponentProps, ReactElement, useState } from 'react';
+import WalletText from '../WalletText/WalletText';
+import styles from './WalletTextField.modules.css';
+
+interface WalletTextFieldProps {
+    defaultValue?: string;
+    helperMessage?: string;
+    icon?: ReactElement;
+    id?: ComponentProps<'input'>['id'];
+    label?: string;
+    leftIcon?: React.ReactNode;
+    maxLength?: ComponentProps<'input'>['maxLength'];
+    onChange?: ComponentProps<'input'>['onChange'];
+    showMessage?: boolean;
+}
+
+type MessageContainerProps = {
+    helperMessage?: WalletTextFieldProps['helperMessage'];
+    maxLength?: WalletTextFieldProps['maxLength'];
+};
+
+const WalletTextField: React.FC<WalletTextFieldProps> = ({
+    defaultValue = '',
+    helperMessage,
+    icon,
+    id = 'wallet-textfield',
+    label,
+    maxLength,
+    onChange,
+    showMessage = false,
+}) => {
+    const [value, setValue] = useState(defaultValue);
+
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+        const newValue = e.target.value;
+        setValue(newValue);
+        onChange?.(e);
+    };
+
+    const MessageContainer: React.FC<MessageContainerProps> = ({ helperMessage, maxLength }) => (
+        <>
+            {helperMessage && (
+                <WalletText color='less-prominent' lineHeight='sm' size='xs' style={{ float: 'left' }}>
+                    {helperMessage}
+                </WalletText>
+            )}
+            {maxLength && (
+                <WalletText align='right' color='less-prominent' lineHeight='sm' size='xs' style={{ float: 'right' }}>
+                    {value.length} / {maxLength}
+                </WalletText>
+            )}
+        </>
+    );
+
+    return (
+        <div className={styles['wallets-textfield']}>
+            <div className={styles['wallets-textfield__content']}>
+                <input
+                    className={styles['wallets-textfield__field']}
+                    id={id}
+                    maxLength={maxLength}
+                    onChange={handleChange}
+                    placeholder={label}
+                    type='text'
+                    value={value}
+                />
+                {label && (
+                    <label className={styles['wallets-textfield__label']} htmlFor={id}>
+                        {label}
+                    </label>
+                )}
+                {icon && <div className={styles['wallets-textfield__icon']}>{icon}</div>}
+            </div>
+            <div className={styles['wallets-textfield__message-container']}>
+                {showMessage && <MessageContainer helperMessage={helperMessage} maxLength={maxLength} />}
+            </div>
+        </div>
+    );
+};
+
+export default WalletTextField;

packages/wallets/src/components/Base/WalletTextField/index.ts

@@ -0,0 +1 @@
+export { default as WalletTextField } from './WalletTextField';

packages/wallets/src/components/Base/index.ts

@@ -6,3 +6,4 @@ export * from './Tabs';
 export * from './WalletButton';
 export * from './WalletClipboard';
 export * from './WalletText';
+export * from './WalletTextField';