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

package/README.md

@@ -24,14 +24,28 @@ A biblioteca inclui os seguintes componentes:
   Faz a validação do e-mail, dispara um `onSubmit` assíncrono (obrigatório) e exibe a mensagem retornada.    
 
 - **TextFieldPassword**
-  Componente de campo de senha baseado no TextField do Material UI, com botão para alternar entre mostrar/ocultar a senha. O componente:
+  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`
 
 - **TextFieldValidate**  
   Componente de campo de texto com validação, baseado no TextField do Material UI.
-  Permite personalização visual via `styled` e suporte a validações comuns (obrigatório, tamanho mínimo, regex) e validação customizada.   
+  Permite personalização visual via `styled` e suporte a validações comuns (obrigatório, tamanho mínimo, regex) e validação customizada. 
+
+- **TextFieldNumberValidate**  
+   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.
+
+- **TextFieldBirthDateWithAge**  
+   Campo de data de nascimento com entrada somente numérica, máscara `dd/mm/yyyy`,
+   validações comuns (required, min/maxLength, pattern) + validação customizada,
+   e cálculo automático de idade exibido na label.  
+
+- **TextFieldCPFValidate**  
+   Campo de CPF com entrada somente numérica, máscara `000.000.000-00`,
+   validações comuns (required, min/maxLength, pattern) + validação customizada.    
 
 - **NotificationSnackbar**
   Componente que exibe uma notificação no topo da tela utilizando o Snackbar e Alert do Material UI.  

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":"AAAA,YAAY,CAAC;;AAGb,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,EAAa,MAAM,EAAqB,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAYtF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IACjC,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,MAAM;IAChB,GAAG,EAAE,CAAC;CACP,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,EAAE;IAC9B,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAC1B,CAAC;QACC,OAAO;QACP,QAAQ;QACR,SAAS;QACT,QAAQ;QACR,YAAY;QACZ,WAAW;QACX,cAAc;QACd,WAAW;QACX,QAAQ;QACR,iBAAiB;QACjB,YAAY;QACZ,MAAM;KACP,CAAC,QAAQ,CAAC,IAAc,CAAC;CAC7B,CAAC,CAcA,CAAC,EACC,KAAK,EACL,MAAM,EACN,OAAO,EACP,MAAM,EACN,UAAU,EACV,SAAS,EACT,YAAY,EACZ,SAAS,EACT,MAAM,EACN,eAAe,EACf,UAAU,EACV,IAAI,EACL,EAAE,EAAE,CAAC,+BACJ,KAAK;IACL,MAAM;IACN,OAAO;IACP,MAAM;IACN,YAAY;IACZ,SAAS,EACT,eAAe,EAAE,UAAU,EAC3B,KAAK,EAAE,SAAS,EAChB,MAAM,IAEH,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,KAEf,SAAS,EAAE;QACT,eAAe,EAAE,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,UAAU;QAC9C,KAAK,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,SAAS;KAC/B,EAED,oBAAoB,EAAE;QACpB,eAAe,EAAE,aAAa;KAC/B,EAED,0BAA0B,EAAE;QAC1B,eAAe,EAAE,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,aAAa;QACjD,KAAK,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,SAAS;KAC/B,IACD,CACH,CAAC;AAGF,MAAM,QAAQ,GAA4B,CAAC,EACzC,KAAK,EACL,OAAO,EAEP,KAAK,EACL,MAAM,EACN,OAAO,EACP,MAAM,EACN,UAAU,EACV,KAAK,EACL,YAAY,EACZ,SAAS,EACT,MAAM,EACN,eAAe,EACf,UAAU,GAEX,EAAE,EAAE;;IAEH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,SAAS,GAAG,MAAA,MAAA,KAAK,CAAC,gBAAgB,0CAAE,KAAK,0CAAE,IAAI,CAAC;IAEtD,MAAM,KAAK,GAAG,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,mCAAI,KAAK,mCAAI,MAAM,CAAC;IAClD,MAAM,KAAK,GAAG,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,mCAAI,MAAM,mCAAI,MAAM,CAAC;IACpD,MAAM,KAAK,GAAG,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,mCAAI,OAAO,mCAAI,MAAM,CAAC;IACtD,MAAM,KAAK,GAAG,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,mCAAI,MAAM,mCAAI,GAAG,CAAC;IACjD,MAAM,KAAK,GAAG,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,UAAU,mCAAI,UAAU,mCAAI,SAAS,CAAC;IAC/D,MAAM,MAAM,GAAG,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,mCAAI,KAAK,mCAAI,SAAS,CAAC;IACtD,MAAM,MAAM,GAAG,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,YAAY,mCAAI,YAAY,mCAAI,SAAS,CAAC;IACpE,MAAM,MAAM,GAAG,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,mCAAI,SAAS,mCAAI,MAAM,CAAC;IAE3D,MAAM,MAAM,GAAG,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,mCAAI,MAAM,mCAAI,SAAS,CAAC;IACxD,MAAM,UAAU,GAAG,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,eAAe,mCAAI,eAAe,mCAAI,KAAK,CAAC;IAC1E,MAAM,WAAW,GAAG,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,UAAU,mCAAI,UAAU,mCAAI,MAAM,CAAC;IAElE,MAAM,IAAI,GACR,MAAA,MAAA,CAAC,OAAO,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,mCACtC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,UAAU,mCACrB,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC;IAEzB,OAAO,CACL,KAAC,cAAc,cACZ,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,CACxB,KAAC,UAAU,IAET,KAAK,EAAE,IAAI,EACX,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,EACb,OAAO,EAAE,KAAK,EACd,MAAM,EAAE,KAAK,EACb,UAAU,EAAE,KAAK,EACjB,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,MAAM,EACpB,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,MAAM,EACd,eAAe,EAAE,UAAU,EAC3B,UAAU,EAAE,WAAW,EACvB,IAAI,EAAE,IAAI,IAbL,GAAG,IAAI,IAAI,GAAG,EAAE,CAcrB,CACH,CAAC,GACa,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAClC,eAAe,QAAQ,CAAC"}

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 Omit<ColorProps, 'backgroundHover' | 'colorHover'>, Omit<BorderProps, 'border'>, Pick<LayoutProps, 'height' | 'padding' | 'width' | 'margin'> {
+    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/TextFieldBirthDateWithAge.d.ts

@@ -0,0 +1,83 @@
+import React from 'react';
+import { TypographyVariant } from '@mui/material/styles';
+import { BorderProps, ColorProps, LayoutProps } from '@pipelinesolucoes/theme';
+interface TextFieldBirthDateWithAgeProps extends Omit<ColorProps, 'backgroundHover' | 'colorHover'>, Omit<BorderProps, 'border'>, Pick<LayoutProps, 'height' | 'padding'> {
+    id?: string;
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    textVariant?: TypographyVariant;
+    disabled?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    required?: boolean;
+    requiredMessage?: string;
+    pattern?: RegExp | string;
+    patternMessage?: string;
+    showErrorOn?: 'change' | 'blur';
+    validate?: (value: string) => string | null | undefined;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /**
+     * Callback disparado sempre que a idade puder ser calculada.
+     * Retorna `null` quando a data é inválida ou incompleta.
+     */
+    onAgeChange?: (age: number | null) => void;
+}
+/**
+ * Campo de data de nascimento com entrada somente numérica, máscara `dd/mm/yyyy`,
+ * validações comuns (required, min/maxLength, pattern) + validação customizada,
+ * e cálculo automático de idade exibido na label.
+ *
+ * Regras:
+ * - O usuário digita apenas números.
+ * - Ao digitar, o valor é formatado automaticamente como `dd/mm/yyyy` (sem normalizar ano).
+ * - Ao perder o foco, se estiver em `dd/mm/yy`, o componente normaliza o ano para 4 dígitos.
+ * - Quando a data estiver completa e for válida, a idade é calculada e exibida na label.
+ * - Erros sempre têm prioridade no helperText (a label não exibe idade quando há erro).
+ *
+ * Tokens de estilo (ordem de prioridade):
+ * - props do componente
+ * - `theme.pipelinesolucoes.forms.field`
+ * - fallback interno (constantes `fb*`)
+ *
+ * @param {string} [id] Identificador do campo.
+ * @param {string} [label] Rótulo exibido acima do campo.
+ * @param {string} [placeholder='dd/mm/aaaa'] Placeholder do input.
+ * @param {string} [value] Valor do campo (controlado).
+ * @param {boolean} [disabled=false] Define se o campo está desabilitado.
+ *
+ * @param {number} [minLength] Número mínimo de caracteres para validação (após máscara).
+ * @param {number} [maxLength] Número máximo de caracteres para validação (após máscara).
+ *
+ * @param {boolean} [required=false] Define se é obrigatório.
+ * @param {string} [requiredMessage='Campo obrigatório'] Mensagem de obrigatório.
+ * @param {RegExp | string} [pattern] Pattern para validação do valor formatado.
+ * @param {string} [patternMessage='Formato inválido'] Mensagem do pattern.
+ * @param {'change' | 'blur'} [showErrorOn='blur'] Momento de exibir o erro.
+ * @param {(value: string) => string | null | undefined} [validate] Validação customizada do valor formatado.
+ *
+ * @param {(age: number | null) => void} [onAgeChange] Callback com a idade calculada (ou null se inválido/incompleto).
+ * @param {(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void} [onChange] Callback disparado ao alterar (já com valor formatado).
+ * @param {(event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void} [onBlur] Callback disparado ao perder o foco.
+ *
+ * @example
+ * ```tsx
+ * const Example = () => {
+ *   const [birthDate, setBirthDate] = React.useState('');
+ *
+ *   return (
+ *     <TextFieldBirthDateWithAge
+ *       label="Data de nascimento"
+ *       value={birthDate}
+ *       required
+ *       showErrorOn="blur"
+ *       onChange={(e) => setBirthDate(e.target.value)}
+ *       onAgeChange={(age) => console.log('idade', age)}
+ *     />
+ *   );
+ * };
+ * ```
+ */
+declare const TextFieldBirthDateWithAge: React.FC<TextFieldBirthDateWithAgeProps>;
+export default TextFieldBirthDateWithAge;