@tecsinapse/cortex-react 1.3.0-beta.26 → 1.3.0-beta.28

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

@@ -0,0 +1,21 @@
+'use strict';
+
+var React = require('react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+require('@floating-ui/react');
+var useOutsideClickListener = require('../../hooks/useOutsideClickListener.js');
+var Context = require('../Popover/Context.js');
+
+const Content = ({ children }) => {
+  const { setIsOpen } = Context.usePopoverContext();
+  const ref = React.useRef(null);
+  useOutsideClickListener.useOutsideClickListener({
+    ref,
+    onClickOutside: () => setIsOpen(false)
+  });
+  return /* @__PURE__ */ React.createElement("div", { ref }, children);
+};
+
+exports.Content = Content;

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

@@ -10,40 +10,43 @@ require('@floating-ui/react');
 var Calendar = require('../Calendar/Calendar.js');
 var DateField = require('./DateField.js');
 var DatePickerInputBase = require('./DatePickerInputBase.js');
+var index = require('../Popover/index.js');
+var Context = require('../Popover/Context.js');
+var Content = require('./Content.js');
 
-const DatePickerInput = (props) => {
+const DatePickerInputWithPopover = (props) => {
+  const { setIsOpen } = Context.usePopoverContext();
   const { onChange, value, label, variants } = props;
   const { fieldProps, state, ref } = useDatePickerInput.useDatePickerInput({ value, onChange });
-  return /* @__PURE__ */ React.createElement("div", { "data-testid": "date-picker-input" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { ref, "data-testid": "date-picker-input" }, /* @__PURE__ */ React.createElement(index.Popover.Trigger, null, /* @__PURE__ */ React.createElement(
     DatePickerInputBase.DatePickerInputBase,
     {
-      onClickCalendar: () => state.isOpen ? state.close() : state.open(),
       variants: {
         ...variants,
         intent: state.isInvalid ? "error" : variants?.intent
       },
       label
     },
-    /* @__PURE__ */ React.createElement("div", { ref }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
       DateField.DateField,
       {
         ...fieldProps,
         onChange: (value2) => {
           state.setDateValue(value2);
-          state.close();
         }
       }
     ))
-  ), state.isOpen ? /* @__PURE__ */ React.createElement("div", { className: "absolute" }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(index.Popover.Content, { className: "bg-inherit shadow-none border-none" }, /* @__PURE__ */ React.createElement(
     Calendar.Calendar,
     {
       value,
       onChange: (value2) => {
+        setIsOpen(false);
         state.setDateValue(utils.dateToCalendarDate(value2));
-        state.close();
       }
     }
-  )) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+  )));
 };
+const DatePickerInput = (props) => /* @__PURE__ */ React.createElement(index.Popover.Root, { placement: "bottom-start", trigger: "click" }, /* @__PURE__ */ React.createElement(Content.Content, null, /* @__PURE__ */ React.createElement(DatePickerInputWithPopover, { ...props })));
 
 exports.DatePickerInput = DatePickerInput;

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

@@ -8,14 +8,12 @@ var index = require('../Input/index.js');
 const DatePickerInputBase = ({
   children,
   variants,
-  label,
-  onClickCalendar
+  label
 }) => {
   return /* @__PURE__ */ React.createElement(index.Input.Face, { variants, "data-testid": "date-picker-input-base" }, /* @__PURE__ */ React.createElement("span", { className: cortexCore.labelStyle({}) }, label), /* @__PURE__ */ React.createElement("div", { className: cortexCore.inputBox("", label, "w-full flex flex-row") }, children), /* @__PURE__ */ React.createElement(index.Input.Right, { className: "" }, /* @__PURE__ */ React.createElement(
     lia.LiaCalendar,
     {
       className: "cursor-pointer mt-centi",
-      onClick: onClickCalendar,
       "data-testid": "date-picker-input-base-calendar"
     }
   )));

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

@@ -10,28 +10,30 @@ require('@floating-ui/react');
 var RangeCalendar = require('../Calendar/RangeCalendar.js');
 var DateField = require('./DateField.js');
 var DatePickerInputBase = require('./DatePickerInputBase.js');
+var index = require('../Popover/index.js');
+var Context = require('../Popover/Context.js');
+var Content = require('./Content.js');
 
-const DateRangePickerInput = (props) => {
+const DateRangePickerInputWithPopover = (props) => {
+  const { setIsOpen } = Context.usePopoverContext();
   const { onChange, value, label, variants } = props;
   const { endFieldProps, startFieldProps, ref, state } = useDateRangePickerInput.useDateRangePickerInput({ value, onChange });
-  return /* @__PURE__ */ React.createElement("div", { "data-testid": "date-range-picker-input" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { ref, "data-testid": "date-range-picker-input" }, /* @__PURE__ */ React.createElement(index.Popover.Trigger, null, /* @__PURE__ */ React.createElement(
     DatePickerInputBase.DatePickerInputBase,
     {
-      onClickCalendar: () => state.isOpen ? state.close() : state.open(),
       variants: {
         ...variants,
         intent: state.isInvalid ? "error" : variants?.intent
       },
       label
     },
-    /* @__PURE__ */ React.createElement("div", { ref, className: "flex flex-row gap-x-micro items-center" }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { className: "flex flex-row gap-x-micro items-center" }, /* @__PURE__ */ React.createElement(
       DateField.DateField,
       {
         ...startFieldProps,
         value: utils.dateToCalendarDate(value?.start),
         onChange: (value2) => {
           state.setDate("start", value2);
-          state.close();
         }
       }
     ), /* @__PURE__ */ React.createElement("span", null, "-"), /* @__PURE__ */ React.createElement(
@@ -41,23 +43,23 @@ const DateRangePickerInput = (props) => {
         value: utils.dateToCalendarDate(value?.end),
         onChange: (value2) => {
           state.setDate("end", value2);
-          state.close();
         }
       }
     ))
-  ), state.isOpen ? /* @__PURE__ */ React.createElement("div", { className: "absolute" }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(index.Popover.Content, { className: "bg-inherit shadow-none border-none" }, /* @__PURE__ */ React.createElement(
     RangeCalendar.RangeCalendar,
     {
       value,
       onChange: (value2) => {
+        setIsOpen?.(false);
         state.setDateRange({
           start: utils.dateToCalendarDate(value2.start),
           end: utils.dateToCalendarDate(value2.end)
         });
-        state.close();
       }
     }
-  )) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+  )));
 };
+const DateRangePickerInput = (props) => /* @__PURE__ */ React.createElement(index.Popover.Root, { placement: "bottom-start", trigger: "click" }, /* @__PURE__ */ React.createElement(Content.Content, null, /* @__PURE__ */ React.createElement(DateRangePickerInputWithPopover, { ...props })));
 
 exports.DateRangePickerInput = DateRangePickerInput;

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

@@ -4,11 +4,13 @@ var React = require('react');
 var reactImask = require('react-imask');
 var index = require('./index.js');
 
-const useIMaskLocal = (mask, inputProps, ref, unmaskedRef) => {
+const useIMaskLocal = (mask, inputProps, ref, onChangeMask) => {
   const { ref: iMaskRef, maskRef } = reactImask.useIMask(mask, {
-    onAccept: () => {
-      if (unmaskedRef) unmaskedRef.current = maskRef.current.unmaskedValue;
-      return inputProps.onChange?.(maskRef.current);
+    onAccept: (value, mask2) => {
+      onChangeMask?.({
+        unmaskedValue: mask2._unmaskedValue,
+        value
+      });
     },
     ref: ref ? ref : React.createRef()
   });
@@ -21,33 +23,11 @@ const useIMaskLocal = (mask, inputProps, ref, unmaskedRef) => {
     iMaskRef
   };
 };
-const InputMaskExpression = React.forwardRef(({ mask, unmaskedRef, ...rest }, ref) => {
-  const { iMaskRef } = useIMaskLocal({ mask }, rest, ref, unmaskedRef);
-  return /* @__PURE__ */ React.createElement(index.Input.Root, { ...rest, ref: iMaskRef });
-});
-const InputMaskNumber = React.forwardRef(({ unmaskedRef, ...rest }, ref) => {
-  const mask = { mask: Number, scale: 2 };
-  const { iMaskRef } = useIMaskLocal(mask, rest, ref, unmaskedRef);
-  return /* @__PURE__ */ React.createElement(index.Input.Root, { ...rest, ref: iMaskRef });
-});
-const InputMaskCurrency = React.forwardRef(({ unmaskedRef, ...rest }, ref) => {
-  const mask = {
-    mask: "R$ num",
-    blocks: {
-      num: {
-        mask: Number,
-        scale: 2,
-        thousandsSeparator: ".",
-        padFractionalZeros: true,
-        radix: ",",
-        mapToRadix: ["."]
-      }
-    }
-  };
-  const { iMaskRef } = useIMaskLocal(mask, rest, ref, unmaskedRef);
-  return /* @__PURE__ */ React.createElement(index.Input.Root, { ...rest, ref: iMaskRef });
-});
+const InputMask = React.forwardRef(
+  ({ mask, onChange, ...rest }, ref) => {
+    const { iMaskRef } = useIMaskLocal(mask, rest, ref, onChange);
+    return /* @__PURE__ */ React.createElement(index.Input.Root, { ...rest, ref: iMaskRef });
+  }
+);
 
-exports.InputMaskCurrency = InputMaskCurrency;
-exports.InputMaskExpression = InputMaskExpression;
-exports.InputMaskNumber = InputMaskNumber;
+exports.InputMask = InputMask;

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

@@ -15,9 +15,7 @@ const Input = {
   Left: Left.InputLeft,
   Right: Right.InputRight,
   Search: Search.InputSearch,
-  MaskCurrency: Mask.InputMaskCurrency,
-  MaskNumber: Mask.InputMaskNumber,
-  MaskExpression: Mask.InputMaskExpression
+  Mask: Mask.InputMask
 };
 
 exports.Input = Input;

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

@@ -0,0 +1,43 @@
+'use strict';
+
+const ExpressionMasks = {
+  CPF: "000.000.000-00",
+  CNPJ: "00.000.000/0000-00",
+  PHONE: "(00) 0000-0000",
+  PHONE_EXTENDED: "(00) 00000-0000",
+  DATE: "00/00/0000",
+  CEP: "00000-000"
+};
+const NumberIMask = { mask: Number, scale: 2 };
+const CurrencyIMask = {
+  mask: "R$ num",
+  blocks: {
+    num: {
+      mask: Number,
+      scale: 2,
+      thousandsSeparator: ".",
+      padFractionalZeros: true,
+      radix: ",",
+      mapToRadix: ["."]
+    }
+  }
+};
+const PercentageIMask = {
+  mask: "num %",
+  lazy: false,
+  blocks: {
+    num: {
+      mask: Number,
+      scale: 2,
+      thousandsSeparator: ".",
+      padFractionalZeros: true,
+      radix: ",",
+      mapToRadix: ["."]
+    }
+  }
+};
+
+exports.CurrencyIMask = CurrencyIMask;
+exports.ExpressionMasks = ExpressionMasks;
+exports.NumberIMask = NumberIMask;
+exports.PercentageIMask = PercentageIMask;

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

@@ -21,11 +21,11 @@ require('../Input/Mask.js');
 require('../Input/Right.js');
 require('../Input/Root.js');
 require('../Input/Search.js');
+require('../Popover/Context.js');
 require('../GroupButton.js');
 require('../Hint.js');
 var index = require('./index.js');
 require('../Modal.js');
-require('../Popover/Context.js');
 require('../../styles/calendar-cell.js');
 require('../../styles/groupButton.js');
 require('../../styles/progressBar.js');

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

@@ -11,7 +11,7 @@ const SelectRoot = ({
   keyExtractor,
   labelExtractor
 }) => {
-  return /* @__PURE__ */ React.createElement(index.Popover.Provider, null, /* @__PURE__ */ React.createElement(index.Popover.Root, { placement: "bottom", trigger: "click" }, /* @__PURE__ */ React.createElement(context.SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React.createElement(Content.Content, null, children))));
+  return /* @__PURE__ */ React.createElement(index.Popover.Root, { placement: "bottom", trigger: "click" }, /* @__PURE__ */ React.createElement(context.SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React.createElement(Content.Content, null, children)));
 };
 
 exports.SelectRoot = SelectRoot;

package/dist/cjs/index.js

@@ -48,6 +48,7 @@ var useSelectOptions = require('./hooks/useSelectOptions.js');
 var SnackbarSonner = require('./service/SnackbarSonner.js');
 var MenubarProvider = require('./provider/MenubarProvider.js');
 var SnackbarProvider = require('./provider/SnackbarProvider.js');
+var masks = require('./components/Input/masks.js');
 
 
 
@@ -109,3 +110,7 @@ exports.MenubarProvider = MenubarProvider.MenubarProvider;
 exports.useMenubar = MenubarProvider.useMenubar;
 exports.SnackbarProvider = SnackbarProvider.SnackbarProvider;
 exports.useSnackbar = SnackbarProvider.useSnackbar;
+exports.CurrencyIMask = masks.CurrencyIMask;
+exports.ExpressionMasks = masks.ExpressionMasks;
+exports.NumberIMask = masks.NumberIMask;
+exports.PercentageIMask = masks.PercentageIMask;

package/dist/cjs/service/SnackbarSonner.js

@@ -22,6 +22,7 @@ require('../components/Input/Mask.js');
 require('../components/Input/Right.js');
 require('../components/Input/Root.js');
 require('../components/Input/Search.js');
+require('../components/Popover/Context.js');
 require('../components/GroupButton.js');
 require('../components/Hint.js');
 require('../provider/MenubarProvider.js');
@@ -36,7 +37,6 @@ require('../components/Menubar/Header.js');
 require('../components/Menubar/Item.js');
 require('../components/Menubar/SubItem.js');
 require('../components/Modal.js');
-require('../components/Popover/Context.js');
 require('../styles/calendar-cell.js');
 require('../styles/groupButton.js');
 require('../styles/progressBar.js');

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

@@ -0,0 +1,19 @@
+import React__default, { useRef } from 'react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import { useOutsideClickListener } from '../../hooks/useOutsideClickListener.js';
+import { usePopoverContext } from '../Popover/Context.js';
+
+const Content = ({ children }) => {
+  const { setIsOpen } = usePopoverContext();
+  const ref = useRef(null);
+  useOutsideClickListener({
+    ref,
+    onClickOutside: () => setIsOpen(false)
+  });
+  return /* @__PURE__ */ React__default.createElement("div", { ref }, children);
+};
+
+export { Content };

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

@@ -8,40 +8,43 @@ import '@floating-ui/react';
 import { Calendar } from '../Calendar/Calendar.js';
 import { DateField } from './DateField.js';
 import { DatePickerInputBase } from './DatePickerInputBase.js';
+import { Popover } from '../Popover/index.js';
+import { usePopoverContext } from '../Popover/Context.js';
+import { Content } from './Content.js';
 
-const DatePickerInput = (props) => {
+const DatePickerInputWithPopover = (props) => {
+  const { setIsOpen } = usePopoverContext();
   const { onChange, value, label, variants } = props;
   const { fieldProps, state, ref } = useDatePickerInput({ value, onChange });
-  return /* @__PURE__ */ React__default.createElement("div", { "data-testid": "date-picker-input" }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { ref, "data-testid": "date-picker-input" }, /* @__PURE__ */ React__default.createElement(Popover.Trigger, null, /* @__PURE__ */ React__default.createElement(
     DatePickerInputBase,
     {
-      onClickCalendar: () => state.isOpen ? state.close() : state.open(),
       variants: {
         ...variants,
         intent: state.isInvalid ? "error" : variants?.intent
       },
       label
     },
-    /* @__PURE__ */ React__default.createElement("div", { ref }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
       DateField,
       {
         ...fieldProps,
         onChange: (value2) => {
           state.setDateValue(value2);
-          state.close();
         }
       }
     ))
-  ), state.isOpen ? /* @__PURE__ */ React__default.createElement("div", { className: "absolute" }, /* @__PURE__ */ React__default.createElement(
+  )), /* @__PURE__ */ React__default.createElement(Popover.Content, { className: "bg-inherit shadow-none border-none" }, /* @__PURE__ */ React__default.createElement(
     Calendar,
     {
       value,
       onChange: (value2) => {
+        setIsOpen(false);
         state.setDateValue(dateToCalendarDate(value2));
-        state.close();
       }
     }
-  )) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null));
+  )));
 };
+const DatePickerInput = (props) => /* @__PURE__ */ React__default.createElement(Popover.Root, { placement: "bottom-start", trigger: "click" }, /* @__PURE__ */ React__default.createElement(Content, null, /* @__PURE__ */ React__default.createElement(DatePickerInputWithPopover, { ...props })));
 
 export { DatePickerInput };

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

@@ -6,14 +6,12 @@ import { Input } from '../Input/index.js';
 const DatePickerInputBase = ({
   children,
   variants,
-  label,
-  onClickCalendar
+  label
 }) => {
   return /* @__PURE__ */ React__default.createElement(Input.Face, { variants, "data-testid": "date-picker-input-base" }, /* @__PURE__ */ React__default.createElement("span", { className: labelStyle({}) }, label), /* @__PURE__ */ React__default.createElement("div", { className: inputBox("", label, "w-full flex flex-row") }, children), /* @__PURE__ */ React__default.createElement(Input.Right, { className: "" }, /* @__PURE__ */ React__default.createElement(
     LiaCalendar,
     {
       className: "cursor-pointer mt-centi",
-      onClick: onClickCalendar,
       "data-testid": "date-picker-input-base-calendar"
     }
   )));

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

@@ -8,28 +8,30 @@ import '@floating-ui/react';
 import { RangeCalendar } from '../Calendar/RangeCalendar.js';
 import { DateField } from './DateField.js';
 import { DatePickerInputBase } from './DatePickerInputBase.js';
+import { Popover } from '../Popover/index.js';
+import { usePopoverContext } from '../Popover/Context.js';
+import { Content } from './Content.js';
 
-const DateRangePickerInput = (props) => {
+const DateRangePickerInputWithPopover = (props) => {
+  const { setIsOpen } = usePopoverContext();
   const { onChange, value, label, variants } = props;
   const { endFieldProps, startFieldProps, ref, state } = useDateRangePickerInput({ value, onChange });
-  return /* @__PURE__ */ React__default.createElement("div", { "data-testid": "date-range-picker-input" }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { ref, "data-testid": "date-range-picker-input" }, /* @__PURE__ */ React__default.createElement(Popover.Trigger, null, /* @__PURE__ */ React__default.createElement(
     DatePickerInputBase,
     {
-      onClickCalendar: () => state.isOpen ? state.close() : state.open(),
       variants: {
         ...variants,
         intent: state.isInvalid ? "error" : variants?.intent
       },
       label
     },
-    /* @__PURE__ */ React__default.createElement("div", { ref, className: "flex flex-row gap-x-micro items-center" }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-row gap-x-micro items-center" }, /* @__PURE__ */ React__default.createElement(
       DateField,
       {
         ...startFieldProps,
         value: dateToCalendarDate(value?.start),
         onChange: (value2) => {
           state.setDate("start", value2);
-          state.close();
         }
       }
     ), /* @__PURE__ */ React__default.createElement("span", null, "-"), /* @__PURE__ */ React__default.createElement(
@@ -39,23 +41,23 @@ const DateRangePickerInput = (props) => {
         value: dateToCalendarDate(value?.end),
         onChange: (value2) => {
           state.setDate("end", value2);
-          state.close();
         }
       }
     ))
-  ), state.isOpen ? /* @__PURE__ */ React__default.createElement("div", { className: "absolute" }, /* @__PURE__ */ React__default.createElement(
+  )), /* @__PURE__ */ React__default.createElement(Popover.Content, { className: "bg-inherit shadow-none border-none" }, /* @__PURE__ */ React__default.createElement(
     RangeCalendar,
     {
       value,
       onChange: (value2) => {
+        setIsOpen?.(false);
         state.setDateRange({
           start: dateToCalendarDate(value2.start),
           end: dateToCalendarDate(value2.end)
         });
-        state.close();
       }
     }
-  )) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null));
+  )));
 };
+const DateRangePickerInput = (props) => /* @__PURE__ */ React__default.createElement(Popover.Root, { placement: "bottom-start", trigger: "click" }, /* @__PURE__ */ React__default.createElement(Content, null, /* @__PURE__ */ React__default.createElement(DateRangePickerInputWithPopover, { ...props })));
 
 export { DateRangePickerInput };

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

@@ -2,11 +2,13 @@ import React__default, { createRef, useEffect } from 'react';
 import { useIMask } from 'react-imask';
 import { Input } from './index.js';
 
-const useIMaskLocal = (mask, inputProps, ref, unmaskedRef) => {
+const useIMaskLocal = (mask, inputProps, ref, onChangeMask) => {
   const { ref: iMaskRef, maskRef } = useIMask(mask, {
-    onAccept: () => {
-      if (unmaskedRef) unmaskedRef.current = maskRef.current.unmaskedValue;
-      return inputProps.onChange?.(maskRef.current);
+    onAccept: (value, mask2) => {
+      onChangeMask?.({
+        unmaskedValue: mask2._unmaskedValue,
+        value
+      });
     },
     ref: ref ? ref : createRef()
   });
@@ -19,31 +21,11 @@ const useIMaskLocal = (mask, inputProps, ref, unmaskedRef) => {
     iMaskRef
   };
 };
-const InputMaskExpression = React__default.forwardRef(({ mask, unmaskedRef, ...rest }, ref) => {
-  const { iMaskRef } = useIMaskLocal({ mask }, rest, ref, unmaskedRef);
-  return /* @__PURE__ */ React__default.createElement(Input.Root, { ...rest, ref: iMaskRef });
-});
-const InputMaskNumber = React__default.forwardRef(({ unmaskedRef, ...rest }, ref) => {
-  const mask = { mask: Number, scale: 2 };
-  const { iMaskRef } = useIMaskLocal(mask, rest, ref, unmaskedRef);
-  return /* @__PURE__ */ React__default.createElement(Input.Root, { ...rest, ref: iMaskRef });
-});
-const InputMaskCurrency = React__default.forwardRef(({ unmaskedRef, ...rest }, ref) => {
-  const mask = {
-    mask: "R$ num",
-    blocks: {
-      num: {
-        mask: Number,
-        scale: 2,
-        thousandsSeparator: ".",
-        padFractionalZeros: true,
-        radix: ",",
-        mapToRadix: ["."]
-      }
-    }
-  };
-  const { iMaskRef } = useIMaskLocal(mask, rest, ref, unmaskedRef);
-  return /* @__PURE__ */ React__default.createElement(Input.Root, { ...rest, ref: iMaskRef });
-});
+const InputMask = React__default.forwardRef(
+  ({ mask, onChange, ...rest }, ref) => {
+    const { iMaskRef } = useIMaskLocal(mask, rest, ref, onChange);
+    return /* @__PURE__ */ React__default.createElement(Input.Root, { ...rest, ref: iMaskRef });
+  }
+);
 
-export { InputMaskCurrency, InputMaskExpression, InputMaskNumber };
+export { InputMask };

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

@@ -1,7 +1,7 @@
 import { InputBox } from './Box.js';
 import { InputFace } from './Face.js';
 import { InputLeft } from './Left.js';
-import { InputMaskCurrency, InputMaskNumber, InputMaskExpression } from './Mask.js';
+import { InputMask } from './Mask.js';
 import { InputRight } from './Right.js';
 import { InputRoot } from './Root.js';
 import { InputSearch } from './Search.js';
@@ -13,9 +13,7 @@ const Input = {
   Left: InputLeft,
   Right: InputRight,
   Search: InputSearch,
-  MaskCurrency: InputMaskCurrency,
-  MaskNumber: InputMaskNumber,
-  MaskExpression: InputMaskExpression
+  Mask: InputMask
 };
 
 export { Input };

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

@@ -0,0 +1,38 @@
+const ExpressionMasks = {
+  CPF: "000.000.000-00",
+  CNPJ: "00.000.000/0000-00",
+  PHONE: "(00) 0000-0000",
+  PHONE_EXTENDED: "(00) 00000-0000",
+  DATE: "00/00/0000",
+  CEP: "00000-000"
+};
+const NumberIMask = { mask: Number, scale: 2 };
+const CurrencyIMask = {
+  mask: "R$ num",
+  blocks: {
+    num: {
+      mask: Number,
+      scale: 2,
+      thousandsSeparator: ".",
+      padFractionalZeros: true,
+      radix: ",",
+      mapToRadix: ["."]
+    }
+  }
+};
+const PercentageIMask = {
+  mask: "num %",
+  lazy: false,
+  blocks: {
+    num: {
+      mask: Number,
+      scale: 2,
+      thousandsSeparator: ".",
+      padFractionalZeros: true,
+      radix: ",",
+      mapToRadix: ["."]
+    }
+  }
+};
+
+export { CurrencyIMask, ExpressionMasks, NumberIMask, PercentageIMask };

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

@@ -19,11 +19,11 @@ import '../Input/Mask.js';
 import '../Input/Right.js';
 import '../Input/Root.js';
 import '../Input/Search.js';
+import '../Popover/Context.js';
 import '../GroupButton.js';
 import '../Hint.js';
 import { Menubar } from './index.js';
 import '../Modal.js';
-import '../Popover/Context.js';
 import '../../styles/calendar-cell.js';
 import '../../styles/groupButton.js';
 import '../../styles/progressBar.js';

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

@@ -9,7 +9,7 @@ const SelectRoot = ({
   keyExtractor,
   labelExtractor
 }) => {
-  return /* @__PURE__ */ React__default.createElement(Popover.Provider, null, /* @__PURE__ */ React__default.createElement(Popover.Root, { placement: "bottom", trigger: "click" }, /* @__PURE__ */ React__default.createElement(SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React__default.createElement(Content, null, children))));
+  return /* @__PURE__ */ React__default.createElement(Popover.Root, { placement: "bottom", trigger: "click" }, /* @__PURE__ */ React__default.createElement(SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React__default.createElement(Content, null, children)));
 };
 
 export { SelectRoot };

package/dist/esm/index.js

@@ -46,3 +46,4 @@ export { useSelectOptions } from './hooks/useSelectOptions.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';

package/dist/esm/service/SnackbarSonner.js

@@ -20,6 +20,7 @@ import '../components/Input/Mask.js';
 import '../components/Input/Right.js';
 import '../components/Input/Root.js';
 import '../components/Input/Search.js';
+import '../components/Popover/Context.js';
 import '../components/GroupButton.js';
 import '../components/Hint.js';
 import '../provider/MenubarProvider.js';
@@ -34,7 +35,6 @@ import '../components/Menubar/Header.js';
 import '../components/Menubar/Item.js';
 import '../components/Menubar/SubItem.js';
 import '../components/Modal.js';
-import '../components/Popover/Context.js';
 import '../styles/calendar-cell.js';
 import '../styles/groupButton.js';
 import '../styles/progressBar.js';

package/dist/types/components/DatePicker/Content.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export interface ContentProps {
+    children: ReactNode;
+}
+export declare const Content: ({ children }: ContentProps) => JSX.Element;

package/dist/types/components/DatePicker/DatePickerInputBase.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import { InputPropsBase } from '../Input';
 interface DatePickerInputBaseProps extends InputPropsBase {
-    onClickCalendar: () => void;
     children: React.ReactElement;
 }
-export declare const DatePickerInputBase: ({ children, variants, label, onClickCalendar, }: DatePickerInputBaseProps) => JSX.Element;
+export declare const DatePickerInputBase: ({ children, variants, label, }: DatePickerInputBaseProps) => JSX.Element;
 export {};

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

@@ -1,5 +1,3 @@
 import React from 'react';
-import { InputMaskExpressionProps, InputMaskProps } from './types';
-export declare const InputMaskExpression: React.ForwardRefExoticComponent<InputMaskExpressionProps & React.RefAttributes<HTMLInputElement>>;
-export declare const InputMaskNumber: React.ForwardRefExoticComponent<InputMaskProps & React.RefAttributes<HTMLInputElement>>;
-export declare const InputMaskCurrency: React.ForwardRefExoticComponent<InputMaskProps & React.RefAttributes<HTMLInputElement>>;
+import { InputMaskProps } from './types';
+export declare const InputMask: React.ForwardRefExoticComponent<InputMaskProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -5,8 +5,7 @@ export declare const Input: {
     Left: import("react").ForwardRefExoticComponent<import("./types").InputLeftProps & import("react").RefAttributes<HTMLDivElement>>;
     Right: import("react").ForwardRefExoticComponent<import("./types").InputRightProps & import("react").RefAttributes<HTMLDivElement>>;
     Search: import("react").ForwardRefExoticComponent<import("./types").InputSearchProps & import("react").RefAttributes<HTMLInputElement>>;
-    MaskCurrency: import("react").ForwardRefExoticComponent<import("./types").InputMaskProps & import("react").RefAttributes<HTMLInputElement>>;
-    MaskNumber: import("react").ForwardRefExoticComponent<import("./types").InputMaskProps & import("react").RefAttributes<HTMLInputElement>>;
-    MaskExpression: import("react").ForwardRefExoticComponent<import("./types").InputMaskExpressionProps & import("react").RefAttributes<HTMLInputElement>>;
+    Mask: import("react").ForwardRefExoticComponent<import("./types").InputMaskProps & import("react").RefAttributes<HTMLInputElement>>;
 };
+export * from './masks';
 export * from './types';

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

@@ -0,0 +1,39 @@
+export declare const ExpressionMasks: {
+    CPF: string;
+    CNPJ: string;
+    PHONE: string;
+    PHONE_EXTENDED: string;
+    DATE: string;
+    CEP: string;
+};
+export declare const NumberIMask: {
+    mask: NumberConstructor;
+    scale: number;
+};
+export declare const CurrencyIMask: {
+    mask: string;
+    blocks: {
+        num: {
+            mask: NumberConstructor;
+            scale: number;
+            thousandsSeparator: string;
+            padFractionalZeros: boolean;
+            radix: string;
+            mapToRadix: string[];
+        };
+    };
+};
+export declare const PercentageIMask: {
+    mask: string;
+    lazy: boolean;
+    blocks: {
+        num: {
+            mask: NumberConstructor;
+            scale: number;
+            thousandsSeparator: string;
+            padFractionalZeros: boolean;
+            radix: string;
+            mapToRadix: string[];
+        };
+    };
+};

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

@@ -1,5 +1,4 @@
 import { InputBaseVariants } from '@tecsinapse/cortex-core';
-import { MutableRefObject } from 'react';
 export interface InputPropsBase {
     variants?: InputBaseVariants;
     label?: string;
@@ -19,9 +18,14 @@ export interface InputRightProps extends React.HTMLAttributes<HTMLDivElement> {
 export interface InputSearchProps extends InputProps {
     bounceTimeout?: number;
 }
-export interface InputMaskProps extends InputProps {
-    unmaskedRef?: MutableRefObject<string>;
-}
-export interface InputMaskExpressionProps extends InputMaskProps {
+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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.3.0-beta.26",
+  "version": "1.3.0-beta.28",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -43,5 +43,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "4a75bfc17fd179e230c266d71cd7b1d7d82d2df5"
+  "gitHead": "0c95385ad94b9ac5268fabd1f3b4d9c3c7e9ee87"
 }