mitre-form-component 0.0.37 → 0.0.39

package/README.md

@@ -47,11 +47,17 @@ import { MitreFormComponent } from "mitre-form-component-next";
   utm_medium="cpc" //[Opcional] Apenas um exemplo. Definir com MKT ou extrair da URL
   utm_campaign="mitre" //[Opcional] Apenas um exemplo. Definir com MKT ou extrair da URL
   utm_term="mitre" //[Opcional] Apenas um exemplo. Definir com MKT ou extrair da URL
-  showHeader={true}  //[Opcional]
-  colorPrimary="#FF5733"  //[Opcional]
-  textColor="#ffffff"  //[Opcional]
-  backgroundColor="#000"  //[Opcional]
+  showHeader={true}  //[Opcional] Se irá exibir ou não o cabeçalho com "Atendimento por Mensagem - Informe seus dados e retornaremos a mensagem."
+  backgroundColor="#000"  //[Opcional] 
+  textColor="#ffffff"  //[Opcional] 
+  buttonBackgroundColor="#FF5733"
+  buttonTextColor="#FFF" // [Opcional]
   innerPadding="0.2rem"  //[Opcional]
+  inputBackgroundColor="#000"  //[Opcional]
+  inputBorderColor="#000"  //[Opcional]
+  inputFocusBorderColor="#76B"  //[Opcional]
+  inputPlaceholderColor="#FFF" //[Opcional]
+  inputTextColor="#FFF"  //[Opcional]
 />;
 ```
 
@@ -102,10 +108,16 @@ O `MitreFormComponent` aceita as seguintes props:
 - **`utm_campaign`** (opcional, string): Parâmetro UTM de nome da campanha (ex: `'mitre'`).
 - **`utm_term`** (opcional, string): Parâmetro UTM de termo da campanha (ex: `'mitre'`).
 - **`showHeader`** (opcional, boolean): Controla se o cabeçalho será mostrado. Padrão: `false`.
-- **`colorPrimary`** (opcional, string): Cor primária do componente. Exemplo: `#FF5733`.
-- **`textColor`** (opcional, string): Cor do texto do componente. Exemplo: `#ffffff`.
-- **`backgroundColor`** (opcional, string): Cor do fundo do componente. Exemplo: `#CECECE`.
-- **`innerPadding`** (opcional, string): Espaçamento interno do componente. Exemplo: `1rem`.
+- **`backgroundColor`** (opcional, string): Cor de fundo do formulário. Padrão: `#CECECE`.
+- **`textColor`** (opcional, string): Cor dos textos do cabeçalho, do label dos inputs e do texto de privacidade. Padrão: `#2F2F2F`.
+- **`buttonBackgroundColor`** (opcional, string): Define a cor de fundo do botão. Padrão: `#F6C76B`.
+- **`buttonTextColor`** (opcional, string): Define a cor do texto do botão. Padrão: `#2F2F2F`.
+- **`innerPadding`** (opcional, string): Espaçamento interno do componente com relação às bordas. Padrão `1rem`.
+- **`inputBackgroundColor`** (opcional, string): Cor de fundo do input. Padrão: `#FFF`.
+- **`inputBorderColor`** (opcional, string): Cor da borda do input. Padrão: `transparent`.
+- **`inputFocusBorderColor`** (opcional, string): Cor da borda do input quando selecionado. Padrão: `#F6C76B`.
+- **`inputPlaceholderColor`** (opcional, string): Cor do placeholder do input. Padrão: `#B6B6B6`.
+- **`inputTextColor`** (opcional, string): Cor do texto do input. Padrão: `#2F2F2F`.
 
 ---
 

package/dist/index.cjs

@@ -85,7 +85,7 @@ var FormContainer = import_styled_components.default.div`
   overflow-x: hidden;
   overflow-y: auto;
 
-  background: ${(props) => props.$backgroundColor || " #cecece"};
+  background: ${(props) => props.$backgroundColor || "var(--gray-180)"};
 
   padding: ${(props) => props.$innerPadding || "1rem"};
 
@@ -128,7 +128,6 @@ var Form = import_styled_components.default.form`
   }
 
   input {
-    background: white;
     margin-bottom: 0.75rem;
   }
 
