@pipelinesolucoes/form 1.2.0-beta.3 → 1.2.0-beta.30

package/dist/components/TextFieldNumberValidate.js

@@ -0,0 +1,196 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useTheme } from '@mui/material/styles';
+import { TextFieldStyled } from '../style/TextFieldStyle';
+import { fbbackground, fbbackgroundDisabled, fbborderColor, fbborderRadius, fbboxShadow, fbcolor, fbcolorDisabled, fbcolorFocused, fbheigth, fbpadding, } from '../constant';
+const computeError = (value, { required, requiredMessage, minLength, pattern, patternMessage, validate, }) => {
+    const v = value !== null && value !== void 0 ? value : '';
+    if (required && v.trim().length === 0)
+        return requiredMessage || 'Campo obrigatório';
+    if (typeof minLength === 'number' && v.length < minLength)
+        return `Mínimo de ${minLength} caracteres`;
+    if (pattern) {
+        const re = typeof pattern === 'string' ? new RegExp(pattern) : pattern;
+        if (!re.test(v))
+            return patternMessage || 'Formato inválido';
+    }
+    if (validate) {
+        const customMsg = validate(v);
+        if (typeof customMsg === 'string' && customMsg)
+            return customMsg;
+    }
+    return null;
+};
+const sanitizeNumeric = (raw) => (raw !== null && raw !== void 0 ? raw : '').replace(/[^\d]/g, '');
+/**
+ * Campo de texto numérico com suporte a validações comuns e customizadas, construído
+ * sobre o TextField do Material UI e estilizado via Design System da Pipeline.
+ *
+ * Diferença principal:
+ * - Este componente **aceita apenas números (0–9)**, removendo automaticamente qualquer caractere não numérico.
+ *
+ * Funcionalidades principais:
+ * - Suporte a modo controlado (`value`)
+ * - Validações nativas (obrigatório, tamanho mínimo, regex)
+ * - Validação customizada via função
+ * - Controle de momento de exibição do erro (`change` ou `blur`)
+ * - Suporte a campo multilinha (mantido por compatibilidade)
+ * - Customização visual via props e tokens de theme
+ *
+ * Tokens de estilo (ordem de prioridade):
+ * - `prop` do componente
+ * - `theme.pipelinesolucoes.forms.field`
+ * - Fallback interno (constantes `fb*`)
+ *
+ * Tipografia:
+ * - Suporte à tipografia do Material UI via `textVariant`
+ * - Fallback para `theme.pipelinesolucoes.forms.field.typography`
+ * - Fallback final para `theme.typography.body1`
+ *
+ * @param {string} [id] Identificador do campo, repassado ao input do Material UI.
+ * @param {string} [label] Texto do rótulo exibido acima do campo.
+ * @param {string} [placeholder] Texto exibido quando o campo está vazio.
+ * @param {string} [value] Valor atual do campo (modo controlado). Somente dígitos serão mantidos.
+ *
+ * @param {boolean} [disabled=false] Define se o campo está desabilitado.
+ *
+ * @param {number} [minLength] Número mínimo de caracteres permitidos.
+ * @param {number} [maxLength] Número máximo de caracteres permitidos.
+ *
+ * @param {boolean} [multiline=false] Define se o campo aceita múltiplas linhas (mantido por compatibilidade).
+ * @param {number} [rows=3] Quantidade de linhas visíveis quando `multiline` está ativo.
+ *
+ * ### Estilo / Aparência
+ * @param {import('@mui/material/styles').TypographyVariant} [textVariant] Variante tipográfica do Material UI aplicada ao texto e placeholder.
+ * @param {string} [background] Cor de fundo do campo.
+ * @param {string} [backgroundDisabled] Cor de fundo do campo quando desabilitado.
+ * @param {string} [backgroundFocused] Cor de fundo do campo quando focado.
+ * @param {string} [color] Cor do texto do campo (texto digitado e label).
+ * @param {string} [colorFocused] Cor aplicada ao estado focado (usada como cor de borda no focus).
+ * @param {string} [colorDisabled] Cor do texto do campo quando desabilitado.
+ * @param {string} [borderRadius] Raio da borda do campo.
+ * @param {string} [boxShadow] Sombra do campo.
+ * @param {string} [borderColor] Cor da borda do campo (estado padrão/hover).
+ * @param {string} [padding] Espaçamento interno do input (aplicado no texto e textarea).
+ *
+ * ---
+ * ### Validação
+ * @param {boolean} [required=false] Indica se o campo é obrigatório.
+ * @param {string} [requiredMessage] Mensagem exibida quando o campo obrigatório está vazio.
+ * @param {RegExp | string} [pattern] Expressão regular utilizada para validação do valor (aplicada após sanitização numérica).
+ * @param {string} [patternMessage] Mensagem exibida quando o valor não atende ao pattern.
+ * @param {'change' | 'blur'} [showErrorOn='blur'] Define quando o erro será exibido.
+ * @param {(value: string) => string | null | undefined} [validate] Função de validação customizada (recebe o valor sanitizado).
+ *
+ * ---
+ * ### Eventos
+ * @param {(event: React.ChangeEvent<HTMLInputElement>) => void} [onChange] Callback disparado ao alterar o valor (com `event.target.value` já sanitizado).
+ * @param {(event: React.FocusEvent<HTMLInputElement>) => void} [onBlur] Callback disparado ao perder o foco.
+ *
+ * @example
+ * ```tsx
+ * const Example = () => {
+ *   const [age, setAge] = React.useState('');
+ *
+ *   return (
+ *     <TextFieldNumberValidate
+ *       label="Idade"
+ *       placeholder="Somente números"
+ *       value={age}
+ *       onChange={(e) => setAge(e.target.value)}
+ *       required
+ *       minLength={1}
+ *       maxLength={3}
+ *       showErrorOn="blur"
+ *       borderRadius="6px"
+ *       textVariant="subtitle2"
+ *     />
+ *   );
+ * };
+ * ```
+ */
+const TextFieldNumberValidate = ({ id, label, placeholder, value = '', textVariant, background, backgroundFocused, backgroundDisabled, color, colorFocused, colorDisabled, borderRadius, boxShadow, borderColor, padding, height, disabled = false, maxLength, minLength, required = false, requiredMessage = 'campo obrigatório', pattern, patternMessage = 'formato inválido', validate, showErrorOn = 'blur', onChange, onBlur, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    const [touched, setTouched] = React.useState(false);
+    const sanitizedValue = React.useMemo(() => sanitizeNumeric(value), [value]);
+    const errorMessage = React.useMemo(() => {
+        const v = sanitizedValue;
+        if (showErrorOn === 'change') {
+            return computeError(v, { required, requiredMessage, minLength, pattern, patternMessage, validate });
+        }
+        if (showErrorOn === 'blur' && touched) {
+            return computeError(v, { required, requiredMessage, minLength, pattern, patternMessage, validate });
+        }
+        return null;
+    }, [
+        sanitizedValue,
+        required,
+        requiredMessage,
+        minLength,
+        pattern,
+        patternMessage,
+        validate,
+        showErrorOn,
+        touched,
+    ]);
+    const handleBlur = (event) => {
+        if (!touched)
+            setTouched(true);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    };
+    const handleChange = (event) => {
+        if (!onChange)
+            return;
+        const next = sanitizeNumeric(event.target.value);
+        // Cria um "evento" compatível com o callback, garantindo value sanitizado
+        const syntheticEvent = Object.assign(Object.assign({}, event), { target: Object.assign(Object.assign({}, event.target), { value: next }), currentTarget: Object.assign(Object.assign({}, event.currentTarget), { value: next }) });
+        onChange(syntheticEvent);
+    };
+    const handleKeyDown = (event) => {
+        // Permite teclas de navegação/edição
+        const allowed = [
+            'Backspace',
+            'Delete',
+            'Tab',
+            'Enter',
+            'Escape',
+            'ArrowLeft',
+            'ArrowRight',
+            'ArrowUp',
+            'ArrowDown',
+            'Home',
+            'End',
+        ];
+        if (allowed.includes(event.key))
+            return;
+        // Permite Ctrl/Cmd + atalhos (A, C, V, X)
+        if (event.ctrlKey || event.metaKey)
+            return;
+        // Bloqueia qualquer tecla que não seja dígito
+        if (!/^\d$/.test(event.key)) {
+            event.preventDefault();
+        }
+    };
+    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 : fbbackground;
+    const bgFocused = (_d = backgroundFocused !== null && backgroundFocused !== void 0 ? backgroundFocused : field === null || field === void 0 ? void 0 : field.backgroundFocused) !== null && _d !== void 0 ? _d : bg;
+    const bgDisabled = (_e = backgroundDisabled !== null && backgroundDisabled !== void 0 ? backgroundDisabled : field === null || field === void 0 ? void 0 : field.backgroundDisabled) !== null && _e !== void 0 ? _e : fbbackgroundDisabled;
+    const txt = (_f = color !== null && color !== void 0 ? color : field === null || field === void 0 ? void 0 : field.color) !== null && _f !== void 0 ? _f : fbcolor;
+    const txtDisabled = (_g = colorDisabled !== null && colorDisabled !== void 0 ? colorDisabled : field === null || field === void 0 ? void 0 : field.colorDisabled) !== null && _g !== void 0 ? _g : fbcolorDisabled;
+    const br = (_h = borderRadius !== null && borderRadius !== void 0 ? borderRadius : field === null || field === void 0 ? void 0 : field.borderRadius) !== null && _h !== void 0 ? _h : fbborderRadius;
+    const sh = (_j = boxShadow !== null && boxShadow !== void 0 ? boxShadow : field === null || field === void 0 ? void 0 : field.boxShadow) !== null && _j !== void 0 ? _j : fbboxShadow;
+    const bd = (_k = borderColor !== null && borderColor !== void 0 ? borderColor : field === null || field === void 0 ? void 0 : field.borderColor) !== null && _k !== void 0 ? _k : fbborderColor;
+    const bdFocused = (_l = colorFocused !== null && colorFocused !== void 0 ? colorFocused : field === null || field === void 0 ? void 0 : field.colorFocused) !== null && _l !== void 0 ? _l : fbcolorFocused;
+    const pad = (_m = padding !== null && padding !== void 0 ? padding : field === null || field === void 0 ? void 0 : field.padding) !== null && _m !== void 0 ? _m : fbpadding;
+    const hg = (_o = height !== null && height !== void 0 ? height : field === null || field === void 0 ? void 0 : field.height) !== null && _o !== void 0 ? _o : fbheigth;
+    const typo = (_q = (_p = (textVariant && theme.typography[textVariant])) !== null && _p !== void 0 ? _p : field === null || field === void 0 ? void 0 : field.typography) !== null && _q !== void 0 ? _q : theme.typography.body1;
+    return (_jsx(TextFieldStyled, { id: id, label: label, placeholder: placeholder, value: sanitizedValue, typo: typo, onChange: handleChange, onBlur: handleBlur, background: bg, backgroundFocused: bgFocused, backgroundDisabled: bgDisabled, colorText: txt, colorFocused: bdFocused, colorDisabled: txtDisabled, borderRadius: br, boxShadow: sh, borderColor: bd, padding: pad, disabled: disabled, required: required, fullWidth: true, height: hg, error: Boolean(errorMessage), helperText: errorMessage || ' ', onKeyDown: handleKeyDown, slotProps: {
+            input: {
+                inputProps: Object.assign({ inputMode: 'numeric', pattern: '[0-9]*' }, (typeof maxLength === 'number' ? { maxLength } : {})),
+            },
+        } }));
+};
+TextFieldNumberValidate.displayName = 'TextFieldNumberValidate';
+export default TextFieldNumberValidate;
+//# sourceMappingURL=TextFieldNumberValidate.js.map

package/dist/components/TextFieldNumberValidate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldNumberValidate.js","sourceRoot":"","sources":["../../src/components/TextFieldNumberValidate.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 {
@@ -7,79 +8,166 @@ interface PasswordValidationResult {
     message: string;
     value: string;
 }
-interface TextFieldPasswordProps extends BorderProps, ColorProps, LayoutProps {
+interface TextFieldPasswordProps extends Omit<ColorProps, 'backgroundHover' | 'colorHover'>, Omit<BorderProps, 'border'>, Pick<LayoutProps, 'height' | 'padding' | 'margin'> {
     id?: string;
     label?: string;
     placeholder?: string;
     value?: string;
-    background?: string;
-    backgroundDisabled?: string;
-    color?: string;
-    colorFocused?: string;
-    colorDisabled?: string;
-    borderRadius?: string;
-    boxShadow?: string;
-    borderColor?: string;
-    padding?: string;
+    textVariant?: TypographyVariant;
     disabled?: boolean;
     required?: boolean;
     requiredMessage?: string;
     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>;