@tecsinapse/cortex-react 1.3.0-beta.33 → 1.3.0-beta.35

package/dist/cjs/components/Calendar/Calendar.js

@@ -6,6 +6,7 @@ require('@internationalized/date');
 require('react-aria');
 require('react-stately');
 require('@floating-ui/react');
+require('currency.js');
 var CalendarGrid = require('./CalendarGrid.js');
 var CalendarHeader = require('./CalendarHeader.js');
 

package/dist/cjs/components/Calendar/CalendarCell.js

@@ -6,6 +6,7 @@ require('react-aria');
 require('react-stately');
 var useCalendarCell = require('../../hooks/useCalendarCell.js');
 require('@floating-ui/react');
+require('currency.js');
 var calendarCell = require('../../styles/calendar-cell.js');
 require('../../styles/groupButton.js');
 require('../../styles/progressBar.js');

package/dist/cjs/components/Calendar/CalendarGrid.js

@@ -6,6 +6,7 @@ require('react-aria');
 require('react-stately');
 var useCalendarGrid = require('../../hooks/useCalendarGrid.js');
 require('@floating-ui/react');
+require('currency.js');
 var CalendarGridBodyRows = require('./CalendarGridBodyRows.js');
 var CalendarGridHeaderRow = require('./CalendarGridHeaderRow.js');
 

package/dist/cjs/components/Calendar/RangeCalendar.js

@@ -5,6 +5,7 @@ require('@internationalized/date');
 require('react-aria');
 require('react-stately');
 require('@floating-ui/react');
+require('currency.js');
 var useRangeCalendar = require('../../hooks/useRangeCalendar.js');
 var CalendarGrid = require('./CalendarGrid.js');
 var CalendarHeader = require('./CalendarHeader.js');

package/dist/cjs/components/DatePicker/Content.js

@@ -5,6 +5,7 @@ require('@internationalized/date');
 require('react-aria');
 require('react-stately');
 require('@floating-ui/react');
+require('currency.js');
 var useOutsideClickListener = require('../../hooks/useOutsideClickListener.js');
 var Context = require('../Popover/Context.js');
 

package/dist/cjs/components/DatePicker/DatePickerInput.js

@@ -7,6 +7,7 @@ require('react-stately');
 var utils = require('../utils.js');
 var useDatePickerInput = require('../../hooks/useDatePickerInput.js');
 require('@floating-ui/react');
+require('currency.js');
 var Calendar = require('../Calendar/Calendar.js');
 var DateField = require('./DateField.js');
 var DatePickerInputBase = require('./DatePickerInputBase.js');

package/dist/cjs/components/DatePicker/DateRangePickerInput.js

@@ -7,6 +7,7 @@ require('react-stately');
 var utils = require('../utils.js');
 var useDateRangePickerInput = require('../../hooks/useDateRangePickerInput.js');
 require('@floating-ui/react');
+require('currency.js');
 var RangeCalendar = require('../Calendar/RangeCalendar.js');
 var DateField = require('./DateField.js');
 var DatePickerInputBase = require('./DatePickerInputBase.js');

package/dist/cjs/components/Input/Mask.js

@@ -1,32 +1,60 @@
 'use strict';
 
 var React = require('react');
-var reactImask = require('react-imask');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+require('@floating-ui/react');
+var useNumberMask = require('../../hooks/useNumberMask.js');
+var useStringMask = require('../../hooks/useStringMask.js');
 var Root = require('./Root.js');
 
 const InputMask = React.forwardRef(
-  ({ mask, onChange, value, controlled, ...rest }, ref) => {
-    const {
-      ref: iMaskRef,
-      setUnmaskedValue,
-      maskRef
-    } = reactImask.useIMask(mask, {
-      onAccept: (value2, mask2) => {
-        onChange?.({
-          unmaskedValue: mask2._unmaskedValue,
-          value: value2
-        });
+  ({ mask, onChange, value, ...rest }, ref) => {
+    const getInputHook = (value2) => {
+      if (mask !== void 0) {
+        if (Array.isArray(mask) || typeof mask === "function") {
+          return useStringMask.useStringMask(mask, value2);
+        } else {
+          return useNumberMask.useNumberMask(mask, value2);
+        }
+      } else {
+        return [void 0, void 0];
+      }
+    };
+    const [maskValue, setMaskValue] = getInputHook(value ?? "");
+    const _value = maskValue === void 0 ? value?.toString() : maskValue.formatted ? maskValue.formatted : "";
+    React.useEffect(() => {
+      if (onChange) {
+        onChange(maskValue?.raw);
+      }
+    }, [maskValue]);
+    const onChangeValue = React.useCallback(
+      (value2) => {
+        if (maskValue !== void 0 && setMaskValue !== void 0) {
+          setMaskValue(value2);
+        } else onChange?.(value2);
       },
-      ref: ref ? ref : React.createRef(),
-      defaultValue: String(value ?? "")
-    });
+      [value]
+    );
     React.useEffect(() => {
-      if (value && controlled) {
-        setUnmaskedValue(String(value));
-        maskRef.current?.updateValue();
+      if (maskValue !== void 0 && setMaskValue !== void 0 && value !== void 0 && typeof maskValue === "object") {
+        if (maskValue.raw !== void 0 && maskValue.raw.toString() !== value.toString()) {
+          onChangeValue(value);
+        }
+      } else if (maskValue === void 0 && value !== void 0) {
+        onChangeValue(value);
+      }
+    }, [value]);
+    return /* @__PURE__ */ React.createElement(
+      Root.InputRoot,
+      {
+        ...rest,
+        value: _value,
+        onChange: (e) => onChangeValue(e.target.value),
+        ref
       }
-    }, [value, controlled]);
-    return /* @__PURE__ */ React.createElement(Root.InputRoot, { ...rest, ref: iMaskRef });
+    );
   }
 );
 

package/dist/cjs/components/Input/Search.js

@@ -7,6 +7,7 @@ require('react-aria');
 require('react-stately');
 var useDebouncedState = require('../../hooks/useDebouncedState.js');
 require('@floating-ui/react');
+require('currency.js');
 var Box = require('./Box.js');
 var Face = require('./Face.js');
 var Left = require('./Left.js');

package/dist/cjs/components/Input/masks.js

@@ -1,5 +1,7 @@
 'use strict';
 
+var extractNumbersFromString = require('../../utils/extractNumbersFromString.js');
+
 const ExpressionMasks = {
   CPF: "000.000.000-00",
   CNPJ: "00.000.000/0000-00",
@@ -16,7 +18,7 @@ const CurrencyIMask = {
       mask: Number,
       scale: 2,
       thousandsSeparator: ".",
-      padFractionalZeros: true,
+      padFractionalZeros: false,
       radix: ",",
       mapToRadix: ["."]
     }
@@ -30,14 +32,45 @@ const PercentageIMask = {
       mask: Number,
       scale: 2,
       thousandsSeparator: ".",
-      padFractionalZeros: true,
+      padFractionalZeros: false,
       radix: ",",
       mapToRadix: ["."]
     }
   }
 };