@@ -196,6 +195,7 @@ var GlobalStyles = import_styled_components2.createGlobalStyle`
     --gray-60: #8F8F8F;
     --gray-100: #B6B6B6;
     --gray-150: #B9B9B9;
+    --gray-180: #CECECE;
     --gray-200: #D2D2D2;
     --gray-300: #EBEBEB;
     --gray-400: #ECECEC;
@@ -208,6 +208,8 @@ var GlobalStyles = import_styled_components2.createGlobalStyle`
     --green:#57C06E;
     --green-2:#2DCE68;
     --blue:#007BFF;
+
+    --transparent: transparent;
   }
 
   * {
@@ -394,33 +396,33 @@ var Input = import_styled_components3.default.input`
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.5rem;
-  background: var(--gray-500);
-  color: var(--black);
+  background: ${(props) => props.$backgroundColor || "var(--white)"};
+  color: ${(props) => props.$textColor || "var(--black)"};
   padding: 0.5rem;
   border-radius: 0.125rem;
-  border: 1px solid transparent;
+  border: 1px solid ${(props) => props.$borderColor || "transparent"};
   display: block;
   height: 3.125rem;
   width: 100%;
 
   &:focus {
     border-radius: 0.125rem;
-    border: 2px solid ${(props) => props.$bordercolor || "var(--yellow-500)"};
+    border: 2px solid ${(props) => props.$focusBorderColor || "var(--yellow-500)"};
     outline: none;
   }
 
   &::placeholder {
     font-size: 1rem;
     line-height: 1.5rem;
-    color: #b6b6b6;
+    color: ${(props) => props.$placeholderColor || "var(--gray-100)"};
     font-weight: 800;
   }
 
   /* Autofill styles */
   &:-webkit-autofill {
-    background: var(--gray-500) !important;
-    color: var(--black) !important;
-    -webkit-text-fill-color: var(--black) !important;
+    background: ${(props) => props.$backgroundColor || "var(--white)"} !important;
+    color: ${(props) => props.$textColor || "var(--black)"} !important;
+    -webkit-text-fill-color: ${(props) => props.$textColor || "var(--black)"} !important;
     transition: background-color 5000s ease-in-out 0s; /* Prevent flashing */
   }
 
@@ -466,7 +468,21 @@ var FormControl = import_styled_components3.default.div.withConfig({
 
 // src/components/Input/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var InputBase = ({ id, label, error, showErrorMessage = true, borderColor, textColor, mask = "", type = "text", ...rest }, ref) => {
+var InputBase = ({
+  id,
+  label,
+  error,
+  showErrorMessage = true,
+  labelTextColor,
+  backgroundColor,
+  borderColor,
+  focusBorderColor,
+  inputPlaceholderColor,
+  inputTextColor,
+  mask = "",
+  type = "text",
+  ...rest
+}, ref) => {
   const handleKeyUp = (0, import_react3.useCallback)(
     (e) => {
       if (mask === "cep") cep(e);
@@ -477,16 +493,20 @@ var InputBase = ({ id, label, error, showErrorMessage = true, borderColor, textC
     [mask]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormControl, { isInvalid: !!error, children: [
-    !!label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormLabel, { htmlFor: id, $textColor: textColor, children: label }),
+    !!label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormLabel, { htmlFor: id, $textColor: labelTextColor, children: label }),
     !mask ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Input,
       {
         id,
         ref,
         type,
-        $bordercolor: borderColor,
         "aria-invalid": !!error && showErrorMessage ? "true" : "false",
         autoComplete: rest.autoComplete || "on",
+        $backgroundColor: backgroundColor,
+        $borderColor: borderColor,
+        $focusBorderColor: focusBorderColor,
+        $placeholderColor: inputPlaceholderColor,
+        $textColor: inputTextColor,
         ...rest
       }
     ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -495,10 +515,14 @@ var InputBase = ({ id, label, error, showErrorMessage = true, borderColor, textC
         id,
         ref,
         type,
-        $bordercolor: borderColor,
         "aria-invalid": !!error && showErrorMessage ? "true" : "false",
-        onKeyUp: handleKeyUp,
         autoComplete: rest.autoComplete || "on",
+        onKeyUp: handleKeyUp,
+        $backgroundColor: backgroundColor,
+        $borderColor: borderColor,
+        $focusBorderColor: focusBorderColor,
+        $placeholderColor: inputPlaceholderColor,
+        $textColor: inputTextColor,
         ...rest
       }
     ),
@@ -639,7 +663,7 @@ function Button2({
   isSubmitting = false,
   submittingMessage = "",
   disabled = false,
-  color = "#2F2F2F",
+  color = "var(--black)",
   ...rest
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -814,13 +838,19 @@ var FormLabel2 = import_styled_components6.default.label`
 var StyledPhoneInput = (0, import_styled_components6.default)(import_react_international_phone.PhoneInput)`
   width: 100%;
   height: 3.125rem;
-  background: var(--gray-500);
+  background: ${(props) => props.$backgroundColor || "var(--white)"};
   font-family: "Montserrat", sans-serif;
+  border: 1px solid ${(props) => props.$borderColor || "transparent"};
+  border-radius: 0.125rem;
 
   &:focus-within {
     border-radius: 0.125rem;
-    border: 2px solid ${(props) => props.$bordercolor || "var(--yellow-500)"};
+    border: 2px solid ${(props) => props.$focusBorderColor || "var(--yellow-500)"};
     outline: none;
+
+    .react-international-phone-country-selector-button {
+      border-right: 1px solid ${(props) => props.$focusBorderColor || "var(--yellow-500)"};
+    }
   }
 
   /* Style for the inner phone input container */
@@ -833,14 +863,14 @@ var StyledPhoneInput = (0, import_styled_components6.default)(import_react_inter
     font-family: "Montserrat", sans-serif;
     font-size: 1rem;
     font-weight: 500;
-    color: var(--black);
-    background: var(--white);
+    color: ${(props) => props.$textColor || "var(--black)"};
+    background: ${(props) => props.$backgroundColor || "var(--white)"};
   }
 
   /* Style for the country selector button */
   .react-international-phone-country-selector-button {
     height: 100%;
-    background: var(--white);
+    background: ${(props) => props.$backgroundColor || "var(--white)"};
     display: flex;
     align-items: center;
     justify-content: center;
@@ -850,7 +880,7 @@ var StyledPhoneInput = (0, import_styled_components6.default)(import_react_inter
     cursor: pointer;
     outline: none;
     border: none;
-    border-right: 2px solid var(--gray-300);
+    border-right: 1px solid ${(props) => props.$borderColor || "var(--transparent)"};
   }
 
   /* Style for the input itself */
@@ -859,13 +889,13 @@ var StyledPhoneInput = (0, import_styled_components6.default)(import_react_inter
     height: 100%;
     padding: 0 0.5rem;
     margin: 0;
-    background: var(--white);
+    background: ${(props) => props.$backgroundColor || "var(--white)"};
     font-family: "Montserrat", sans-serif;
     font-style: normal;
     font-weight: 500;
     font-size: 1rem;
     line-height: 1.5rem;
-    color: var(--black);
+    color: ${(props) => props.$textColor || "var(--black)"};
     outline: none;
     border: none;
     border-radius: 0.125rem;
@@ -873,13 +903,13 @@ var StyledPhoneInput = (0, import_styled_components6.default)(import_react_inter
     &::placeholder {
       font-size: 1rem;
       line-height: 1.5rem;
-      color: #b6b6b6;
+      color: ${(props) => props.$placeholderColor || "var(--gray-100)"};
       font-weight: 800;
     }
 
     &:-webkit-autofill {
-      background: var(--gray-500) !important;
-      -webkit-text-fill-color: var(--black) !important;
+      background: ${(props) => props.$backgroundColor || "var(--white)"} !important;
+      -webkit-text-fill-color: ${(props) => props.$textColor || "var(--black)"} !important;
       transition: background-color 5000s ease-in-out 0s;
     }
 
@@ -926,14 +956,33 @@ var FormControl2 = import_styled_components6.default.div.withConfig({
           }
         `};
     }
