@grapadigital/shared-app-modules 0.0.54 → 0.0.55

package/dist/events.d.ts

@@ -0,0 +1,52 @@
+import { ChangeEvent } from 'react';
+import { KeyboardEvent as KeyboardEvent_2 } from 'react';
+
+/**
+ * Lida com a alteração de um input de porcentagem, convertendo o valor do input
+ * em um número decimal entre 0 e 1 e chamando o callback com esse valor.
+ *
+ * Esta função utiliza `preFormatPercentage` para:
+ * - Remover o símbolo de porcentagem ("%").
+ * - Converter o valor em decimal (ex: "50%" → 0.5).
+ * - Limitar valores acima de 100% a 1.
+ * - Retornar `false` (não chama o callback) se o valor não for numérico.
+ *
+ * @param {ChangeEvent<HTMLInputElement>} event - O evento de mudança do input.
+ * @param {(value: number) => void} callback - Função chamada com o valor decimal
+ *   após a formatação.
+ *
+ * @example
+ * <nput
+ *   type="text"
+ *   value={`${percentage * 100}%`}
+ *   onChange={(event) => onChangePercentage(event, setPercentage)}
+ * />
+ *
+ * // Se o usuário digitar "75%", o callback receberá 0.75
+ * // Se o usuário digitar "150%", o callback receberá 1
+ * // Se o usuário digitar "abc", o callback não será chamado
+ */
+export declare const onChangePercentage: (event: ChangeEvent<HTMLInputElement>, callback: (value: number) => void) => void;
+
+/**
+ * Lida com o evento de teclado em um input de porcentagem, garantindo que
+ * ao pressionar "Backspace" o número seja removido corretamente, sem excluir
+ * o símbolo de porcentagem (%).
+ *
+ * Antes dessa função, ao pressionar "Backspace", a porcentagem era removida
+ * em vez do valor numérico.
+ *
+ * @param {KeyboardEvent<HTMLInputElement>} event - O evento de teclado do input.
+ * @param {(value: number) => void} callback - Função chamada com o novo valor numérico
+ *   após a remoção do último dígito.
+ *
+ * @example
+ * <input
+ *   type="text"
+ *   value={`${percentage}%`}
+ *   onKeyDown={(event) => onKeyDownPercentage(event, setPercentage)}
+ * />
+ */
+export declare const onKeyDownPercentage: (event: KeyboardEvent_2<HTMLInputElement>, callback: (value: number) => void) => void;
+
+export { }

package/dist/events.js

@@ -0,0 +1,16 @@
+import { preFormatPercentage as s } from "./utils.js";
+const i = (t, a) => {
+  const e = t.target.value, n = s(e);
+  n !== !1 && a(n);
+}, f = (t, a) => {
+  const e = t.target, n = e.value, c = e.selectionStart, r = e.selectionEnd;
+  if (c === r && t.key === "Backspace") {
+    const u = n.slice(0, -2), o = s(u);
+    if (o === !1) return;
+    a(o);
+  }
+};
+export {
+  i as onChangePercentage,
+  f as onKeyDownPercentage
+};

package/dist/utils.d.ts

@@ -1,5 +1,14 @@
 export declare function formatCurrency(value: number): string;
 
+/**
+ * Formata um valor numérico ou string para uma representação de porcentagem inteira.
+ * Multiplica o valor por 100 e adiciona o símbolo "%".
+ *
+ * @param {string | number} value - O valor original (ex: 0.5 ou "0.5").
+ * @returns {string} O valor formatado como string (ex: "50%").
+ */
+export declare const formatPercentage: (value: string | number) => string;
+
 /**
  * Verifica se o valor fornecido é um número ou uma string que pode ser convertida para número.
  *
@@ -62,6 +71,16 @@ export declare function maskZipCode(value: string): string;
 
 export declare function preFormatCurrency(value: string): number;
 
+/**
+ * Prepara um valor de porcentagem (string ou número) para formato decimal (0 a 1).
+ * Remove o símbolo "%", converte para decimal e limita o resultado a no máximo 1.
+ *
+ * @param {string | number} value - O valor com ou sem símbolo de porcentagem (ex: "85%", 85).
+ * @returns {number | boolean} Retorna o valor decimal (ex: 0.85), um número 1 se for maior que 100%,
+ * ou `false` se a conversão não for um número válido.
+ */
+export declare const preFormatPercentage: (value: string | number) => number | false;
+
 /**
  * Remove qualquer formatação de uma string, deixando apenas os números.
  *

package/dist/utils.js

@@ -1,41 +1,52 @@
+function t(e) {
+  return !isNaN(Number(e));
+}
 function u(e) {
   const r = e.replace(/[^0-9]/g, "");
   return Number(r) / 100;
 }
-function c(e) {
+function a(e) {
   return e.toLocaleString("pt-BR", {
     style: "currency",
     currency: "BRL"
   });
 }
-function a(e) {
+const i = (e) => {
+  const r = t(e) ? e : Number(e);
+  return `${parseInt(String(r * 100))}%`;
+}, l = (e) => {
+  const r = +String(e).replace("%", "");
+  if (!t(r)) return !1;
+  const n = r / 100;
+  return +String(n).split(".")[0] >= 1 ? 1 : n;
+};
+function o(e) {
   return e.replace(/\D/g, "").replace(/^(\d{3})(\d{3})(\d{3})(\d{2})$/, "$1.$2.$3-$4");
 }
-function t(e) {
+function m(e) {
   return e.replace(/\D/g, "").replace(/^(\d{2})(\d{3})(\d{3})(\d{1})$/, "$1.$2.$3-$4");
 }
-function l(e) {
+function s(e) {
   return e.replace(/\D/g, "").replace(
     /^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})$/,
     "$1.$2.$3/$4-$5"
   );
 }
-function o(e) {
+function d(e) {
   return e.replace(/\D/g, "").replace(/^(\d{5})(\d{3})$/, "$1-$2");
 }
-function i(e) {
+function p(e) {
   return e.replace(/\D/g, "");
 }
-function m(e) {
-  return !isNaN(Number(e));
-}
 export {
-  c as formatCurrency,
-  m as isNumber,
-  l as maskCNPJ,
-  a as maskCPF,
-  t as maskRG,
-  o as maskZipCode,
+  a as formatCurrency,
+  i as formatPercentage,
+  t as isNumber,
+  s as maskCNPJ,
+  o as maskCPF,
+  m as maskRG,
+  d as maskZipCode,
   u as preFormatCurrency,
-  i as unmask
+  l as preFormatPercentage,
+  p as unmask
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@grapadigital/shared-app-modules",
   "private": false,
-  "version": "0.0.54",
+  "version": "0.0.55",
   "files": [
     "dist"
   ],
@@ -34,6 +34,10 @@
       "import": "./dist/hooks.js",
       "types": "./dist/hooks.d.ts"
     },
+    "./events": {
+      "import": "./dist/events.js",
+      "types": "./dist/events.d.ts"
+    },
     "./interfaces/*": {
       "types": "./dist/*.d.ts",
       "import": "./dist/*.d.ts"