fix: add phone-input

src/shared/ui/index.ts

@@ -3,3 +3,4 @@ export { Mark } from './mark';
 export { Input } from './input';
 export { AdvancedPhoneInput } from './advanced-phone-input';
 export { TextArea } from './text-area';
+export { PhoneInput } from './phone-input';

src/shared/ui/input/input.module.scss

@@ -41,6 +41,10 @@
     transition: border-color ease .5s;
   }
 
+  &_error {
+    border-color: $color-error;
+  }
+
   &_fullWidth{
     width: 100%;
   }

src/shared/ui/input/input.tsx

@@ -10,10 +10,17 @@ type InputProps = {
   className?: string;
   fullWidth?: boolean;
   variant?: 'default' | 'ghost';
+  error?: string | boolean;
 } & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 
 const Input = forwardRef(function Input(
-  { className, fullWidth = false, variant = 'default', ...props }: InputProps,
+  {
+    className,
+    fullWidth = false,
+    variant = 'default',
+    error = false,
+    ...props
+  }: InputProps,
   ref: Ref<HTMLInputElement>,
 ) {
   return (
@@ -24,6 +31,7 @@ const Input = forwardRef(function Input(
         s.Input,
         s['Input_' + variant],
         fullWidth && s.Input_fullWidth,
+        error && s.Input_error,
         className,
       )}
     />

src/shared/ui/phone-input/index.ts

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

src/shared/ui/phone-input/phone-input.tsx

@@ -1,10 +1,25 @@
 //import s from './phone-input.module.scss';
 import { Input } from '@shared/ui';
+import { useMaskito } from '@maskito/react';
+
+import { maskitoPhoneOptionsGenerator } from '@maskito/phone';
+import metadata from 'libphonenumber-js/min/metadata';
+import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+
+type PhoneInput = {
+  className?: string;
+} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+
+export default function PhoneInput({ ...props }: PhoneInput) {
+  const options = maskitoPhoneOptionsGenerator({
+    countryIsoCode: 'RU',
+    metadata,
+  });
+  const maskedInputRef = useMaskito({ options });
 
-export default function PhoneInput() {
   return (
     <>
-      <Input />
+      <Input {...props} ref={maskedInputRef} type='tel' />
     </>
   );
 }