karsten-design-system 1.0.77 → 1.0.78

package/dist/stories/components/input.js

@@ -4,16 +4,44 @@ import { IconField } from 'primereact/iconfield';
 import { InputIcon } from 'primereact/inputicon';
 import { InputText } from 'primereact/inputtext';
 import { useState, useId } from 'react';
+import { maskMoneyBRL, maskCEP, maskNumberWithDecimal, maskPhone, maskCellphone, maskOnlyNumbers, maskCNPJ, maskCPF } from '../../utils/masks/index.js';
 
 const variants = {
     green: 'text-green',
     gray: 'text-gray',
 };
-function Input({ onChange, placeholder, disabled = false, error, icon, onClickIcon, iconColor = 'green', label, ...props }) {
+function Input({ onChange, placeholder, disabled = false, error, icon, onClickIcon, iconColor = 'green', label, mask, ...props }) {
     const [isOnFocus, setIsOnFocus] = useState(false);
     const inputId = useId();
     const handleChange = (e) => {
-        onChange(e.target.value);
+        let value = e.target.value;
+        switch (mask) {
+            case 'cpf':
+                value = maskCPF(value);
+                break;
+            case 'cnpj':
+                value = maskCNPJ(value);
+                break;
+            case 'numbers':
+                value = maskOnlyNumbers(value);
+                break;
+            case 'cellphone':
+                value = maskCellphone(value);
+                break;
+            case 'phone':
+                value = maskPhone(value);
+                break;
+            case 'decimal':
+                value = maskNumberWithDecimal(value);
+                break;
+            case 'cep':
+                value = maskCEP(value);
+                break;
+            case 'currency':
+                value = maskMoneyBRL(value);
+                break;
+        }
+        onChange(value);
     };
     const hasError = (props.value && error && !disabled) ||
         (!!error && !disabled && props.value?.length === 0);

package/dist/stories/components/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../../src/stories/components/input.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAiBA,MAAM,QAAQ,GAAG;AACf,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,IAAI,EAAE,WAAW;CAClB;AAEK,SAAU,KAAK,CAAC,EACpB,QAAQ,EACR,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,IAAI,EACJ,WAAW,EACX,SAAS,GAAG,OAAO,EACnB,KAAK,EACL,GAAG,KAAK,EACG,EAAA;IACX,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACjD,IAAA,MAAM,OAAO,GAAG,KAAK,EAAE;AAEvB,IAAA,MAAM,YAAY,GAAG,CAAC,CAAgC,KAAI;AACxD,QAAA,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;AAC1B,KAAC;IAED,MAAM,QAAQ,GACZ,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,IAAI,CAAC,QAAQ;AAClC,SAAC,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,CAAC;IAErD,QACEA,sBAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,8BAA8B,aAC3CA,sBAAC,CAAA,SAAS,EAAC,EAAA,SAAS,EAAC,OAAO,aAC1BC,qBAAC,CAAA,SAAS,EACR,EAAA,SAAS,EAAE,IAAI,CACb,CAAM,GAAA,EAAA,IAAI,CAAsB,oBAAA,CAAA,EAChC;AACE,8BAAE;AACF,8BAAE;AACA,kCAAE;kCACA,QAAQ,CAAC,SAAS,CAAC,CAC1B,EACD,OAAO,EAAE,WAAW,GACpB,EACFA,qBAAA,CAAC,SAAS,EACR,EAAA,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,MAAM,YAAY,CAAC,IAAI,CAAC,EACjC,MAAM,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,EACjC,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAE,IAAI,CACb,4DAA4D,EAC5D,QAAQ,GAAG,iBAAiB,GAAG,kCAAkC,CAClE,KACG,KAAK,EAAA,CACT,IACQ,EACZA,qBAAA,CAAA,OAAA,EAAA,EACE,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,IAAI,CACb,+GAA+G,EAC/G,SAAS,IAAI,KAAK,CAAC;AACjB,sBAAE;AACF,sBAAE;AACA,0BAAE;0BACA,qBAAqB,EAC3B;AACE,sBAAE;AACF,sBAAE;AACA,0BAAE;AACF,0BAAE,SAAS,IAAI,KAAK,CAAC;AACnB,8BAAE;AACF,8BAAE,WAAW,CACpB,YAEA,KAAK,EAAA,CACA,EACP,QAAQ,IAAIA,qBAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAE,KAAK,EAAQ,CAAA,CAAA,EAAA,CACpE;AAEV;;;;"}
+{"version":3,"file":"input.js","sources":["../../../../src/stories/components/input.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/types/stories/components/input.d.ts

@@ -8,10 +8,11 @@ export type InputProps = {
     icon?: string;
     iconColor?: keyof typeof variants;
     label?: string;
+    mask?: 'cpf' | 'cnpj' | 'numbers' | 'cellphone' | 'cep' | 'decimal' | 'phone' | 'currency';
 } & Omit<InputTextProps, 'onChange'>;
 declare const variants: {
     green: string;
     gray: string;
 };
-export declare function Input({ onChange, placeholder, disabled, error, icon, onClickIcon, iconColor, label, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare function Input({ onChange, placeholder, disabled, error, icon, onClickIcon, iconColor, label, mask, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/utils/masks/index.d.ts

@@ -0,0 +1,8 @@
+export declare const maskCPF: (value: string) => string;
+export declare const maskCNPJ: (value: string) => string;
+export declare const maskOnlyNumbers: (value: string) => string;
+export declare const maskNumberWithDecimal: (value: string) => string;
+export declare const maskCellphone: (value: string) => string;
+export declare const maskPhone: (value: string) => string;
+export declare const maskCEP: (value: string) => string;
+export declare const maskMoneyBRL: (value: string) => string;

package/dist/utils/masks/index.js

@@ -0,0 +1,88 @@
+const maskCPF = (value) => {
+    value = value.replace(/\D/g, '');
+    value = value.slice(0, 11);
+    if (value.length <= 3) {
+        return value;
+    }
+    if (value.length <= 6) {
+        return value.replace(/(\d{3})(\d{1,})/, '$1.$2');
+    }
+    if (value.length <= 9) {
+        return value.replace(/(\d{3})(\d{3})(\d{1,})/, '$1.$2.$3');
+    }
+    return value.replace(/(\d{3})(\d{3})(\d{3})(\d{1,})/, '$1.$2.$3-$4');
+};
+const maskCNPJ = (value) => {
+    value = value.replace(/\D/g, '');
+    value = value.slice(0, 14);
+    if (value.length <= 2) {
+        return value;
+    }
+    if (value.length <= 5) {
+        return value.replace(/(\d{2})(\d{1,})/, '$1.$2');
+    }
+    if (value.length <= 8) {
+        return value.replace(/(\d{2})(\d{3})(\d{1,})/, '$1.$2.$3');
+    }
+    if (value.length <= 12) {
+        return value.replace(/(\d{2})(\d{3})(\d{3})(\d{1,})/, '$1.$2.$3/$4');
+    }
+    return value.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{1,})/, '$1.$2.$3/$4-$5');
+};
+// export const maskNumber = (value: string) => {
+//   value = value.replace(/\D/g, '');
+//   value = value.slice(0, 12);
+//   return value.replace(/(\d)(\d{2})$/, '$1,$2');
+// };
+const maskOnlyNumbers = (value) => {
+    value = value.replace(/\D/g, '');
+    value = value.slice(0, 15);
+    return value;
+};
+const maskNumberWithDecimal = (value) => {
+    const regex = /^[0-9]+([.,][0-9]+)?$/;
+    value = value.slice(0, 20);
+    if (!regex.test(value)) {
+        return value.replace(/[^0-9.,]/g, '').replace(/([.,]).*\1/g, '$1');
+    }
+    return value;
+};
+const maskCellphone = (value) => {
+    value = value.replace(/\D/g, '');
+    value = value.slice(0, 11);
+    if (value.length <= 2) {
+        return value.replace(/(\d{2})/, '($1');
+    }
+    if (value.length <= 6) {
+        return value.replace(/(\d{2})(\d{4})/, '($1) $2');
+    }
+    return value.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2-$3');
+};
+const maskPhone = (value) => {
+    value = value.replace(/\D/g, '');
+    value = value.slice(0, 10);
+    if (value.length <= 2) {
+        return value.replace(/(\d{2})/, '($1');
+    }
+    if (value.length <= 6) {
+        return value.replace(/(\d{2})(\d{4})/, '($1) $2');
+    }
+    return value.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2-$3');
+};
+const maskCEP = (value) => {
+    value = value.replace(/\D/g, '');
+    value = value.slice(0, 8);
+    return value.replace(/(\d{5})(\d{1,})/, '$1-$2');
+};
+const maskMoneyBRL = (value) => {
+    value = value.replace(/\D/g, '');
+    value = value.slice(0, 13);
+    const numericValue = parseFloat(value) / 100;
+    return numericValue.toLocaleString('pt-BR', {
+        style: 'currency',
+        currency: 'BRL',
+    });
+};
+
+export { maskCEP, maskCNPJ, maskCPF, maskCellphone, maskMoneyBRL, maskNumberWithDecimal, maskOnlyNumbers, maskPhone };
+//# sourceMappingURL=index.js.map

package/dist/utils/masks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/utils/masks/index.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "karsten-design-system",
   "description": "Karsten Design System Components",
-  "version": "1.0.77",
+  "version": "1.0.78",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",