@pipelinesolucoes/form 1.2.0-beta.32 → 1.2.0-beta.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components/FormMessage.d.ts +208 -59
  2. package/dist/components/FormMessage.js +209 -60
  3. package/dist/components/FormMessage.js.map +1 -1
  4. package/dist/tsconfig.tsbuildinfo +1 -1
  5. package/package.json +1 -1
package/dist/components/FormMessage.d.ts CHANGED
@@ -20,98 +20,247 @@ export interface FormMessageProps extends ColorProps, BorderProps, ButtonProps,
20
20
  }) => Promise<ClickResult> | ClickResult;
21
21
  }
22
22
  /**
23
- * Componente de formulário de mensagem, com suporte a:
24
- * validação básica de campos, exibição de mensagens de sucesso/erro
25
- * e customização visual via props ou tema.
23
+ * Componente de formulário para envio de mensagem (contato), com campos controlados internamente
24
+ * (**nome**, **email**, **telefone** e **mensagem**) e submissão via callback assíncrono (`onClick`).
26
25
  *
27
- * @param {React.ElementType<SvgIconProps>} [Icon] Ícone exibido no topo do formulário.
26
+ * Funcionalidades principais:
27
+ * - Renderiza campos de texto com validação (via `TextFieldValidate`) e feedback de erro ao usuário.
28
+ * - Validação local mínima para **email** antes de disparar o `onClick`.
29
+ * - Exibe mensagem de retorno (sucesso/erro) após execução do `onClick`, com cor configurável.
30
+ * - Suporta cabeçalho opcional com ícone (`Icon`) e título customizado (`titulo`).
31
+ * - Permite conteúdo adicional via `children` abaixo do feedback do formulário.
28
32
  *
29
- * @param {() => React.ReactElement} [titulo] Função que retorna o título do formulário.
33
+ * Tokens de estilo (ordem de prioridade):
34
+ * - Container do formulário (`StyledRoot`):
35
+ * - `background` → `theme.pipelinesolucoes.forms.background` → `'transparent'`
36
+ * - `borderRadius` → `theme.pipelinesolucoes.forms.borderRadius` → `'0'`
37
+ * - `border` → `theme.pipelinesolucoes.forms.border` → `'0'`
38
+ * - `boxShadow` → `theme.pipelinesolucoes.forms.boxShadow` → `'none'`
39
+ * - `maxWidth` → *(sem token de theme neste componente)* → *(comportamento do styled component)*
40
+ * - Campos (`TextFieldValidate`), aplicados igualmente a todos os campos:
41
+ * - `backgroundField` → `theme.pipelinesolucoes.forms.field.background` → `undefined`
42
+ * - `colorField` → `theme.pipelinesolucoes.forms.field.color` → `undefined`
43
+ * - `borderRadiusField` → `theme.pipelinesolucoes.forms.field.borderRadius` → `undefined`
44
+ * - `boxShadowField` → `theme.pipelinesolucoes.forms.field.boxShadow` → `undefined`
45
+ * - `borderColorField` → `theme.pipelinesolucoes.forms.field.borderColor` → `undefined`
46
+ * - `paddingField` → `theme.pipelinesolucoes.forms.field.padding` → `undefined`
47
+ * - `marginField` → `theme.pipelinesolucoes.forms.field.margin` → `undefined`
48
+ * - `heightField` → `theme.pipelinesolucoes.forms.field.height` → `undefined`
49
+ * - Botão (`ButtonFormStyled`):
50
+ * - `backgroundButton` → `theme.pipelinesolucoes.forms.button.background` → `undefined`
51
+ * - `backgroundHoverButton` → `theme.pipelinesolucoes.forms.button.backgroundHover` → `undefined`
52
+ * - `colorButton` → `theme.pipelinesolucoes.forms.button.color` → `undefined`
53
+ * - `colorHoverButton` → `theme.pipelinesolucoes.forms.button.colorHover` → `undefined`
54
+ * - `borderRadiusButton` → `theme.pipelinesolucoes.forms.button.borderRadius` → `undefined`
55
+ * - `boxShadowButton` → `theme.pipelinesolucoes.forms.button.boxShadow` → `undefined`
56
+ * - `paddingButton` → `theme.pipelinesolucoes.forms.button.padding` → `undefined`
57
+ * - `borderButton` → *(prop do componente)* → `'none'`
58
+ * - `widthButton` → *(prop do componente)* → `'auto'`
59
+ * - `heightButton` → *(prop do componente)* → `'auto'`
60
+ * - `marginButton` → *(prop do componente)* → `'0'`
30
61
  *
31
- * @param {string} [textButton='Enviar'] Texto exibido no botão principal de submit.
32
- * @param {TypographyVariant} [variantButton='body1'] Variante tipográfica usada nos textos do botão e links.
62
+ * Tipografia:
63
+ * - O texto do botão é renderizado com `Typography` do Material UI.
64
+ * - Ordem de prioridade:
65
+ * - `variantButton` → *(fallback interno)* `'body1'`
66
+ * - Observação: `variantButton` aceita qualquer `TypographyVariant` compatível com o theme do Material UI.
33
67
  *
34
- * @param {React.ReactNode} [children] Conteúdo adicional renderizado abaixo do formulário.
68
+ * @param {import('@mui/material/styles').TypographyVariant} [variantButton]
69
+ * Variante tipográfica do texto do botão (`Typography variant`).
70
+ * Ordem: `variantButton` → `'body1'`.
35
71
  *
36
- * @param {string} [background] Cor de fundo do container principal do formulário.
37
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.
72
+ * @param {string} [textButton]
73
+ * Texto exibido no botão quando não está carregando.
74
+ * Padrão: `'Enviar'`.
38
75
  *
39
- * @param {string | number} [borderRadius] Raio da borda do container principal do formulário.
40
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.
76
+ * @param {number} [rowsMessage]
77
+ * Número de linhas do campo **Mensagem** quando `multiline` está ativo.
78
+ * Padrão: `5`.
41
79
  *
42
- * @param {string} [border] Borda do container principal do formulário.
43
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.
80
+ * @param {React.ElementType<import('@mui/material').SvgIconProps>} [Icon]
81
+ * Componente de ícone (ex.: `EmailOutlined`, `ChatOutlined`) renderizado no cabeçalho do formulário.
82
+ * Renderizado apenas quando fornecido.
44
83
  *
45
- * @param {string} [boxShadow] Sombra do container principal do formulário.
46
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.
84
+ * @param {() => React.ReactElement} [titulo]
85
+ * Função que retorna o elemento React usado como título no cabeçalho do formulário.
86
+ * Renderizado apenas quando fornecido.
47
87
  *
48
- * @param {string} [maxWidth] Largura Máxima do container principal do formulário.
88
+ * @param {React.ReactNode} [children]
89
+ * Conteúdo adicional renderizado ao final do componente (abaixo da mensagem de feedback da API).
49
90
  *
50
- * @param {string} [backgroundField] Cor de fundo dos campos de formulário.
51
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.field.
91
+ * @param {(data: { nome: string; email: string; telefone: string; mensagem: string; }) => (Promise<import('../types/ClickResult').ClickResult> | import('../types/ClickResult').ClickResult)} [onClick]
92
+ * Callback acionado ao clicar no botão (submissão). Recebe os valores atuais dos campos do formulário.
93
+ * - Se ausente, o componente exibe a mensagem: **"Nenhuma ação foi configurada para o botão."**
94
+ * - Se retornar `{ success: true }`, exibe `message` com cor `color` (ou `theme.palette.success.main` como fallback).
95
+ * - Se retornar `{ success: false }`, exibe `message` com cor `color` (ou `theme.palette.error.main` como fallback).
96
+ * - Em exceção (`throw`), exibe: **"Erro inesperado ao processar a solicitação."** com `theme.palette.error.main`.
52
97
  *
53
- * @param {string} [colorField] Cor do texto dos campos de formulário.
54
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.field.
98
+ * Estilo / Aparência:
99
+ * @param {import('@pipelinesolucoes/theme').ColorProps['background']} [background]
100
+ * Background do container do formulário.
101
+ * Ordem: `background` → `theme.pipelinesolucoes.forms.background` → `'transparent'`.
55
102
  *
56
- * @param {string | number} [borderRadiusField] Raio da borda dos campos de formulário.
57
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.field.
103
+ * @param {import('@pipelinesolucoes/theme').BorderProps['borderRadius']} [borderRadius]
104
+ * Raio de borda do container do formulário.
105
+ * Ordem: `borderRadius` → `theme.pipelinesolucoes.forms.borderRadius` → `'0'`.
58
106
  *
59
- * @param {string} [boxShadowField] Sombra aplicada aos campos de formulário.
60
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.field.
107
+ * @param {import('@pipelinesolucoes/theme').BorderProps['border']} [border]
108
+ * Borda do container do formulário.
109
+ * Ordem: `border` → `theme.pipelinesolucoes.forms.border` → `'0'`.
61
110
  *
62
- * @param {string} [borderColorField] Cor da borda dos campos de formulário.
63
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.field.
111
+ * @param {import('@pipelinesolucoes/theme').LayoutProps['boxShadow']} [boxShadow]
112
+ * Sombra do container do formulário.
113
+ * Ordem: `boxShadow` → `theme.pipelinesolucoes.forms.boxShadow` → `'none'`.
64
114
  *
65
- * @param {string | number} [paddingField] Espaçamento interno dos campos de formulário.
66
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.field.
115
+ * @param {import('@pipelinesolucoes/theme').LayoutProps['maxWidth']} [maxWidth]
116
+ * Largura máxima do container do formulário. *(Sem token de theme aplicado diretamente neste componente.)*
67
117
  *
68
- * @param {string | number} [marginField] Margem externa dos campos de formulário.
69
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.field.
118
+ * @param {import('@/types/FieldProps').FieldProps['backgroundField']} [backgroundField]
119
+ * Background aplicado aos campos (`TextFieldValidate`).
120
+ * Ordem: `backgroundField` → `theme.pipelinesolucoes.forms.field.background` → `undefined`.
70
121
  *
71
- * @param {string} [textButton='Enviar'] Texto exibido no botão principal do formulário.
122
+ * @param {import('@/types/FieldProps').FieldProps['colorField']} [colorField]
123
+ * Cor do texto aplicada aos campos (`TextFieldValidate`).
124
+ * Ordem: `colorField` → `theme.pipelinesolucoes.forms.field.color` → `undefined`.
72
125
  *
73
- * @param {TypographyVariant} [variantButton='body1'] Variante tipográfica utilizada no texto do botão e links.
126
+ * @param {import('@/types/FieldProps').FieldProps['borderRadiusField']} [borderRadiusField]
127
+ * Raio de borda aplicado aos campos (`TextFieldValidate`).
128
+ * Ordem: `borderRadiusField` → `theme.pipelinesolucoes.forms.field.borderRadius` → `undefined`.
74
129
  *
75
- * @param {string} [backgroundButton] Cor de fundo do botão.
76
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.button.
130
+ * @param {import('@/types/FieldProps').FieldProps['boxShadowField']} [boxShadowField]
131
+ * Sombra aplicada aos campos (`TextFieldValidate`).
132
+ * Ordem: `boxShadowField` → `theme.pipelinesolucoes.forms.field.boxShadow` → `undefined`.
77
133
  *
78
- * @param {string} [backgroundHoverButton] Cor de fundo do botão ao passar o mouse.
79
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.button.
134
+ * @param {import('@/types/FieldProps').FieldProps['borderColorField']} [borderColorField]
135
+ * Cor da borda aplicada aos campos (`TextFieldValidate`).
136
+ * Ordem: `borderColorField` → `theme.pipelinesolucoes.forms.field.borderColor` → `undefined`.
80
137
  *
81
- * @param {string} [colorButton] Cor do texto do botão.
82
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.button.
138
+ * @param {import('@/types/FieldProps').FieldProps['paddingField']} [paddingField]
139
+ * Padding aplicado aos campos (`TextFieldValidate`).
140
+ * Ordem: `paddingField` → `theme.pipelinesolucoes.forms.field.padding` → `undefined`.
83
141
  *
84
- * @param {string} [colorHoverButton] Cor do texto do botão ao passar o mouse.
85
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.button.
142
+ * @param {import('@/types/FieldProps').FieldProps['marginField']} [marginField]
143
+ * Margem aplicada aos campos (`TextFieldValidate`).
144
+ * Ordem: `marginField` → `theme.pipelinesolucoes.forms.field.margin` → `undefined`.
86
145
  *
87
- * @param {string | number} [borderRadiusButton] Raio da borda do botão.
88
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.button.
146
+ * @param {import('@/types/FieldProps').FieldProps['heightField']} [heightField]
147
+ * Altura aplicada aos campos (`TextFieldValidate`).
148
+ * Ordem: `heightField` → `theme.pipelinesolucoes.forms.field.height` → `undefined`.
89
149
  *
90
- * @param {string} [borderButton='none'] Borda do botão.
91
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.button.
150
+ * @param {import('../types/ButtonProps').ButtonProps['backgroundButton']} [backgroundButton]
151
+ * Background do botão.
152
+ * Ordem: `backgroundButton` → `theme.pipelinesolucoes.forms.button.background` → `undefined`.
92
153
  *
93
- * @param {string} [boxShadowButton] Sombra aplicada ao botão.
94
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.button.
154
+ * @param {import('../types/ButtonProps').ButtonProps['backgroundHoverButton']} [backgroundHoverButton]
155
+ * Background do botão em hover.
156
+ * Ordem: `backgroundHoverButton` → `theme.pipelinesolucoes.forms.button.backgroundHover` → `undefined`.
95
157
  *
96
- * @param {string | number} [widthButton='auto'] Largura do botão.
97
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.button.
158
+ * @param {import('../types/ButtonProps').ButtonProps['colorButton']} [colorButton]
159
+ * Cor do texto do botão.
160
+ * Ordem: `colorButton` → `theme.pipelinesolucoes.forms.button.color` → `undefined`.
98
161
  *
99
- * @param {string | number} [heightButton='auto'] Altura do botão.
100
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.button.
162
+ * @param {import('../types/ButtonProps').ButtonProps['colorHoverButton']} [colorHoverButton]
163
+ * Cor do texto do botão em hover.
164
+ * Ordem: `colorHoverButton` → `theme.pipelinesolucoes.forms.button.colorHover` → `undefined`.
101
165
  *
102
- * @param {string | number} [paddingButton] Espaçamento interno do botão.
103
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.button.
166
+ * @param {import('../types/ButtonProps').ButtonProps['borderRadiusButton']} [borderRadiusButton]
167
+ * Raio de borda do botão.
168
+ * Ordem: `borderRadiusButton` → `theme.pipelinesolucoes.forms.button.borderRadius` → `undefined`.
169
+ *
170
+ * @param {import('../types/ButtonProps').ButtonProps['borderButton']} [borderButton]
171
+ * Borda do botão.
172
+ * Ordem: `borderButton` → `'none'`.
173
+ *
174
+ * @param {import('../types/ButtonProps').ButtonProps['boxShadowButton']} [boxShadowButton]
175
+ * Sombra do botão.
176
+ * Ordem: `boxShadowButton` → `theme.pipelinesolucoes.forms.button.boxShadow` → `undefined`.
177
+ *
178
+ * @param {import('../types/ButtonProps').ButtonProps['widthButton']} [widthButton]
179
+ * Largura do botão.
180
+ * Ordem: `widthButton` → `'auto'`.
181
+ *
182
+ * @param {import('../types/ButtonProps').ButtonProps['heightButton']} [heightButton]
183
+ * Altura do botão.
184
+ * Ordem: `heightButton` → `'auto'`.
185
+ *
186
+ * @param {import('../types/ButtonProps').ButtonProps['paddingButton']} [paddingButton]
187
+ * Padding do botão.
188
+ * Ordem: `paddingButton` → `theme.pipelinesolucoes.forms.button.padding` → `undefined`.
189
+ *
190
+ * @param {import('../types/ButtonProps').ButtonProps['marginButton']} [marginButton]
191
+ * Margem do botão.
192
+ * Ordem: `marginButton` → `'0'`.
193
+ *
194
+ * Validação:
195
+ * - Email: validação local por regex simples (`/\S+@\S+\.\S+/`) antes de executar `onClick`.
196
+ * - Campos: cada `TextFieldValidate` recebe `required` e `showErrorOn="blur"`, além de validações específicas:
197
+ * - `validateEmailMessage` para email.
198
+ * - `validateTelefoneMessage` para telefone.
199
+ *
200
+ * Eventos:
201
+ * - Clique no botão: dispara `handleClick`, que:
202
+ * - Prevê `preventDefault()` no evento de formulário.
203
+ * - Bloqueia envio se email inválido e exibe mensagem padrão de erro.
204
+ * - Desabilita o botão enquanto `isLoading` estiver `true`, exibindo "Enviando...".
104
205
  *
105
- * @param {string | number} [marginButton='0'] Margem externa do botão.
106
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.button.
107
-
108
-
109
206
  * @example
110
207
  * ```tsx
111
- * const Example = () => {
208
+ * import FormMessage from './FormMessage';
209
+ * import EmailOutlined from '@mui/icons-material/EmailOutlined';
210
+ *
211
+ * export function Contato() {
112
212
  * return (
113
- * <FormBrevo/>
213
+ * <FormMessage
214
+ * Icon={EmailOutlined}
215
+ * titulo={() => <strong>Fale conosco</strong>}
216
+ * textButton="Enviar mensagem"
217
+ * variantButton="body2"
218
+ * rowsMessage={6}
219
+ * onClick={async ({ nome, email, telefone, mensagem }) => {
220
+ * // Exemplo: chamada de API
221
+ * const ok = Boolean(nome && email && telefone && mensagem);
222
+ * return ok
223
+ * ? { success: true, message: 'Mensagem enviada com sucesso!' }
224
+ * : { success: false, message: 'Não foi possível enviar a mensagem.' };
225
+ * }}
226
+ * >
227
+ * <small>Responderemos em até 1 dia útil.</small>
228
+ * </FormMessage>
114
229
  * );
230
+ * }
231
+ * ```
232
+ *
233
+ * @example
234
+ * ```ts
235
+ * // Exemplo de configuração no theme (Pipeline)
236
+ * const theme = {
237
+ * pipelinesolucoes: {
238
+ * forms: {
239
+ * background: 'transparent',
240
+ * borderRadius: '8px',
241
+ * border: '1px solid rgba(0,0,0,0.12)',
242
+ * boxShadow: 'none',
243
+ * field: {
244
+ * background: '#fff',
245
+ * color: '#111',
246
+ * borderRadius: '8px',
247
+ * borderColor: 'rgba(0,0,0,0.23)',
248
+ * boxShadow: 'none',
249
+ * padding: '12px',
250
+ * margin: '0 0 12px 0',
251
+ * height: '48px',
252
+ * },
253
+ * button: {
254
+ * background: '#111',
255
+ * backgroundHover: '#222',
256
+ * color: '#fff',
257
+ * colorHover: '#fff',
258
+ * borderRadius: '8px',
259
+ * boxShadow: 'none',
260
+ * padding: '12px 16px',
261
+ * },
262
+ * },
263
+ * },
115
264
  * };
116
265
  * ```
117
266
  */
