@pipelinesolucoes/form 1.2.0-beta.2 → 1.2.0-beta.20

package/dist/components/ChipList.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TypographyVariant } from '@mui/material/styles';
+import { BorderProps, ColorProps, LayoutProps } from '@pipelinesolucoes/theme';
+export interface ChipListProps extends Pick<ColorProps, 'background' | 'color' | 'backgroundHover' | 'colorHover'>, Pick<LayoutProps, 'width' | 'height' | 'padding' | 'margin'>, BorderProps {
+    items: string[];
+    variant?: TypographyVariant;
+}
+declare const ChipList: React.FC<ChipListProps>;
+export default ChipList;

package/dist/components/ChipList.js

@@ -0,0 +1,60 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import { styled, useTheme } from '@mui/material/styles';
+const StyledChipArea = styled(Box)({
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: 8,
+});
+const StyledChip = styled(Chip, {
+    shouldForwardProp: (prop) => ![
+        'width',
+        'height',
+        'padding',
+        'margin',
+        'background',
+        'colorText',
+        'borderRadius',
+        'boxShadow',
+        'border',
+        'backgroundHover',
+        'colorHover',
+        'typo',
+    ].includes(prop),
+})(({ width, height, padding, margin, background, colorText, borderRadius, boxShadow, border, backgroundHover, colorHover, typo }) => (Object.assign(Object.assign({ width,
+    height,
+    padding,
+    margin,
+    borderRadius,
+    boxShadow, backgroundColor: background, color: colorText, border }, (typo !== null && typo !== void 0 ? typo : {})), { '&:hover': {
+        backgroundColor: backgroundHover !== null && backgroundHover !== void 0 ? backgroundHover : background,
+        color: colorHover !== null && colorHover !== void 0 ? colorHover : colorText,
+    }, '&.MuiChip-outlined': {
+        backgroundColor: 'transparent',
+    }, '&.MuiChip-outlined:hover': {
+        backgroundColor: backgroundHover !== null && backgroundHover !== void 0 ? backgroundHover : 'transparent',
+        color: colorHover !== null && colorHover !== void 0 ? colorHover : colorText,
+    } })));
+const ChipList = ({ items, variant, width, height, padding, margin, background, color, borderRadius, boxShadow, border, backgroundHover, colorHover, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+    const theme = useTheme();
+    const themechip = (_b = (_a = theme.pipelinesolucoes) === null || _a === void 0 ? void 0 : _a.forms) === null || _b === void 0 ? void 0 : _b.chip;
+    const wchip = (_d = (_c = themechip === null || themechip === void 0 ? void 0 : themechip.width) !== null && _c !== void 0 ? _c : width) !== null && _d !== void 0 ? _d : '100%';
+    const hchip = (_f = (_e = themechip === null || themechip === void 0 ? void 0 : themechip.height) !== null && _e !== void 0 ? _e : height) !== null && _f !== void 0 ? _f : 'auto';
+    const pchip = (_h = (_g = themechip === null || themechip === void 0 ? void 0 : themechip.padding) !== null && _g !== void 0 ? _g : padding) !== null && _h !== void 0 ? _h : '16px';
+    const mchip = (_k = (_j = themechip === null || themechip === void 0 ? void 0 : themechip.margin) !== null && _j !== void 0 ? _j : margin) !== null && _k !== void 0 ? _k : '0';
+    const bchip = (_m = (_l = themechip === null || themechip === void 0 ? void 0 : themechip.background) !== null && _l !== void 0 ? _l : background) !== null && _m !== void 0 ? _m : '#ffffff';
+    const clchip = (_p = (_o = themechip === null || themechip === void 0 ? void 0 : themechip.color) !== null && _o !== void 0 ? _o : color) !== null && _p !== void 0 ? _p : 'inherit';
+    const brchip = (_r = (_q = themechip === null || themechip === void 0 ? void 0 : themechip.borderRadius) !== null && _q !== void 0 ? _q : borderRadius) !== null && _r !== void 0 ? _r : 'inherit';
+    const bschip = (_t = (_s = themechip === null || themechip === void 0 ? void 0 : themechip.boxShadow) !== null && _s !== void 0 ? _s : boxShadow) !== null && _t !== void 0 ? _t : 'none';
+    const bdchip = (_v = (_u = themechip === null || themechip === void 0 ? void 0 : themechip.border) !== null && _u !== void 0 ? _u : border) !== null && _v !== void 0 ? _v : 'inherit';
+    const bHoverchip = (_x = (_w = themechip === null || themechip === void 0 ? void 0 : themechip.backgroundHover) !== null && _w !== void 0 ? _w : backgroundHover) !== null && _x !== void 0 ? _x : bchip;
+    const clHoverchip = (_z = (_y = themechip === null || themechip === void 0 ? void 0 : themechip.colorHover) !== null && _y !== void 0 ? _y : colorHover) !== null && _z !== void 0 ? _z : clchip;
+    const typo = (_1 = (_0 = (variant && theme.typography[variant])) !== null && _0 !== void 0 ? _0 : themechip === null || themechip === void 0 ? void 0 : themechip.typography) !== null && _1 !== void 0 ? _1 : theme.typography.body1;
+    return (_jsx(StyledChipArea, { children: items.map((item, idx) => (_jsx(StyledChip, { label: item, width: wchip, height: hchip, padding: pchip, margin: mchip, background: bchip, colorText: clchip, borderRadius: brchip, boxShadow: bschip, border: bdchip, backgroundHover: bHoverchip, colorHover: clHoverchip, typo: typo }, `${item}-${idx}`))) }));
+};
+ChipList.displayName = 'ChipList';
+export default ChipList;
+//# sourceMappingURL=ChipList.js.map

package/dist/components/ChipList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipList.js","sourceRoot":"","sources":["../../src/components/ChipList.tsx"],"names":[],"mappings":"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"}

package/dist/components/SelectField.d.ts

@@ -0,0 +1,73 @@
+import React from 'react';
+import { TypographyProps } from '@mui/material/Typography';
+import { BorderProps, ColorProps, LayoutProps } from '@pipelinesolucoes/theme';
+export interface SelectFieldOption {
+    value: string | number;
+    label: string;
+}
+interface SelectFieldProps extends BorderProps, ColorProps, LayoutProps {
+    id?: string;
+    label?: string;
+    placeholder?: string;
+    value?: string | number;
+    disabled?: boolean;
+    variant?: TypographyProps['variant'];
+    helperText?: string;
+    helperTextColor?: string;
+    options: SelectFieldOption[];
+    onChange: (value: string | number) => void;
+}
+/**
+ * ComboBox baseado no Material UI, sem validação e sem máscaras,
+ * permitindo customização visual e controle completo do valor selecionado.
+ *
+ * @param {string} [id] Identificador único do campo (usado para acessibilidade).
+ * @param {ComboBoxOption[]} options Lista de opções exibidas no ComboBox.
+ * @param {string | number} value Valor selecionado.
+ * @param {(value: string | number) => void} onChange Callback disparado ao selecionar uma opção.
+ * @param {string} [label] Texto do rótulo do campo.
+ * @param {string} [placeholder] Texto exibido quando nenhum valor está selecionado.
+ * @param {string} [helperText] Texto auxiliar exibido abaixo do campo.
+ * @param {string} [helperTextColor] Cor do helperText. Se não for informada, usa a cor de erro do theme.
+ * @param {TypographyProps['variant']} [variant='body1'] Variante da tipografia aplicada ao label, valor, opções e helperText.
+ * @param {string | number} [width='100%'] Largura do componente.
+ * @param {string | number} [height='auto'] Altura do campo.
+ * @param {string | number} [containerMargin=0] Margem externa do container.
+ * @param {string | number} [padding=0] Padding interno do texto selecionado.
+ * @param {string} [background='transparent'] Cor de fundo do campo e do menu aberto.
+ * @param {string} [colorText='#000'] Cor do texto (label, valor selecionado e itens).
+ * @param {string | number} [borderRadius=4] Raio da borda.
+ * @param {string} [boxShadow='none'] Sombra do campo.
+ * @param {string} [borderColor='#c4c4c4'] Cor da borda.
+ * @param {boolean} [disabled=false] Desabilita o campo.
+ *
+ * @example
+ * ```tsx
+ * import { ComboBox } from '@/components/ComboBox';
+ *
+ * const Example = () => (
+ *   <ComboBox
+ *     id="category"
+ *     label="Categoria"
+ *     placeholder="Selecione uma opção"
+ *     helperText="Campo obrigatório"
+ *     helperTextColor="warning.main"
+ *     variant="body2"
+ *     background="#111"
+ *     colorText="#fff"
+ *     options={[
+ *       { value: 1, label: 'Frontend' },
+ *       { value: 2, label: 'Backend' },
+ *     ]}
+ *     value={1}
+ *     onChange={(v) => console.log(v)}
+ *     width={320}
+ *     containerMargin="16px 0"
+ *     padding="12px"
+ *     borderRadius={12}
+ *   />
+ * );
+ * ```
+ */
+declare const SelectField: React.FC<SelectFieldProps>;
+export default SelectField;

package/dist/components/SelectField.js

@@ -0,0 +1,142 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, InputLabel, MenuItem, Select, FormHelperText, Typography } from '@mui/material';
+import { styled, useTheme } from '@mui/material/styles';
+import { fbbackground, fbborderColor, fbborderRadius, fbboxShadow, fbcolor, fbcolorFocused, fbheigth, fbpadding } from '../constant';
+const StyledWrapper = styled('div', {
+    shouldForwardProp: (prop) => !['width', 'margin'].includes(prop),
+})(({ width, margin }) => ({
+    width: width,
+    margin: margin,
+}));
+const StyledFormControl = styled(FormControl, {
+    shouldForwardProp: (prop) => !['height',
+        'padding',
+        'background',
+        'borderRadius',
+        'boxShadow',
+        'borderColor',
+        'colorText',
+    ].includes(prop),
+})(({ height, padding, background, borderRadius, boxShadow, borderColor, colorText }) => ({
+    width: '100%',
+    '& .MuiOutlinedInput-root': {
+        height: height,
+        background: background !== null && background !== void 0 ? background : fbbackground,
+        borderRadius: borderRadius !== null && borderRadius !== void 0 ? borderRadius : fbborderRadius,
+        boxShadow: boxShadow !== null && boxShadow !== void 0 ? boxShadow : fbboxShadow,
+        '& fieldset': {
+            borderColor: borderColor !== null && borderColor !== void 0 ? borderColor : fbborderColor,
+        },
+        '&:hover fieldset': {
+            borderColor: borderColor !== null && borderColor !== void 0 ? borderColor : fbborderColor,
+        },
+        '&.Mui-focused fieldset': {
+            borderColor: borderColor !== null && borderColor !== void 0 ? borderColor : fbcolorFocused,
+        },
+        '& .MuiSelect-select': {
+            padding: padding !== null && padding !== void 0 ? padding : fbpadding,
+            color: colorText !== null && colorText !== void 0 ? colorText : fbcolor,
+            display: 'flex',
+            alignItems: 'center',
+        },
+    },
+    '& .MuiInputLabel-root': {
+        color: colorText !== null && colorText !== void 0 ? colorText : fbcolor,
+    },
+    '& .MuiInputLabel-root.Mui-focused': {
+        color: colorText !== null && colorText !== void 0 ? colorText : fbcolor,
+    },
+}));
+/**
+ * ComboBox baseado no Material UI, sem validação e sem máscaras,
+ * permitindo customização visual e controle completo do valor selecionado.
+ *
+ * @param {string} [id] Identificador único do campo (usado para acessibilidade).
+ * @param {ComboBoxOption[]} options Lista de opções exibidas no ComboBox.
+ * @param {string | number} value Valor selecionado.
+ * @param {(value: string | number) => void} onChange Callback disparado ao selecionar uma opção.
+ * @param {string} [label] Texto do rótulo do campo.
+ * @param {string} [placeholder] Texto exibido quando nenhum valor está selecionado.
+ * @param {string} [helperText] Texto auxiliar exibido abaixo do campo.
+ * @param {string} [helperTextColor] Cor do helperText. Se não for informada, usa a cor de erro do theme.
+ * @param {TypographyProps['variant']} [variant='body1'] Variante da tipografia aplicada ao label, valor, opções e helperText.
+ * @param {string | number} [width='100%'] Largura do componente.
+ * @param {string | number} [height='auto'] Altura do campo.
+ * @param {string | number} [containerMargin=0] Margem externa do container.
+ * @param {string | number} [padding=0] Padding interno do texto selecionado.
+ * @param {string} [background='transparent'] Cor de fundo do campo e do menu aberto.
+ * @param {string} [colorText='#000'] Cor do texto (label, valor selecionado e itens).
+ * @param {string | number} [borderRadius=4] Raio da borda.
+ * @param {string} [boxShadow='none'] Sombra do campo.
+ * @param {string} [borderColor='#c4c4c4'] Cor da borda.
+ * @param {boolean} [disabled=false] Desabilita o campo.
+ *
+ * @example
+ * ```tsx
+ * import { ComboBox } from '@/components/ComboBox';
+ *
+ * const Example = () => (
+ *   <ComboBox
+ *     id="category"
+ *     label="Categoria"
+ *     placeholder="Selecione uma opção"
+ *     helperText="Campo obrigatório"
+ *     helperTextColor="warning.main"
+ *     variant="body2"
+ *     background="#111"
+ *     colorText="#fff"
+ *     options={[
+ *       { value: 1, label: 'Frontend' },
+ *       { value: 2, label: 'Backend' },
+ *     ]}
+ *     value={1}
+ *     onChange={(v) => console.log(v)}
+ *     width={320}
+ *     containerMargin="16px 0"
+ *     padding="12px"
+ *     borderRadius={12}
+ *   />
+ * );
+ * ```
+ */
+const SelectField = ({ id, label, placeholder, value, background, backgroundDisabled, color, colorFocused, colorDisabled, borderRadius, boxShadow, borderColor, width = "100%", height, padding, margin = '0', disabled = false, variant = 'body1', helperText, helperTextColor, options, onChange, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    const labelId = id ? `${id}-label` : undefined;
+    const shouldShrinkLabel = Boolean(value) || Boolean(placeholder);
+    const handleChange = (event, _child) => {
+        const raw = event.target.value;
+        const matched = options.find((opt) => String(opt.value) === raw);
+        onChange(matched ? matched.value : raw);
+    };
+    const theme = useTheme();
+    const field = (_b = (_a = theme.pipelinesolucoes) === null || _a === void 0 ? void 0 : _a.forms) === null || _b === void 0 ? void 0 : _b.field;
+    const bg = (_c = background !== null && background !== void 0 ? background : field === null || field === void 0 ? void 0 : field.background) !== null && _c !== void 0 ? _c : '#fff';
+    const txt = (_d = color !== null && color !== void 0 ? color : field === null || field === void 0 ? void 0 : field.color) !== null && _d !== void 0 ? _d : '#000';
+    const bgDisabled = (_e = backgroundDisabled !== null && backgroundDisabled !== void 0 ? backgroundDisabled : field === null || field === void 0 ? void 0 : field.backgroundDisabled) !== null && _e !== void 0 ? _e : "#E5E7EB";
+    const txtDisabled = (_f = colorDisabled !== null && colorDisabled !== void 0 ? colorDisabled : field === null || field === void 0 ? void 0 : field.colorDisabled) !== null && _f !== void 0 ? _f : "#9CA3AF";
+    const bdFocused = (_g = colorFocused !== null && colorFocused !== void 0 ? colorFocused : field === null || field === void 0 ? void 0 : field.colorFocused) !== null && _g !== void 0 ? _g : '#1976d2';
+    const br = (_h = borderRadius !== null && borderRadius !== void 0 ? borderRadius : field === null || field === void 0 ? void 0 : field.borderRadius) !== null && _h !== void 0 ? _h : "0";
+    const sh = (_j = boxShadow !== null && boxShadow !== void 0 ? boxShadow : field === null || field === void 0 ? void 0 : field.boxShadow) !== null && _j !== void 0 ? _j : "none";
+    const bd = (_k = borderColor !== null && borderColor !== void 0 ? borderColor : field === null || field === void 0 ? void 0 : field.borderColor) !== null && _k !== void 0 ? _k : '#ccc';
+    const pad = (_l = padding !== null && padding !== void 0 ? padding : field === null || field === void 0 ? void 0 : field.padding) !== null && _l !== void 0 ? _l : '4px 8px';
+    const mg = (_m = margin !== null && margin !== void 0 ? margin : field === null || field === void 0 ? void 0 : field.margin) !== null && _m !== void 0 ? _m : '0';
+    const hg = (_o = height !== null && height !== void 0 ? height : field === null || field === void 0 ? void 0 : field.height) !== null && _o !== void 0 ? _o : fbheigth;
+    return (_jsx(StyledWrapper, { width: width, margin: mg, children: _jsxs(StyledFormControl, { id: id, disabled: disabled, variant: "outlined", background: bg, borderRadius: br, boxShadow: sh, borderColor: bd, colorText: txt, height: hg, padding: pad, children: [label && (_jsx(InputLabel, { id: labelId, htmlFor: id, shrink: shouldShrinkLabel, children: _jsx(Typography, { variant: variant, sx: { color: txt }, children: label }) })), _jsx(Select, { id: id, labelId: labelId, value: value !== undefined && value !== null ? String(value) : '', onChange: handleChange, displayEmpty: true, label: label, MenuProps: {
+                        PaperProps: {
+                            sx: {
+                                backgroundColor: bg,
+                            },
+                        },
+                    }, renderValue: (selected) => {
+                        var _a;
+                        if ((selected === '' || selected === undefined) && placeholder) {
+                            return (_jsx(Typography, { variant: variant, color: "text.disabled", children: placeholder }));
+                        }
+                        const option = options.find((opt) => String(opt.value) === selected);
+                        return _jsx(Typography, { variant: variant, children: (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '' });
+                    }, children: options.map((option) => (_jsx(MenuItem, { value: String(option.value), children: _jsx(Typography, { variant: variant, sx: { color: txt }, children: option.label }) }, option.value))) }), helperText && (_jsx(FormHelperText, { error: !helperTextColor, children: _jsx(Typography, { variant: variant, sx: { color: helperTextColor }, children: helperText }) }))] }) }));
+};
+SelectField.displayName = 'SelectField';
+export default SelectField;
+//# sourceMappingURL=SelectField.js.map

package/dist/components/SelectField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../src/components/SelectField.tsx"],"names":[],"mappings":"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"}

package/dist/components/TextFieldPassword.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { TypographyVariant } from '@mui/material/styles';
 import { BorderProps, ColorProps, LayoutProps } from '@pipelinesolucoes/theme';
 type ValidationStatus = 'idle' | 'required' | 'invalid' | 'valid';
 interface PasswordValidationResult {
@@ -12,6 +13,7 @@ interface TextFieldPasswordProps extends BorderProps, ColorProps, LayoutProps {
     label?: string;
     placeholder?: string;
     value?: string;
+    textVariant?: TypographyVariant;
     background?: string;
     backgroundDisabled?: string;
     color?: string;
@@ -27,59 +29,154 @@ interface TextFieldPasswordProps extends BorderProps, ColorProps, LayoutProps {
     pattern?: RegExp;
     patternMessage?: string;
     showErrorOn?: 'blur' | 'change' | 'both';
-    /**
-     * Retorna somente a senha digitada (string).
-     */
     onPasswordChange?: (password: string) => void;
-    /**
-     * "Evento" com o resultado completo da validação.
-     */
     onValidationChange?: (result: PasswordValidationResult) => void;
-    /**
-     * Se você ainda quiser receber o evento nativo.
-     */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
 }
 /**
  * Componente de campo de senha baseado no TextField do Material UI, com botão para alternar
- * entre mostrar/ocultar a senha. O componente:
- * - Retorna somente a senha digitada via `onPasswordChange`
- * - Valida obrigatório + formato (regex) e exibe mensagens de erro automaticamente
- * - Dispara um "evento" de validação via `onValidationChange`
- *
- * @param {string} [id] ID do input.
- * @param {string} [label] Label do campo.
- * @param {string} [placeholder] Placeholder do input.
- * @param {string} [value] Valor controlado do campo.
- * @param {boolean} [required=true] Se true, valida senha obrigatória.
- * @param {RegExp} [passwordPattern=/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9]).{8,}$/] Regex para validar formato.
- * @param {string} [requiredMessage='Senha obrigatória'] Mensagem para campo vazio.
- * @param {string} [invalidMessage='Senha inválida'] Mensagem para formato inválido.
- * @param {'blur' | 'change' | 'both'} [validateOn='blur'] Quando validar.
- * @param {(password: string) => void} [onPasswordChange] Retorna somente a senha digitada.
- * @param {(result: PasswordValidationResult) => void} [onValidationChange] Evento com resultado completo da validação.
- * @param {(event: React.ChangeEvent<HTMLInputElement>) => void} [onChange] onChange nativo (opcional).
- * @param {(event: React.FocusEvent<HTMLInputElement>) => void} [onBlur] onBlur nativo (opcional).
+ * entre mostrar e ocultar a senha.
+ *
+ * O componente oferece:
+ * - Retorno apenas do valor da senha digitada via `onPasswordChange`
+ * - Validação automática de obrigatoriedade e formato (Regex)
+ * - Exibição controlada de mensagens de erro
+ * - Evento de validação completo via `onValidationChange`
+ * - Estilização via props com fallback para tokens do theme da Pipeline
+ *
+ * ---
+ *
+ * ### Tokens de estilo (ordem de prioridade)
+ *
+ * Para propriedades visuais, o componente resolve os valores nesta ordem:
+ * 1. **Props do componente**
+ * 2. **Theme da Pipeline** (`theme.pipelinesolucoes.forms.field`)
+ * 3. **Fallback interno** (valores padrão do componente)
+ *
+ * ---
+ *
+ * ### Tipografia
+ *
+ * A tipografia do texto digitado e do placeholder pode ser definida de duas formas:
+ *
+ * 1. **Material UI**
+ *    Ao informar `textVariant`, o componente utiliza `theme.typography[textVariant]`.
+ *
+ * 2. **Theme da Pipeline**
+ *    Quando `textVariant` não é informado, utiliza `theme.pipelinesolucoes.forms.field.typography`.
+ *
+ * **Ordem de prioridade (tipografia):**
+ * 1. `textVariant` (prop do componente)
+ * 2. `theme.typography[textVariant]` (Material UI)
+ * 3. `theme.pipelinesolucoes.forms.field.typography` (Pipeline)
+ * 4. Fallback interno (`theme.typography.body1`)
+ *
+ * ---
+ *
+ * @param {string} [id]
+ * ID do input.
+ *
+ * @param {string} [label]
+ * Label exibido no campo.
+ *
+ * @param {string} [placeholder]
+ * Texto de placeholder do input.
+ *
+ * @param {string} [value]
+ * Valor controlado do campo.
+ *
+ * @param {import('@mui/material/styles').TypographyVariant} [textVariant]
+ * Variante de tipografia do Material UI aplicada ao texto digitado e ao placeholder.
+ * Quando omitida, utiliza a tipografia do theme da Pipeline (`theme.pipelinesolucoes.forms.field.typography`).
+ *
+ * ---
+ * ### Estilo / Aparência
+ *
+ * @param {string} [background]
+ * Cor de fundo do campo.
+ * Ordem: `background` → `theme.pipelinesolucoes.forms.field.background` → `#fff`.
+ *
+ * @param {string} [backgroundDisabled]
+ * Cor de fundo do campo quando desabilitado.
+ * Ordem: `backgroundDisabled` → `theme.pipelinesolucoes.forms.field.backgroundDisabled` → `#E5E7EB`.
+ *
+ * @param {string} [color]
+ * Cor do texto do campo (texto digitado e label).
+ * Ordem: `color` → `theme.pipelinesolucoes.forms.field.color` → `#000`.
+ *
+ * @param {string} [colorFocused]
+ * Cor aplicada ao estado focado (usada como cor de borda no focus).
+ * Ordem: `colorFocused` → `theme.pipelinesolucoes.forms.field.colorFocused` → `#1976d2`.
+ *
+ * @param {string} [colorDisabled]
+ * Cor do texto do campo quando desabilitado.
+ * Ordem: `colorDisabled` → `theme.pipelinesolucoes.forms.field.colorDisabled` → `#9CA3AF`.
+ *
+ * @param {string} [borderRadius]
+ * Raio da borda do campo.
+ * Ordem: `borderRadius` → `theme.pipelinesolucoes.forms.field.borderRadius` → `"0"`.
+ *
+ * @param {string} [boxShadow]
+ * Sombra do campo.
+ * Ordem: `boxShadow` → `theme.pipelinesolucoes.forms.field.boxShadow` → `"none"`.
+ *
+ * @param {string} [borderColor]
+ * Cor da borda do campo (estado padrão/hover).
+ * Ordem: `borderColor` → `theme.pipelinesolucoes.forms.field.borderColor` → `#ccc`.
+ *
+ * @param {string} [padding]
+ * Espaçamento interno do input (aplicado no texto e textarea).
+ * Ordem: `padding` → `theme.pipelinesolucoes.forms.field.padding` → `"4px 8px"`.
+ *
+ * ---
+ * ### Validação
+ *
+ * @param {boolean} [required=true]
+ * Define se o campo é obrigatório.
+ *
+ * @param {RegExp} [pattern=/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9]).{8,}$/]
+ * Expressão regular usada para validar o formato da senha.
+ *
+ * @param {string} [requiredMessage='Senha obrigatória']
+ * Mensagem exibida quando o campo obrigatório está vazio.
+ *
+ * @param {string} [patternMessage]
+ * Mensagem exibida quando a senha não atende ao formato definido.
+ *
+ * @param {'blur' | 'change' | 'both'} [showErrorOn='blur']
+ * Define quando a validação e exibição de erros deve ocorrer.
+ *
+ * @param {boolean} [disabled=false]
+ * Desabilita o campo.
+ *
+ * ---
+ * ### Eventos
+ *
+ * @param {(password: string) => void} [onPasswordChange]
+ * Callback que retorna apenas o valor da senha digitada.
+ *
+ * @param {(result: PasswordValidationResult) => void} [onValidationChange]
+ * Callback disparado sempre que a validação é executada, contendo o resultado completo.
+ *
+ * @param {(event: React.ChangeEvent<HTMLInputElement>) => void} [onChange]
+ * Evento `onChange` nativo do input (opcional).
+ *
+ * @param {(event: React.FocusEvent<HTMLInputElement>) => void} [onBlur]
+ * Evento `onBlur` nativo do input (opcional).
+ *
+ * ---
  *
  * @example
  * ```tsx
- * import React from 'react';
- * import { TextFieldPassword } from '@/components/TextFieldPassword';
- *
- * const Example = () => {
- *   const [password, setPassword] = React.useState('');
- *
- *   return (
- *     <TextFieldPassword
- *       label="Senha"
- *       value={password}
- *       onPasswordChange={(p) => setPassword(p)}
- *       onValidationChange={(r) => console.log(r)}
- *       validateOn="both"
- *     />
- *   );
- * };
+ * <TextFieldPassword
+ *   label="Senha"
+ *   background="#fff"
+ *   borderRadius="10px"
+ *   textVariant="body2"
+ *   showErrorOn="both"
+ *   onPasswordChange={(password) => console.log(password)}
+ * />
  * ```
  */
 declare const TextFieldPassword: React.FC<TextFieldPasswordProps>;