@autobusal/common 0.0.36 → 0.0.38

package/BrowseCompanyItem/styles.ts

@@ -10,7 +10,7 @@ export const Item = styled.div<{
   gap: 10px;
   align-items: center;
   flex-basis: 100%;
-  padding: 10px;
+  padding: 10px !important;
 
   ${ props => props.$column === false && css`
     background: none;

package/Password/Password.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { UseFormRegister } from 'react-hook-form';
+import { AiFillEye, AiFillEyeInvisible } from 'react-icons/ai';
+import { validate } from '@autobusal/utilities';
+import { Container } from './styles';
+
+interface Props {
+  name: string
+  t: TFunction<'common'>
+  refs: UseFormRegister<any>
+}
+
+const Password = ({ name, refs, t }: Props): JSX.Element => {
+  const [ show, setShow ] = useState<boolean>(false);
+
+  const toggle = (): void => {
+    setShow(!show)
+  };
+  
+  return (
+    <Container>
+      <input type={ show ? 'text' : 'password' } { ...refs(name, validate('required|min_length:6|max_length:20', t)) } />
+
+      { show
+        ? <AiFillEye onClick={ toggle } />
+        : <AiFillEyeInvisible onClick={ toggle } />
+      }
+    </Container>
+  );
+};
+
+export default Password;

package/Password/styles.ts

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  position: relative;
+
+  & > svg {
+    display: block;
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    width: 42px;
+    height: 36px;
+    padding: 0 11px;
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, ${ props => props.theme.inputs.background } 25%);
+    border-top-right-radius: ${ props => props.theme.borderRadius };
+    border-bottom-right-radius: ${ props => props.theme.borderRadius };
+    cursor: pointer;
+  }
+`;

package/index.ts

@@ -13,6 +13,7 @@ import Modal from './Modal/Modal';
 import Meta from './Meta';
 import Pagination from './Pagination/Pagination';
 import Passengers from './Passengers/Passengers';
+import Password from './Password/Password';
 import Policy from './Policy/Policy';
 import RouteFeature from './RouteFeature/RouteFeature';
 import RouteItem from './RouteItem/RouteItem';
@@ -35,6 +36,7 @@ export {
   Pagination,
   Paragraph,
   Passengers,
+  Password,
   Policy,
   RouteFeature,
   RouteItem

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "type": "module",
   "main": "index.ts"
 }