package/dist/components/FormMessage.js CHANGED
@@ -7,100 +7,249 @@ import { ButtonFormStyled } from '../style/ButtonFormStyled';
7
7
  import { validateEmailMessage } from '../utils/validateEmail';
8
8
  import TextFieldValidate from './TextFieldValidate';
9
9
  import { DivTitulo, FormContainer, StyledRoot } from './StyleForm';
10
- import { validateTelefoneMessage } from '@/utils/validateTelefone';
10
+ import { validateTelefoneMessage } from '../utils/validateTelefone';
11
11
  /**
12
- * Componente de formulário de mensagem, com suporte a:
13
- * validação básica de campos, exibição de mensagens de sucesso/erro
14
- * e customização visual via props ou tema.
12
+ * Componente de formulário para envio de mensagem (contato), com campos controlados internamente
13
+ * (**nome**, **email**, **telefone** e **mensagem**) e submissão via callback assíncrono (`onClick`).
15
14
  *
16
- * @param {React.ElementType<SvgIconProps>} [Icon] Ícone exibido no topo do formulário.
15
+ * Funcionalidades principais:
16
+ * - Renderiza campos de texto com validação (via `TextFieldValidate`) e feedback de erro ao usuário.
17
+ * - Validação local mínima para **email** antes de disparar o `onClick`.
18
+ * - Exibe mensagem de retorno (sucesso/erro) após execução do `onClick`, com cor configurável.
19
+ * - Suporta cabeçalho opcional com ícone (`Icon`) e título customizado (`titulo`).
20
+ * - Permite conteúdo adicional via `children` abaixo do feedback do formulário.
17
21
  *
18
- * @param {() => React.ReactElement} [titulo] Função que retorna o título do formulário.
22
+ * Tokens de estilo (ordem de prioridade):
23
+ * - Container do formulário (`StyledRoot`):
24
+ * - `background` → `theme.pipelinesolucoes.forms.background` → `'transparent'`
25
+ * - `borderRadius` → `theme.pipelinesolucoes.forms.borderRadius` → `'0'`
26
+ * - `border` → `theme.pipelinesolucoes.forms.border` → `'0'`
27
+ * - `boxShadow` → `theme.pipelinesolucoes.forms.boxShadow` → `'none'`
28
+ * - `maxWidth` → *(sem token de theme neste componente)* → *(comportamento do styled component)*
29
+ * - Campos (`TextFieldValidate`), aplicados igualmente a todos os campos:
30
+ * - `backgroundField` → `theme.pipelinesolucoes.forms.field.background` → `undefined`
31
+ * - `colorField` → `theme.pipelinesolucoes.forms.field.color` → `undefined`
32
+ * - `borderRadiusField` → `theme.pipelinesolucoes.forms.field.borderRadius` → `undefined`
33
+ * - `boxShadowField` → `theme.pipelinesolucoes.forms.field.boxShadow` → `undefined`
34
+ * - `borderColorField` → `theme.pipelinesolucoes.forms.field.borderColor` → `undefined`
35
+ * - `paddingField` → `theme.pipelinesolucoes.forms.field.padding` → `undefined`
36
+ * - `marginField` → `theme.pipelinesolucoes.forms.field.margin` → `undefined`
37
+ * - `heightField` → `theme.pipelinesolucoes.forms.field.height` → `undefined`
38
+ * - Botão (`ButtonFormStyled`):
39
+ * - `backgroundButton` → `theme.pipelinesolucoes.forms.button.background` → `undefined`
40
+ * - `backgroundHoverButton` → `theme.pipelinesolucoes.forms.button.backgroundHover` → `undefined`
41
+ * - `colorButton` → `theme.pipelinesolucoes.forms.button.color` → `undefined`
42
+ * - `colorHoverButton` → `theme.pipelinesolucoes.forms.button.colorHover` → `undefined`
43
+ * - `borderRadiusButton` → `theme.pipelinesolucoes.forms.button.borderRadius` → `undefined`
44
+ * - `boxShadowButton` → `theme.pipelinesolucoes.forms.button.boxShadow` → `undefined`
45
+ * - `paddingButton` → `theme.pipelinesolucoes.forms.button.padding` → `undefined`
46
+ * - `borderButton` → *(prop do componente)* → `'none'`
47
+ * - `widthButton` → *(prop do componente)* → `'auto'`
48
+ * - `heightButton` → *(prop do componente)* → `'auto'`
49
+ * - `marginButton` → *(prop do componente)* → `'0'`
19
50
  *
20
- * @param {string} [textButton='Enviar'] Texto exibido no botão principal de submit.
21
- * @param {TypographyVariant} [variantButton='body1'] Variante tipográfica usada nos textos do botão e links.
51
+ * Tipografia:
52
+ * - O texto do botão é renderizado com `Typography` do Material UI.
53
+ * - Ordem de prioridade:
54
+ * - `variantButton` → *(fallback interno)* `'body1'`
55
+ * - Observação: `variantButton` aceita qualquer `TypographyVariant` compatível com o theme do Material UI.
22
56
  *
23
- * @param {React.ReactNode} [children] Conteúdo adicional renderizado abaixo do formulário.
57
+ * @param {import('@mui/material/styles').TypographyVariant} [variantButton]
58
+ * Variante tipográfica do texto do botão (`Typography variant`).
59
+ * Ordem: `variantButton` → `'body1'`.
24
60
  *
25
- * @param {string} [background] Cor de fundo do container principal do formulário.
26
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.
61
+ * @param {string} [textButton]
62
+ * Texto exibido no botão quando não está carregando.
63
+ * Padrão: `'Enviar'`.
27
64
  *
28
- * @param {string | number} [borderRadius] Raio da borda do container principal do formulário.
29
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.
65
+ * @param {number} [rowsMessage]
66
+ * Número de linhas do campo **Mensagem** quando `multiline` está ativo.
67
+ * Padrão: `5`.
30
68
  *
31
- * @param {string} [border] Borda do container principal do formulário.
32
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.
69
+ * @param {React.ElementType<import('@mui/material').SvgIconProps>} [Icon]
70
+ * Componente de ícone (ex.: `EmailOutlined`, `ChatOutlined`) renderizado no cabeçalho do formulário.
71
+ * Renderizado apenas quando fornecido.
33
72
  *
34
- * @param {string} [boxShadow] Sombra do container principal do formulário.
35
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.
73
+ * @param {() => React.ReactElement} [titulo]
74
+ * Função que retorna o elemento React usado como título no cabeçalho do formulário.
75
+ * Renderizado apenas quando fornecido.
36
76
  *
37
- * @param {string} [maxWidth] Largura Máxima do container principal do formulário.
77
+ * @param {React.ReactNode} [children]
78
+ * Conteúdo adicional renderizado ao final do componente (abaixo da mensagem de feedback da API).
38
79
  *
39
- * @param {string} [backgroundField] Cor de fundo dos campos de formulário.
40
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.field.
80
+ * @param {(data: { nome: string; email: string; telefone: string; mensagem: string; }) => (Promise<import('../types/ClickResult').ClickResult> | import('../types/ClickResult').ClickResult)} [onClick]
81
+ * Callback acionado ao clicar no botão (submissão). Recebe os valores atuais dos campos do formulário.
82
+ * - Se ausente, o componente exibe a mensagem: **"Nenhuma ação foi configurada para o botão."**
83
+ * - Se retornar `{ success: true }`, exibe `message` com cor `color` (ou `theme.palette.success.main` como fallback).
84
+ * - Se retornar `{ success: false }`, exibe `message` com cor `color` (ou `theme.palette.error.main` como fallback).
85
+ * - Em exceção (`throw`), exibe: **"Erro inesperado ao processar a solicitação."** com `theme.palette.error.main`.
41
86
  *
42
- * @param {string} [colorField] Cor do texto dos campos de formulário.
43
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.field.
87
+ * Estilo / Aparência:
88
+ * @param {import('@pipelinesolucoes/theme').ColorProps['background']} [background]
89
+ * Background do container do formulário.
90
+ * Ordem: `background` → `theme.pipelinesolucoes.forms.background` → `'transparent'`.
44
91
  *
45
- * @param {string | number} [borderRadiusField] Raio da borda dos campos de formulário.
46
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.field.
92
+ * @param {import('@pipelinesolucoes/theme').BorderProps['borderRadius']} [borderRadius]
93
+ * Raio de borda do container do formulário.
94
+ * Ordem: `borderRadius` → `theme.pipelinesolucoes.forms.borderRadius` → `'0'`.
47
95
  *
48
- * @param {string} [boxShadowField] Sombra aplicada aos campos de formulário.
49
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.field.
96
+ * @param {import('@pipelinesolucoes/theme').BorderProps['border']} [border]
97
+ * Borda do container do formulário.
98
+ * Ordem: `border` → `theme.pipelinesolucoes.forms.border` → `'0'`.
50
99
  *
51
- * @param {string} [borderColorField] Cor da borda dos campos de formulário.
52
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.field.
100
+ * @param {import('@pipelinesolucoes/theme').LayoutProps['boxShadow']} [boxShadow]
101
+ * Sombra do container do formulário.
102
+ * Ordem: `boxShadow` → `theme.pipelinesolucoes.forms.boxShadow` → `'none'`.
53
103
  *
54
- * @param {string | number} [paddingField] Espaçamento interno dos campos de formulário.
55
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.field.
104
+ * @param {import('@pipelinesolucoes/theme').LayoutProps['maxWidth']} [maxWidth]
105
+ * Largura máxima do container do formulário. *(Sem token de theme aplicado diretamente neste componente.)*
56
106
  *
57
- * @param {string | number} [marginField] Margem externa dos campos de formulário.
58
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.field.
107
+ * @param {import('@/types/FieldProps').FieldProps['backgroundField']} [backgroundField]
108
+ * Background aplicado aos campos (`TextFieldValidate`).
109
+ * Ordem: `backgroundField` → `theme.pipelinesolucoes.forms.field.background` → `undefined`.
59
110
  *
60
- * @param {string} [textButton='Enviar'] Texto exibido no botão principal do formulário.
111
+ * @param {import('@/types/FieldProps').FieldProps['colorField']} [colorField]
112
+ * Cor do texto aplicada aos campos (`TextFieldValidate`).
113
+ * Ordem: `colorField` → `theme.pipelinesolucoes.forms.field.color` → `undefined`.
61
114
  *
62
- * @param {TypographyVariant} [variantButton='body1'] Variante tipográfica utilizada no texto do botão e links.
115
+ * @param {import('@/types/FieldProps').FieldProps['borderRadiusField']} [borderRadiusField]
116
+ * Raio de borda aplicado aos campos (`TextFieldValidate`).
117
+ * Ordem: `borderRadiusField` → `theme.pipelinesolucoes.forms.field.borderRadius` → `undefined`.
63
118
  *
64
- * @param {string} [backgroundButton] Cor de fundo do botão.
65
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.button.
119
+ * @param {import('@/types/FieldProps').FieldProps['boxShadowField']} [boxShadowField]
120
+ * Sombra aplicada aos campos (`TextFieldValidate`).
121
+ * Ordem: `boxShadowField` → `theme.pipelinesolucoes.forms.field.boxShadow` → `undefined`.
66
122
  *
67
- * @param {string} [backgroundHoverButton] Cor de fundo do botão ao passar o mouse.
68
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.button.
123
+ * @param {import('@/types/FieldProps').FieldProps['borderColorField']} [borderColorField]
124
+ * Cor da borda aplicada aos campos (`TextFieldValidate`).
125
+ * Ordem: `borderColorField` → `theme.pipelinesolucoes.forms.field.borderColor` → `undefined`.
69
126
  *
70
- * @param {string} [colorButton] Cor do texto do botão.
71
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.button.
127
+ * @param {import('@/types/FieldProps').FieldProps['paddingField']} [paddingField]
128
+ * Padding aplicado aos campos (`TextFieldValidate`).
129
+ * Ordem: `paddingField` → `theme.pipelinesolucoes.forms.field.padding` → `undefined`.
72
130
  *
73
- * @param {string} [colorHoverButton] Cor do texto do botão ao passar o mouse.
74
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.button.
131
+ * @param {import('@/types/FieldProps').FieldProps['marginField']} [marginField]
132
+ * Margem aplicada aos campos (`TextFieldValidate`).
133
+ * Ordem: `marginField` → `theme.pipelinesolucoes.forms.field.margin` → `undefined`.
75
134
  *
76
- * @param {string | number} [borderRadiusButton] Raio da borda do botão.
77
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.button.
135
+ * @param {import('@/types/FieldProps').FieldProps['heightField']} [heightField]
136
+ * Altura aplicada aos campos (`TextFieldValidate`).
137
+ * Ordem: `heightField` → `theme.pipelinesolucoes.forms.field.height` → `undefined`.
78
138
  *
79
- * @param {string} [borderButton='none'] Borda do botão.
80
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.button.
139
+ * @param {import('../types/ButtonProps').ButtonProps['backgroundButton']} [backgroundButton]
140
+ * Background do botão.
141
+ * Ordem: `backgroundButton` → `theme.pipelinesolucoes.forms.button.background` → `undefined`.
81
142
  *
82
- * @param {string} [boxShadowButton] Sombra aplicada ao botão.
83
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.button.
143
+ * @param {import('../types/ButtonProps').ButtonProps['backgroundHoverButton']} [backgroundHoverButton]
144
+ * Background do botão em hover.
145
+ * Ordem: `backgroundHoverButton` → `theme.pipelinesolucoes.forms.button.backgroundHover` → `undefined`.
84
146
  *
85
- * @param {string | number} [widthButton='auto'] Largura do botão.
86
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.button.
147
+ * @param {import('../types/ButtonProps').ButtonProps['colorButton']} [colorButton]
148
+ * Cor do texto do botão.
149
+ * Ordem: `colorButton` → `theme.pipelinesolucoes.forms.button.color` → `undefined`.
87
150
  *
88
- * @param {string | number} [heightButton='auto'] Altura do botão.
89
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.button.
151
+ * @param {import('../types/ButtonProps').ButtonProps['colorHoverButton']} [colorHoverButton]
152
+ * Cor do texto do botão em hover.
153
+ * Ordem: `colorHoverButton` → `theme.pipelinesolucoes.forms.button.colorHover` → `undefined`.
90
154
  *
91
- * @param {string | number} [paddingButton] Espaçamento interno do botão.
92
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.button.
155
+ * @param {import('../types/ButtonProps').ButtonProps['borderRadiusButton']} [borderRadiusButton]
156
+ * Raio de borda do botão.
157
+ * Ordem: `borderRadiusButton` → `theme.pipelinesolucoes.forms.button.borderRadius` → `undefined`.
158
+ *
159
+ * @param {import('../types/ButtonProps').ButtonProps['borderButton']} [borderButton]
160
+ * Borda do botão.
161
+ * Ordem: `borderButton` → `'none'`.
162
+ *
163
+ * @param {import('../types/ButtonProps').ButtonProps['boxShadowButton']} [boxShadowButton]
164
+ * Sombra do botão.
165
+ * Ordem: `boxShadowButton` → `theme.pipelinesolucoes.forms.button.boxShadow` → `undefined`.
166
+ *
167
+ * @param {import('../types/ButtonProps').ButtonProps['widthButton']} [widthButton]
168
+ * Largura do botão.
169
+ * Ordem: `widthButton` → `'auto'`.
170
+ *
171
+ * @param {import('../types/ButtonProps').ButtonProps['heightButton']} [heightButton]
172
+ * Altura do botão.
173
+ * Ordem: `heightButton` → `'auto'`.
174
+ *
175
+ * @param {import('../types/ButtonProps').ButtonProps['paddingButton']} [paddingButton]
176
+ * Padding do botão.
177
+ * Ordem: `paddingButton` → `theme.pipelinesolucoes.forms.button.padding` → `undefined`.
178
+ *
179
+ * @param {import('../types/ButtonProps').ButtonProps['marginButton']} [marginButton]
180
+ * Margem do botão.
181
+ * Ordem: `marginButton` → `'0'`.
182
+ *
183
+ * Validação:
184
+ * - Email: validação local por regex simples (`/\S+@\S+\.\S+/`) antes de executar `onClick`.
185
+ * - Campos: cada `TextFieldValidate` recebe `required` e `showErrorOn="blur"`, além de validações específicas:
186
+ * - `validateEmailMessage` para email.
187
+ * - `validateTelefoneMessage` para telefone.
188
+ *
189
+ * Eventos:
190
+ * - Clique no botão: dispara `handleClick`, que:
191
+ * - Prevê `preventDefault()` no evento de formulário.
192
+ * - Bloqueia envio se email inválido e exibe mensagem padrão de erro.
193
+ * - Desabilita o botão enquanto `isLoading` estiver `true`, exibindo "Enviando...".
93
194
  *
94
- * @param {string | number} [marginButton='0'] Margem externa do botão.
95
- * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.button.
96
-
97
-
98
195
  * @example
99
196
  * ```tsx
100
- * const Example = () => {
197
+ * import FormMessage from './FormMessage';
198
+ * import EmailOutlined from '@mui/icons-material/EmailOutlined';
199
+ *
200
+ * export function Contato() {
101
201
  * return (
102
- * <FormBrevo/>
202
+ * <FormMessage
203
+ * Icon={EmailOutlined}
204
+ * titulo={() => <strong>Fale conosco</strong>}
205
+ * textButton="Enviar mensagem"
206
+ * variantButton="body2"
207
+ * rowsMessage={6}
208
+ * onClick={async ({ nome, email, telefone, mensagem }) => {
209
+ * // Exemplo: chamada de API
210
+ * const ok = Boolean(nome && email && telefone && mensagem);
211
+ * return ok
212
+ * ? { success: true, message: 'Mensagem enviada com sucesso!' }
213
+ * : { success: false, message: 'Não foi possível enviar a mensagem.' };
214
+ * }}
215
+ * >
216
+ * <small>Responderemos em até 1 dia útil.</small>
217
+ * </FormMessage>
103
218
  * );
219
+ * }
220
+ * ```
221
+ *
222
+ * @example
223
+ * ```ts
224
+ * // Exemplo de configuração no theme (Pipeline)
225
+ * const theme = {
226
+ * pipelinesolucoes: {
227
+ * forms: {
228
+ * background: 'transparent',
229
+ * borderRadius: '8px',
230
+ * border: '1px solid rgba(0,0,0,0.12)',
231
+ * boxShadow: 'none',
232
+ * field: {
233
+ * background: '#fff',
234
+ * color: '#111',
235
+ * borderRadius: '8px',
236
+ * borderColor: 'rgba(0,0,0,0.23)',
237
+ * boxShadow: 'none',
238
+ * padding: '12px',
239
+ * margin: '0 0 12px 0',
240
+ * height: '48px',
241
+ * },
242
+ * button: {
243
+ * background: '#111',
244
+ * backgroundHover: '#222',
245
+ * color: '#fff',
246
+ * colorHover: '#fff',
247
+ * borderRadius: '8px',
248
+ * boxShadow: 'none',
249
+ * padding: '12px 16px',
250
+ * },
251
+ * },
252
+ * },
104
253
  * };
105
254
  * ```
106
255
  */