+const Masks = {
+  CPF: ["999.999.999-99"],
+  CNPJ: ["99.999.999/9999-99"],
+  DATE: ["99/99/9999"],
+  HOUR: ["99:99"],
+  MONTH_YEAR: ["99/9999"],
+  CEP: ["99999-999"],
+  PHONE: ["(99) 9999-9999"],
+  PHONE_EXTENDED: ["(99) 99999-9999"],
+  COMBINED_PHONE: (value) => {
+    const onlyNumbers = extractNumbersFromString.extractDigitsFromString(value);
+    const isCellPhoneExtended = onlyNumbers.length === 11;
+    return value?.length <= 14 && !isCellPhoneExtended ? Masks.PHONE : Masks.PHONE_EXTENDED;
+  },
+  COMBINED_CPF_CNPJ: (value) => value?.length <= 14 ? Masks.CPF : Masks.CNPJ
+};
+const BRLMask = {
+  symbol: "R$ ",
+  separator: ".",
+  decimal: ",",
+  precision: 2
+};
+const PercentageMask = {
+  symbol: "",
+  separator: ".",
+  decimal: ",",
+  precision: 2
+};
 
+exports.BRLMask = BRLMask;
 exports.CurrencyIMask = CurrencyIMask;
 exports.ExpressionMasks = ExpressionMasks;
+exports.Masks = Masks;
 exports.NumberIMask = NumberIMask;
 exports.PercentageIMask = PercentageIMask;
+exports.PercentageMask = PercentageMask;

package/dist/cjs/components/Menubar/MostUsedList.js

@@ -10,6 +10,7 @@ require('../Button.js');
 require('react-aria');
 require('react-stately');
 require('@floating-ui/react');
+require('currency.js');
 require('../Calendar/CalendarCell.js');
 require('@tecsinapse/cortex-core');
 require('react-icons/fa');

package/dist/cjs/components/Popover/Provider.js

@@ -5,6 +5,7 @@ require('@internationalized/date');
 require('react-aria');
 require('react-stately');
 var useFloatingLogic = require('../../hooks/useFloatingLogic.js');