+
+    .react-international-phone-country-selector-button {
+      ${(props) => props.isInvalid && import_styled_components6.css`
+          border-right: 1px solid var(--red);
+        `};
+    }
   }
 `;
 
 // src/components/PhoneInput/index.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var PhoneInputBase = ({ id, label, error, showErrorMessage = true, borderColor, textColor, value, ...rest }, ref) => {
+var PhoneInputBase = ({
+  id,
+  label,
+  error,
+  showErrorMessage = true,
+  labelTextColor,
+  backgroundColor,
+  borderColor,
+  focusBorderColor,
+  inputPlaceholderColor,
+  inputTextColor,
+  value,
+  ...rest
+}, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(FormControl2, { isInvalid: !!error, children: [
-    !!label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FormLabel2, { htmlFor: id, $textColor: textColor, children: label }),
+    !!label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FormLabel2, { htmlFor: id, $textColor: labelTextColor, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       StyledPhoneInput,
       {
@@ -942,7 +991,6 @@ var PhoneInputBase = ({ id, label, error, showErrorMessage = true, borderColor,
         disableCountryGuess: true,
         disableDialCodeAndPrefix: true,
         showDisabledDialCodeAndPrefix: false,
-        $bordercolor: borderColor,
         placeholder: rest.placeholder,
         "aria-invalid": !!error && showErrorMessage ? "true" : "false",
         value: String(value),
@@ -961,7 +1009,12 @@ var PhoneInputBase = ({ id, label, error, showErrorMessage = true, borderColor,
           required: rest.required,
           autoFocus: rest.autoFocus,
           autoComplete: rest.autoComplete || "tel"
-        }
+        },
+        $backgroundColor: backgroundColor,
+        $borderColor: borderColor,
+        $focusBorderColor: focusBorderColor,
+        $placeholderColor: inputPlaceholderColor,
+        $textColor: inputTextColor
       }
     ),
     !!error && showErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FormErrorMessage2, { "data-testid": "error-message", children: typeof error === "string" ? error : error?.message })
@@ -1005,10 +1058,16 @@ var MitreFormComponent = import_react6.default.forwardRef(({
   utm_campaign,
   utm_term,
   showHeader = true,
-  colorPrimary = "#F6C76B",
-  textColor = "#2F2F2F",
-  backgroundColor = "#CECECE",
-  innerPadding = "1rem"
+  backgroundColor = "var(--gray-180)",
+  textColor = "var(--black)",
+  buttonBackgroundColor = "#F6C76B",
+  buttonTextColor = "var(--black)",
+  innerPadding = "1rem",
+  inputBackgroundColor = "var(--white)",
+  inputBorderColor = "var(--transparent)",
+  inputFocusBorderColor = "var(--yellow-500)",
+  inputPlaceholderColor = "var(--gray-100)",
+  inputTextColor = "var(--black)"
 }, ref) => {
   const [loading, setIsLoading] = (0, import_react6.useState)(false);
   const { error, handleError, clearError } = useError();
@@ -1112,11 +1171,15 @@ var MitreFormComponent = import_react6.default.forwardRef(({
             label: "Nome *",
             placeholder: "Digite seu nome",
             ...register("name"),
-            borderColor: colorPrimary,
-            textColor,
             error: errors.name?.message,
             autoComplete: "name",
-            required: true
+            required: true,
+            labelTextColor: textColor,
+            backgroundColor: inputBackgroundColor,
+            borderColor: inputBorderColor,
+            focusBorderColor: inputFocusBorderColor,
+            inputPlaceholderColor,
+            inputTextColor
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -1127,11 +1190,15 @@ var MitreFormComponent = import_react6.default.forwardRef(({
             type: "email",
             placeholder: "exemplo@email.com",
             ...register("email"),
-            borderColor: colorPrimary,
-            textColor,
             error: errors.email?.message,
             autoComplete: "email",
-            required: true
+            required: true,
+            labelTextColor: textColor,
+            backgroundColor: inputBackgroundColor,
+            borderColor: inputBorderColor,
+            focusBorderColor: inputFocusBorderColor,
+            inputPlaceholderColor,
+            inputTextColor
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -1149,13 +1216,17 @@ var MitreFormComponent = import_react6.default.forwardRef(({
                   id: "phone",
                   label: "Telefone *",
                   placeholder: "(11) 00000-0000",
-                  borderColor: colorPrimary,
-                  textColor,
                   error: errorMsg,
                   required: true,
                   value: field.value.phone,
                   onChange: field.onChange,
-                  name: field.name
+                  name: field.name,
+                  labelTextColor: textColor,
+                  backgroundColor: inputBackgroundColor,
+                  borderColor: inputBorderColor,
+                  focusBorderColor: inputFocusBorderColor,
+                  inputPlaceholderColor,
+                  inputTextColor
                 }
               );
             }
@@ -1163,7 +1234,7 @@ var MitreFormComponent = import_react6.default.forwardRef(({
           formKey
         ),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ButtonContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button2, { bgColor: colorPrimary, color: textColor, type: "submit", isSubmitting: loading, children: "Enviar mensagem" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ButtonContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button2, { bgColor: buttonBackgroundColor, color: buttonTextColor, type: "submit", isSubmitting: loading, children: "Enviar mensagem" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { children: [
           "A Mitre Realty respeita a sua privacidade e utiliza os seus dados pessoais para contat\xE1-lo por e-mail ou telefone aqui registrados. Para saber mais, acesse a nossa",
           " ",