+require('currency.js');
 var Context = require('./Context.js');
 
 const PopoverProvider = ({

package/dist/cjs/components/Select/Content.js

@@ -5,6 +5,7 @@ require('@internationalized/date');
 require('react-aria');
 require('react-stately');
 require('@floating-ui/react');
+require('currency.js');
 var useOutsideClickListener = require('../../hooks/useOutsideClickListener.js');
 var Context = require('../Popover/Context.js');
 

package/dist/cjs/components/Select/GroupedOptions.js

@@ -6,6 +6,7 @@ require('@internationalized/date');
 require('react-aria');
 require('react-stately');
 require('@floating-ui/react');
+require('currency.js');
 var useSelectGroupedOptions = require('../../hooks/useSelectGroupedOptions.js');
 var Context = require('../Popover/Context.js');
 var Option = require('./Option.js');

package/dist/cjs/components/Select/MultiGroupedOptions.js

@@ -6,6 +6,7 @@ require('@internationalized/date');
 require('react-aria');
 require('react-stately');
 require('@floating-ui/react');
+require('currency.js');
 var useSelectGroupedOptions = require('../../hooks/useSelectGroupedOptions.js');
 var MultiOption = require('./MultiOption.js');
 var SkeletonOptions = require('./SkeletonOptions.js');

package/dist/cjs/components/Select/MultiOptions.js

@@ -6,6 +6,7 @@ require('@internationalized/date');
 require('react-aria');
 require('react-stately');
 require('@floating-ui/react');
+require('currency.js');
 var useSelectOptions = require('../../hooks/useSelectOptions.js');
 var MultiOption = require('./MultiOption.js');
 var SkeletonOptions = require('./SkeletonOptions.js');

package/dist/cjs/components/Select/Options.js

@@ -6,6 +6,7 @@ require('@internationalized/date');
 require('react-aria');
 require('react-stately');
 require('@floating-ui/react');
+require('currency.js');
 var useSelectOptions = require('../../hooks/useSelectOptions.js');
 var Context = require('../Popover/Context.js');
 var Option = require('./Option.js');

package/dist/cjs/components/Tooltip.js

@@ -9,6 +9,7 @@ require('react-aria');
 require('react-stately');
 var utils = require('./utils.js');
 var useFloatingLogic = require('../hooks/useFloatingLogic.js');
+require('currency.js');
 
 const Tooltip = React.forwardRef(
   (props, ref) => {

package/dist/cjs/hooks/useNumberMask.js

@@ -0,0 +1,76 @@
+'use strict';
+
+var currency = require('currency.js');
+var React = require('react');
+var extractNumbersFromString = require('../utils/extractNumbersFromString.js');
+
+const DEFAULT_OPTIONS = {
+  symbol: "R$ ",
+  separator: ".",
+  decimal: ",",
+  precision: 2
+};
+const getRegex = (precision) => new RegExp(`\\B(?=(\\d{${precision}})(?!\\d))`, "g");
+const getInternalNumberAndMask = (value, options) => {
+  const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
+  const { precision = -1 } = mergedOptions;
+  let internalNumber;
+  if (typeof value === "number") {
+    if (precision) {
+      let stringValue = String(value);
+      const decimalIndex = stringValue.indexOf(".");
+      const currentPrecision = decimalIndex + precision;
+      if (decimalIndex !== -1 && currentPrecision <= stringValue.length) {
+        const zeros = stringValue.length + 1 - currentPrecision;
+        for (let i = 0; i < zeros; i++) stringValue = stringValue + `0`;
+      }
+      internalNumber = Number(stringValue);
+    } else {
+      internalNumber = value;
+    }
+  } else {
+    const onlyNumbers = String(extractNumbersFromString.extractNumbersFromString(value));
+    const padZeros = String(onlyNumbers).padStart(precision + 1, "0");
+    internalNumber = Number(padZeros.replace(getRegex(precision), "."));
+  }
+  if (internalNumber > Number.MAX_SAFE_INTEGER) {
+    internalNumber = Number.MAX_SAFE_INTEGER;
+  }
+  if (internalNumber < Number.MIN_SAFE_INTEGER) {
+    internalNumber = Number.MIN_SAFE_INTEGER;
+  }
+  return {
+    internalNumber,
+    mergedOptions
+  };
+};
+const useNumberMask = (options, defaultValue) => {
+  const applyMask = React.useCallback(
+    (value2 = 0) => {
+      const { internalNumber, mergedOptions } = getInternalNumberAndMask(
+        value2,
+        options
+      );
+      return {
+        raw: internalNumber,
+        formatted: currency(internalNumber).format(mergedOptions)
+      };
+    },
+    [options, getRegex]
+  );
+  const [value, setValue] = React.useState(applyMask(defaultValue));
+  const handleChangeValue = React.useCallback(
+    (formattedValue) => {
+      const { raw, formatted } = applyMask(formattedValue);
+      setValue({
+        raw,
+        formatted
+      });
+    },
+    [applyMask, setValue]
+  );
+  return [value, handleChangeValue];
+};
+
+exports.getInternalNumberAndMask = getInternalNumberAndMask;
+exports.useNumberMask = useNumberMask;

package/dist/cjs/hooks/useStringMask.js

@@ -0,0 +1,93 @@
+'use strict';
+
+var React = require('react');
+
+const mergeMask = (value = "", mask) => {
+  let formatted = "";
+  let raw = "";
+  let iMask = 0;
+  let iChars = 0;
+  while (!(iMask === mask.length || iChars === value.length)) {
+    const maskChar = mask[iMask];
+    const valueChar = value[iChars];
+    if (maskChar === valueChar) {
+      formatted += maskChar;
+      iChars++;
+      iMask++;
+      continue;
+    }
+    const rawValueChar = value[iChars];
+    if (typeof maskChar === "object") {
+      iChars++;
+      const maskCharRegex = Array.isArray(maskChar) ? maskChar[0] : maskChar;
+      const matchRegex = RegExp(maskCharRegex).test(valueChar);
+      if (matchRegex) {
+        formatted += valueChar;
+        raw += rawValueChar;
+        iMask++;
+      }
+    } else {
+      formatted += maskChar;
+      iMask++;
+    }
+  }
+  return { raw, formatted };
+};
+const getMask = (mask, newValue) => {
+  let maskArray;
+  const regexArray = [];
+  if (typeof mask === "function") {
+    maskArray = mask(newValue);
+  } else {
+    maskArray = mask;
+  }
+  maskArray.forEach((exp) => {
+    if (typeof exp !== "string") {
+      if (Array.isArray(exp)) regexArray.push(exp);
+      else regexArray.push(exp);
+    } else {
+      for (let i = 0; i < exp.length; i++) {
+        if (exp[i] === "\\") {
+          regexArray.push(exp[i + 1]);
+          i++;
+        } else {
+          if (exp[i] === "9") regexArray.push(/\d/);
+          else if (exp[i] === "a") regexArray.push(/[a-zA-Z]/);
+          else regexArray.push(exp[i]);
+        }
+      }
+    }
+  });
+  return regexArray;
+};
+const useStringMask = (mask, defaultValue) => {
+  const applyMask = React.useCallback(
+    (value2 = "") => {
+      const selectedMask = getMask(mask, value2);
+      const { formatted, raw } = mergeMask(value2, selectedMask);
+      return {
+        raw,
+        formatted
+      };
+    },
+    [mask]
+  );
+  const [value, setValue] = React.useState(
+    applyMask(defaultValue?.toString())
+  );
+  const handleChangeValue = React.useCallback(
+    (formattedValue) => {
+      const { raw, formatted } = applyMask(formattedValue?.toString());
+      setValue({
+        raw,
+        formatted
+      });
+    },
+    [applyMask, setValue]
+  );
+  return [value, handleChangeValue];
+};
+
+exports.getMask = getMask;
+exports.mergeMask = mergeMask;
+exports.useStringMask = useStringMask;

package/dist/cjs/index.js

@@ -41,10 +41,12 @@ var useDatePickerInput = require('./hooks/useDatePickerInput.js');
 var useDateRangePickerInput = require('./hooks/useDateRangePickerInput.js');
 var useDebouncedState = require('./hooks/useDebouncedState.js');
 var useFloatingLogic = require('./hooks/useFloatingLogic.js');
+var useNumberMask = require('./hooks/useNumberMask.js');
 var useOutsideClickListener = require('./hooks/useOutsideClickListener.js');
 var useRangeCalendar = require('./hooks/useRangeCalendar.js');
 var useSelectGroupedOptions = require('./hooks/useSelectGroupedOptions.js');
 var useSelectOptions = require('./hooks/useSelectOptions.js');
+var useStringMask = require('./hooks/useStringMask.js');
 var SnackbarSonner = require('./service/SnackbarSonner.js');
 var MenubarProvider = require('./provider/MenubarProvider.js');
 var SnackbarProvider = require('./provider/SnackbarProvider.js');
@@ -101,16 +103,24 @@ exports.useDatePickerInput = useDatePickerInput.useDatePickerInput;
 exports.useDateRangePickerInput = useDateRangePickerInput.useDateRangePickerInput;
 exports.useDebouncedState = useDebouncedState.useDebouncedState;
 exports.useFloatingLogic = useFloatingLogic.useFloatingLogic;
+exports.getInternalNumberAndMask = useNumberMask.getInternalNumberAndMask;
+exports.useNumberMask = useNumberMask.useNumberMask;
 exports.useOutsideClickListener = useOutsideClickListener.useOutsideClickListener;
 exports.useRangeCalendar = useRangeCalendar.useRangeCalendar;
 exports.useSelectGroupedOptions = useSelectGroupedOptions.useSelectGroupedOptions;
 exports.useSelectOptions = useSelectOptions.useSelectOptions;
+exports.getMask = useStringMask.getMask;
+exports.mergeMask = useStringMask.mergeMask;
+exports.useStringMask = useStringMask.useStringMask;
 exports.SnackbarSonner = SnackbarSonner.SnackbarSonner;
 exports.MenubarProvider = MenubarProvider.MenubarProvider;
 exports.useMenubar = MenubarProvider.useMenubar;
 exports.SnackbarProvider = SnackbarProvider.SnackbarProvider;
 exports.useSnackbar = SnackbarProvider.useSnackbar;
+exports.BRLMask = masks.BRLMask;
 exports.CurrencyIMask = masks.CurrencyIMask;
 exports.ExpressionMasks = masks.ExpressionMasks;
+exports.Masks = masks.Masks;
 exports.NumberIMask = masks.NumberIMask;
 exports.PercentageIMask = masks.PercentageIMask;
+exports.PercentageMask = masks.PercentageMask;

package/dist/cjs/service/SnackbarSonner.js

@@ -11,6 +11,7 @@ require('../components/Button.js');
 require('react-aria');
 require('react-stately');
 require('@floating-ui/react');
+require('currency.js');
 require('../components/Calendar/CalendarCell.js');
 require('@tecsinapse/cortex-core');
 require('react-icons/fa');

package/dist/cjs/utils/extractNumbersFromString.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const extractNumbersFromString = (value) => Number(extractDigitsFromString(value));
+const extractDigitsFromString = (value) => value.replace(/[^0-9]/g, "");
+
+exports.extractDigitsFromString = extractDigitsFromString;
+exports.extractNumbersFromString = extractNumbersFromString;

package/dist/esm/components/Calendar/Calendar.js

@@ -4,6 +4,7 @@ import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
 import '@floating-ui/react';
+import 'currency.js';
 import { CalendarGrid } from './CalendarGrid.js';
 import { CalendarHeader } from './CalendarHeader.js';
 

package/dist/esm/components/Calendar/CalendarCell.js

@@ -4,6 +4,7 @@ import 'react-aria';
 import 'react-stately';
 import { useCalendarCell } from '../../hooks/useCalendarCell.js';
 import '@floating-ui/react';
+import 'currency.js';
 import { calendarCell } from '../../styles/calendar-cell.js';
 import '../../styles/groupButton.js';
 import '../../styles/progressBar.js';

package/dist/esm/components/Calendar/CalendarGrid.js

@@ -4,6 +4,7 @@ import 'react-aria';
 import 'react-stately';
 import { useCalendarGrid } from '../../hooks/useCalendarGrid.js';
 import '@floating-ui/react';
+import 'currency.js';
 import { CalendarGridBodyRows } from './CalendarGridBodyRows.js';
 import { CalendarGridHeaderRow } from './CalendarGridHeaderRow.js';
 

package/dist/esm/components/Calendar/RangeCalendar.js

@@ -3,6 +3,7 @@ import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
 import '@floating-ui/react';
+import 'currency.js';
 import { useRangeCalendar } from '../../hooks/useRangeCalendar.js';
 import { CalendarGrid } from './CalendarGrid.js';
 import { CalendarHeader } from './CalendarHeader.js';

package/dist/esm/components/DatePicker/Content.js

@@ -3,6 +3,7 @@ import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
 import '@floating-ui/react';
+import 'currency.js';
 import { useOutsideClickListener } from '../../hooks/useOutsideClickListener.js';
 import { usePopoverContext } from '../Popover/Context.js';
 

package/dist/esm/components/DatePicker/DatePickerInput.js

@@ -5,6 +5,7 @@ import 'react-stately';
 import { dateToCalendarDate } from '../utils.js';
 import { useDatePickerInput } from '../../hooks/useDatePickerInput.js';
 import '@floating-ui/react';
+import 'currency.js';
 import { Calendar } from '../Calendar/Calendar.js';
 import { DateField } from './DateField.js';
 import { DatePickerInputBase } from './DatePickerInputBase.js';

package/dist/esm/components/DatePicker/DateRangePickerInput.js

@@ -5,6 +5,7 @@ import 'react-stately';
 import { dateToCalendarDate } from '../utils.js';
 import { useDateRangePickerInput } from '../../hooks/useDateRangePickerInput.js';
 import '@floating-ui/react';
+import 'currency.js';
 import { RangeCalendar } from '../Calendar/RangeCalendar.js';
 import { DateField } from './DateField.js';
 import { DatePickerInputBase } from './DatePickerInputBase.js';

package/dist/esm/components/Input/Mask.js

@@ -1,30 +1,58 @@
-import React__default, { createRef, useEffect } from 'react';
-import { useIMask } from 'react-imask';
+import React__default, { useEffect, useCallback } from 'react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import { useNumberMask } from '../../hooks/useNumberMask.js';
+import { useStringMask } from '../../hooks/useStringMask.js';
 import { InputRoot } from './Root.js';
 
 const InputMask = React__default.forwardRef(
-  ({ mask, onChange, value, controlled, ...rest }, ref) => {
-    const {
-      ref: iMaskRef,
-      setUnmaskedValue,
-      maskRef
-    } = useIMask(mask, {
-      onAccept: (value2, mask2) => {
-        onChange?.({
-          unmaskedValue: mask2._unmaskedValue,
-          value: value2
-        });
+  ({ mask, onChange, value, ...rest }, ref) => {
+    const getInputHook = (value2) => {
+      if (mask !== void 0) {
+        if (Array.isArray(mask) || typeof mask === "function") {
+          return useStringMask(mask, value2);
+        } else {
+          return useNumberMask(mask, value2);
+        }
+      } else {
+        return [void 0, void 0];
+      }
+    };
+    const [maskValue, setMaskValue] = getInputHook(value ?? "");
+    const _value = maskValue === void 0 ? value?.toString() : maskValue.formatted ? maskValue.formatted : "";
+    useEffect(() => {
+      if (onChange) {
+        onChange(maskValue?.raw);
+      }
+    }, [maskValue]);
+    const onChangeValue = useCallback(
+      (value2) => {
+        if (maskValue !== void 0 && setMaskValue !== void 0) {
+          setMaskValue(value2);
+        } else onChange?.(value2);
       },
-      ref: ref ? ref : createRef(),
-      defaultValue: String(value ?? "")
-    });
+      [value]
+    );
     useEffect(() => {
-      if (value && controlled) {
-        setUnmaskedValue(String(value));
-        maskRef.current?.updateValue();
+      if (maskValue !== void 0 && setMaskValue !== void 0 && value !== void 0 && typeof maskValue === "object") {
+        if (maskValue.raw !== void 0 && maskValue.raw.toString() !== value.toString()) {
+          onChangeValue(value);
+        }
+      } else if (maskValue === void 0 && value !== void 0) {
+        onChangeValue(value);
+      }
+    }, [value]);
+    return /* @__PURE__ */ React__default.createElement(
+      InputRoot,
+      {
+        ...rest,
+        value: _value,
+        onChange: (e) => onChangeValue(e.target.value),
+        ref
       }
-    }, [value, controlled]);
-    return /* @__PURE__ */ React__default.createElement(InputRoot, { ...rest, ref: iMaskRef });
+    );
   }
 );
 

package/dist/esm/components/Input/Search.js

@@ -5,6 +5,7 @@ import 'react-aria';
 import 'react-stately';
 import { useDebouncedState } from '../../hooks/useDebouncedState.js';
 import '@floating-ui/react';
+import 'currency.js';
 import { InputBox } from './Box.js';
 import { InputFace } from './Face.js';
 import { InputLeft } from './Left.js';

package/dist/esm/components/Input/masks.js

@@ -1,3 +1,5 @@
+import { extractDigitsFromString } from '../../utils/extractNumbersFromString.js';
+
 const ExpressionMasks = {
   CPF: "000.000.000-00",
   CNPJ: "00.000.000/0000-00",
@@ -14,7 +16,7 @@ const CurrencyIMask = {
       mask: Number,
       scale: 2,
       thousandsSeparator: ".",
-      padFractionalZeros: true,
+      padFractionalZeros: false,
       radix: ",",
       mapToRadix: ["."]
     }
@@ -28,11 +30,39 @@ const PercentageIMask = {
       mask: Number,
       scale: 2,
       thousandsSeparator: ".",
-      padFractionalZeros: true,
+      padFractionalZeros: false,
       radix: ",",
       mapToRadix: ["."]
     }
   }
 };
+const Masks = {
+  CPF: ["999.999.999-99"],
+  CNPJ: ["99.999.999/9999-99"],
+  DATE: ["99/99/9999"],
+  HOUR: ["99:99"],
+  MONTH_YEAR: ["99/9999"],
+  CEP: ["99999-999"],
+  PHONE: ["(99) 9999-9999"],
+  PHONE_EXTENDED: ["(99) 99999-9999"],
+  COMBINED_PHONE: (value) => {
+    const onlyNumbers = extractDigitsFromString(value);
+    const isCellPhoneExtended = onlyNumbers.length === 11;
+    return value?.length <= 14 && !isCellPhoneExtended ? Masks.PHONE : Masks.PHONE_EXTENDED;
+  },
+  COMBINED_CPF_CNPJ: (value) => value?.length <= 14 ? Masks.CPF : Masks.CNPJ
+};
+const BRLMask = {
+  symbol: "R$ ",
+  separator: ".",
+  decimal: ",",
+  precision: 2
+};
+const PercentageMask = {
+  symbol: "",
+  separator: ".",
+  decimal: ",",
+  precision: 2
+};
 
-export { CurrencyIMask, ExpressionMasks, NumberIMask, PercentageIMask };
+export { BRLMask, CurrencyIMask, ExpressionMasks, Masks, NumberIMask, PercentageIMask, PercentageMask };

package/dist/esm/components/Menubar/MostUsedList.js

@@ -8,6 +8,7 @@ import '../Button.js';
 import 'react-aria';
 import 'react-stately';
 import '@floating-ui/react';
+import 'currency.js';
 import '../Calendar/CalendarCell.js';
 import '@tecsinapse/cortex-core';
 import 'react-icons/fa';

package/dist/esm/components/Popover/Provider.js

@@ -3,6 +3,7 @@ import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
 import { useFloatingLogic } from '../../hooks/useFloatingLogic.js';
+import 'currency.js';
 import { Context } from './Context.js';
 
 const PopoverProvider = ({

package/dist/esm/components/Select/Content.js

@@ -3,6 +3,7 @@ import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
 import '@floating-ui/react';
+import 'currency.js';
 import { useOutsideClickListener } from '../../hooks/useOutsideClickListener.js';
 import { usePopoverContext } from '../Popover/Context.js';
 

package/dist/esm/components/Select/GroupedOptions.js

@@ -4,6 +4,7 @@ import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
 import '@floating-ui/react';
+import 'currency.js';
 import { useSelectGroupedOptions } from '../../hooks/useSelectGroupedOptions.js';
 import { usePopoverContext } from '../Popover/Context.js';
 import { SelectOption } from './Option.js';

package/dist/esm/components/Select/MultiGroupedOptions.js

@@ -4,6 +4,7 @@ import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
 import '@floating-ui/react';
+import 'currency.js';
 import { useSelectGroupedOptions } from '../../hooks/useSelectGroupedOptions.js';
 import { SelectMultiOption } from './MultiOption.js';
 import { SkeletonOptions } from './SkeletonOptions.js';

package/dist/esm/components/Select/MultiOptions.js

@@ -4,6 +4,7 @@ import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
 import '@floating-ui/react';
+import 'currency.js';
 import { useSelectOptions } from '../../hooks/useSelectOptions.js';
 import { SelectMultiOption } from './MultiOption.js';
 import { SkeletonOptions } from './SkeletonOptions.js';

package/dist/esm/components/Select/Options.js

@@ -4,6 +4,7 @@ import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
 import '@floating-ui/react';
+import 'currency.js';
 import { useSelectOptions } from '../../hooks/useSelectOptions.js';
 import { usePopoverContext } from '../Popover/Context.js';
 import { SelectOption } from './Option.js';

package/dist/esm/components/Tooltip.js

@@ -5,6 +5,7 @@ import 'react-aria';
 import 'react-stately';
 import { cloneWithProps } from './utils.js';
 import { useFloatingLogic } from '../hooks/useFloatingLogic.js';
+import 'currency.js';
 
 const Tooltip = forwardRef(
   (props, ref) => {

package/dist/esm/hooks/useNumberMask.js

@@ -0,0 +1,73 @@
+import currency from 'currency.js';
+import { useCallback, useState } from 'react';
+import { extractNumbersFromString } from '../utils/extractNumbersFromString.js';
+
+const DEFAULT_OPTIONS = {
+  symbol: "R$ ",
+  separator: ".",
+  decimal: ",",
+  precision: 2
+};
+const getRegex = (precision) => new RegExp(`\\B(?=(\\d{${precision}})(?!\\d))`, "g");
+const getInternalNumberAndMask = (value, options) => {
+  const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
+  const { precision = -1 } = mergedOptions;
+  let internalNumber;
+  if (typeof value === "number") {
+    if (precision) {
+      let stringValue = String(value);
+      const decimalIndex = stringValue.indexOf(".");
+      const currentPrecision = decimalIndex + precision;
+      if (decimalIndex !== -1 && currentPrecision <= stringValue.length) {
+        const zeros = stringValue.length + 1 - currentPrecision;
+        for (let i = 0; i < zeros; i++) stringValue = stringValue + `0`;
+      }
+      internalNumber = Number(stringValue);
+    } else {
+      internalNumber = value;
+    }
+  } else {
+    const onlyNumbers = String(extractNumbersFromString(value));
+    const padZeros = String(onlyNumbers).padStart(precision + 1, "0");
+    internalNumber = Number(padZeros.replace(getRegex(precision), "."));
+  }
+  if (internalNumber > Number.MAX_SAFE_INTEGER) {
+    internalNumber = Number.MAX_SAFE_INTEGER;
+  }
+  if (internalNumber < Number.MIN_SAFE_INTEGER) {
+    internalNumber = Number.MIN_SAFE_INTEGER;
+  }
+  return {
+    internalNumber,
+    mergedOptions
+  };
+};
+const useNumberMask = (options, defaultValue) => {
+  const applyMask = useCallback(
+    (value2 = 0) => {
+      const { internalNumber, mergedOptions } = getInternalNumberAndMask(
+        value2,
+        options
+      );
+      return {
+        raw: internalNumber,
+        formatted: currency(internalNumber).format(mergedOptions)
+      };
+    },
+    [options, getRegex]
+  );
+  const [value, setValue] = useState(applyMask(defaultValue));
+  const handleChangeValue = useCallback(
+    (formattedValue) => {
+      const { raw, formatted } = applyMask(formattedValue);
+      setValue({
+        raw,
+        formatted
+      });
+    },
+    [applyMask, setValue]
+  );
+  return [value, handleChangeValue];
+};
+
+export { getInternalNumberAndMask, useNumberMask };

package/dist/esm/hooks/useStringMask.js

@@ -0,0 +1,89 @@
+import { useCallback, useState } from 'react';
+
+const mergeMask = (value = "", mask) => {
+  let formatted = "";
+  let raw = "";
+  let iMask = 0;
+  let iChars = 0;
+  while (!(iMask === mask.length || iChars === value.length)) {
+    const maskChar = mask[iMask];
+    const valueChar = value[iChars];
+    if (maskChar === valueChar) {
+      formatted += maskChar;
+      iChars++;
+      iMask++;
+      continue;
+    }
+    const rawValueChar = value[iChars];
+    if (typeof maskChar === "object") {
+      iChars++;
+      const maskCharRegex = Array.isArray(maskChar) ? maskChar[0] : maskChar;
+      const matchRegex = RegExp(maskCharRegex).test(valueChar);
+      if (matchRegex) {
+        formatted += valueChar;
+        raw += rawValueChar;
+        iMask++;
+      }
+    } else {
+      formatted += maskChar;
+      iMask++;
+    }
+  }
+  return { raw, formatted };
+};
+const getMask = (mask, newValue) => {
+  let maskArray;
+  const regexArray = [];
+  if (typeof mask === "function") {
+    maskArray = mask(newValue);
+  } else {
+    maskArray = mask;
+  }
+  maskArray.forEach((exp) => {
+    if (typeof exp !== "string") {
+      if (Array.isArray(exp)) regexArray.push(exp);
+      else regexArray.push(exp);
+    } else {
+      for (let i = 0; i < exp.length; i++) {
+        if (exp[i] === "\\") {
+          regexArray.push(exp[i + 1]);
+          i++;
+        } else {
+          if (exp[i] === "9") regexArray.push(/\d/);
+          else if (exp[i] === "a") regexArray.push(/[a-zA-Z]/);
+          else regexArray.push(exp[i]);
+        }
+      }
+    }
+  });
+  return regexArray;
+};
+const useStringMask = (mask, defaultValue) => {
+  const applyMask = useCallback(
+    (value2 = "") => {
+      const selectedMask = getMask(mask, value2);
+      const { formatted, raw } = mergeMask(value2, selectedMask);
+      return {
+        raw,
+        formatted
+      };
+    },
+    [mask]
+  );
+  const [value, setValue] = useState(
+    applyMask(defaultValue?.toString())
+  );
+  const handleChangeValue = useCallback(
+    (formattedValue) => {
+      const { raw, formatted } = applyMask(formattedValue?.toString());
+      setValue({
+        raw,
+        formatted
+      });
+    },
+    [applyMask, setValue]
+  );
+  return [value, handleChangeValue];
+};
+
+export { getMask, mergeMask, useStringMask };

package/dist/esm/index.js

@@ -39,11 +39,13 @@ export { useDatePickerInput } from './hooks/useDatePickerInput.js';
 export { useDateRangePickerInput } from './hooks/useDateRangePickerInput.js';
 export { useDebouncedState } from './hooks/useDebouncedState.js';
 export { useFloatingLogic } from './hooks/useFloatingLogic.js';
+export { getInternalNumberAndMask, useNumberMask } from './hooks/useNumberMask.js';
 export { useOutsideClickListener } from './hooks/useOutsideClickListener.js';
 export { useRangeCalendar } from './hooks/useRangeCalendar.js';
 export { useSelectGroupedOptions } from './hooks/useSelectGroupedOptions.js';
 export { useSelectOptions } from './hooks/useSelectOptions.js';
+export { getMask, mergeMask, useStringMask } from './hooks/useStringMask.js';
 export { SnackbarSonner } from './service/SnackbarSonner.js';
 export { MenubarProvider, useMenubar } from './provider/MenubarProvider.js';
 export { SnackbarProvider, useSnackbar } from './provider/SnackbarProvider.js';
-export { CurrencyIMask, ExpressionMasks, NumberIMask, PercentageIMask } from './components/Input/masks.js';
+export { BRLMask, CurrencyIMask, ExpressionMasks, Masks, NumberIMask, PercentageIMask, PercentageMask } from './components/Input/masks.js';

package/dist/esm/service/SnackbarSonner.js

@@ -9,6 +9,7 @@ import '../components/Button.js';
 import 'react-aria';
 import 'react-stately';
 import '@floating-ui/react';
+import 'currency.js';
 import '../components/Calendar/CalendarCell.js';
 import '@tecsinapse/cortex-core';
 import 'react-icons/fa';

package/dist/esm/utils/extractNumbersFromString.js

@@ -0,0 +1,4 @@
+const extractNumbersFromString = (value) => Number(extractDigitsFromString(value));
+const extractDigitsFromString = (value) => value.replace(/[^0-9]/g, "");
+
+export { extractDigitsFromString, extractNumbersFromString };

package/dist/types/components/Input/masks.d.ts

@@ -37,3 +37,27 @@ export declare const PercentageIMask: {
         };
     };
 };
+export declare const Masks: {
+    CPF: string[];
+    CNPJ: string[];
+    DATE: string[];
+    HOUR: string[];
+    MONTH_YEAR: string[];
+    CEP: string[];
+    PHONE: string[];
+    PHONE_EXTENDED: string[];
+    COMBINED_PHONE: (value: string) => string[];
+    COMBINED_CPF_CNPJ: (value: string) => string[];
+};
+export declare const BRLMask: {
+    symbol: string;
+    separator: string;
+    decimal: string;
+    precision: number;
+};
+export declare const PercentageMask: {
+    symbol: string;
+    separator: string;
+    decimal: string;
+    precision: number;
+};

package/dist/types/components/Input/types.d.ts

@@ -1,4 +1,5 @@
 import { InputBaseVariants } from '@tecsinapse/cortex-core';
+import { CurrencyOptions } from '../../hooks';
 export interface InputPropsBase {
     variants?: InputBaseVariants;
     label?: string;
@@ -18,15 +19,13 @@ export interface InputRightProps extends React.HTMLAttributes<HTMLDivElement> {
 export interface InputSearchProps extends InputProps {
     bounceTimeout?: number;
 }
-export type InputMaskEvent = {
-    value: string;
-    unmaskedValue: string;
-};
-export interface Mask extends Record<string, any> {
-    mask: any;
-}
-export interface InputMaskProps extends Omit<InputProps, 'onChange'> {
-    onChange?: (e: InputMaskEvent) => void;
-    mask: Mask;
-    controlled?: boolean;
+export interface MaskValue {
+    formatted?: string;
+    raw?: string | number;
+}
+export type MaskType = string | RegExp | Array<RegExp>;
+export interface InputMaskProps extends Omit<InputProps, 'onChange' | 'value'> {
+    value?: string | number;
+    onChange?: (value: any) => void;
+    mask?: (MaskType[] | ((value: string) => MaskType[])) | CurrencyOptions;
 }

package/dist/types/components/Kanban.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface KanbanProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+export declare const Kanban: {
+    Root: ({ children, className, ...rest }: KanbanProps) => JSX.Element;
+    Header: ({ children, className, ...rest }: KanbanProps) => JSX.Element;
+    Body: ({ children, className, ...rest }: KanbanProps) => JSX.Element;
+    ContainerList: ({ children, className, ...rest }: KanbanProps) => JSX.Element;
+};
+export {};

package/dist/types/hooks/index.d.ts

@@ -5,7 +5,9 @@ export * from './useDatePickerInput';
 export * from './useDateRangePickerInput';
 export * from './useDebouncedState';
 export * from './useFloatingLogic';
+export * from './useNumberMask';
 export * from './useOutsideClickListener';
 export * from './useRangeCalendar';
 export * from './useSelectGroupedOptions';
 export * from './useSelectOptions';
+export * from './useStringMask';

package/dist/types/hooks/useNumberMask.d.ts

@@ -0,0 +1,8 @@
+import currency from 'currency.js';
+import { MaskValue } from '../components';
+export type CurrencyOptions = currency.Options;
+export declare const getInternalNumberAndMask: (value: string | number, options?: CurrencyOptions) => {
+    internalNumber: number;
+    mergedOptions: CurrencyOptions;
+};
+export declare const useNumberMask: (options?: CurrencyOptions, defaultValue?: string | number) => [MaskValue, (value: string | number) => void];

package/dist/types/hooks/useStringMask.d.ts

@@ -0,0 +1,4 @@
+import { MaskType, MaskValue } from '../components';
+export declare const mergeMask: (value: string | undefined, mask: MaskType[]) => MaskValue;
+export declare const getMask: (mask: MaskType[] | ((value: string) => MaskType[]), newValue: string) => MaskType[];
+export declare const useStringMask: (mask: MaskType[] | ((value: string) => MaskType[]), defaultValue?: string | number) => [MaskValue, (text: string | number) => void];

package/dist/types/tests/Kanban.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/utils/extractNumbersFromString.d.ts

@@ -0,0 +1,2 @@
+export declare const extractNumbersFromString: (value: string) => number;
+export declare const extractDigitsFromString: (value: string) => string;

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

@@ -0,0 +1 @@
+export * from './extractNumbersFromString';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.3.0-beta.33",
+  "version": "1.3.0-beta.35",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.18",
     "@internationalized/date": "*",
-    "@tecsinapse/cortex-core": "0.3.0-beta.14",
+    "@tecsinapse/cortex-core": "0.3.1-beta.1",
     "clsx": "*",
     "react-aria": "^3.33.1",
     "react-icons": "^5.2.1",
@@ -43,5 +43,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "f996aec807a7de3b51e645fe600c9e976369b35b"
+  "gitHead": "0fefaea56687bb5f672b66677c15bdc0d653cec0"
 }