@tecsinapse/cortex-react 1.3.0-beta.14 → 1.3.0-beta.16

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

@@ -0,0 +1,54 @@
+'use strict';
+
+var React = require('react');
+var reactImask = require('react-imask');
+var index = require('./index.js');
+
+const useIMaskLocal = (mask, inputProps, ref) => {
+  const { ref: iMaskRef, maskRef } = reactImask.useIMask(mask, {
+    onAccept: () => inputProps.onChange?.(maskRef.current),
+    ref: ref ? ref : React.createRef()
+  });
+  React.useEffect(() => {
+    if (inputProps.value === "") {
+      maskRef.current?.updateValue();
+    }
+  }, [maskRef, inputProps.value]);
+  return {
+    iMaskRef
+  };
+};
+const InputMaskExpression = React.forwardRef(({ mask, ...rest }, ref) => {
+  const { iMaskRef } = useIMaskLocal({ mask }, rest, ref);
+  return /* @__PURE__ */ React.createElement(index.Input.Root, { ...rest, ref: iMaskRef });
+});
+const InputMaskNumber = React.forwardRef(
+  ({ ...rest }, ref) => {
+    const mask = { mask: Number, scale: 2 };
+    const { iMaskRef } = useIMaskLocal(mask, rest, ref);
+    return /* @__PURE__ */ React.createElement(index.Input.Root, { ...rest, ref: iMaskRef });
+  }
+);
+const InputMaskCurrency = React.forwardRef(
+  ({ ...rest }, ref) => {
+    const mask = {
+      mask: "R$ num",
+      blocks: {
+        num: {
+          mask: Number,
+          scale: 2,
+          thousandsSeparator: ".",
+          padFractionalZeros: true,
+          radix: ",",
+          mapToRadix: ["."]
+        }
+      }
+    };
+    const { iMaskRef } = useIMaskLocal(mask, rest, ref);
+    return /* @__PURE__ */ React.createElement(index.Input.Root, { ...rest, ref: iMaskRef });
+  }
+);
+
+exports.InputMaskCurrency = InputMaskCurrency;
+exports.InputMaskExpression = InputMaskExpression;
+exports.InputMaskNumber = InputMaskNumber;

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

@@ -3,6 +3,7 @@
 var Box = require('./Box.js');
 var Face = require('./Face.js');
 var Left = require('./Left.js');
+var Mask = require('./Mask.js');
 var Right = require('./Right.js');
 var Root = require('./Root.js');
 var Search = require('./Search.js');
@@ -13,7 +14,10 @@ const Input = {
   Box: Box.InputBox,
   Left: Left.InputLeft,
   Right: Right.InputRight,
-  Search: Search.InputSearch
+  Search: Search.InputSearch,
+  MaskCurrency: Mask.InputMaskCurrency,
+  MaskNumber: Mask.InputMaskNumber,
+  MaskExpression: Mask.InputMaskExpression
 };
 
 exports.Input = Input;

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

@@ -7,13 +7,13 @@ var io5 = require('react-icons/io5');
 var MenubarProvider = require('../../provider/MenubarProvider.js');
 require('../../provider/SnackbarProvider.js');
 
-const { root } = menubar.menubar();
+const { header } = menubar.menubar();
 const Header = ({ children, className, ...rest }) => {
   const [show, setShow] = MenubarProvider.useMenubar();
   return /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: root({ className }),
+      className: header({ className }),
       "data-testid": "header-menubar",
       ...rest
     },

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

@@ -18,6 +18,7 @@ require('react-icons/lia');
 require('../Input/Box.js');
 require('../Input/Face.js');
 require('../Input/Left.js');
+require('../Input/Mask.js');
 require('../Input/Right.js');
 require('../Input/Root.js');
 require('../Input/Search.js');
@@ -31,6 +32,7 @@ require('../../styles/calendar-cell.js');
 require('../../styles/groupButton.js');
 require('../../styles/progressBar.js');
 require('../Select/GroupedOptions.js');
+require('../Select/MultiGroupedOptions.js');
 require('../Select/context.js');
 require('../Select/Trigger.js');
 require('../Tag.js');

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

@@ -1,11 +1,11 @@
 'use strict';
 
-var React = require('react');
 var Context = require('./Context.js');
+var utils = require('../utils.js');
 
 const PopoverTrigger = ({ children }) => {
   const { triggerProps } = Context.usePopoverContext();
-  return React.cloneElement(children, triggerProps);
+  return utils.cloneWithProps(children, triggerProps);
 };
 
 exports.PopoverTrigger = PopoverTrigger;

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

@@ -7,21 +7,15 @@ require('react-stately');
 var useOutsideClickListener = require('../../hooks/useOutsideClickListener.js');
 require('@floating-ui/react');
 var Context = require('../Popover/Context.js');
-var context = require('./context.js');
 
-const Content = ({
-  children,
-  keyExtractor,
-  labelExtractor,
-  value
-}) => {
+const Content = ({ children }) => {
   const { setIsOpen } = Context.usePopoverContext();
   const ref = React.useRef(null);
   useOutsideClickListener.useOutsideClickListener({
     ref,
     onClickOutside: () => setIsOpen(false)
   });
-  return /* @__PURE__ */ React.createElement(context.SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, children));
+  return /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, children);
 };
 
 module.exports = Content;

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

@@ -0,0 +1,26 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var index = require('./index.js');
+var context = require('./context.js');
+var utils = require('./utils.js');
+
+const { groupedTitle, containerGrouped } = cortexCore.selectVariants();
+const SelectMultiGroupedOptions = ({
+  onSelect,
+  groupedLabelExtractor,
+  options
+}) => {
+  const { value: currentValue, keyExtractor } = React.useContext(context.SelectContext);
+  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: containerGrouped() }, [...options ?? []].map(([key, value]) => /* @__PURE__ */ React.createElement("div", { key }, /* @__PURE__ */ React.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React.createElement(
+    index.Select.MultiOption,
+    {
+      option,
+      key: keyExtractor(option),
+      onSelectOption: (option2) => utils.handleSelectMulti(option2, currentValue, onSelect)
+    }
+  )))));
+};
+
+exports.SelectMultiGroupedOptions = SelectMultiGroupedOptions;

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

@@ -0,0 +1,32 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var context = require('./context.js');
+
+const SelectMultiOption = ({
+  onSelectOption,
+  option
+}) => {
+  const { keyExtractor, labelExtractor, value } = React.useContext(context.SelectContext);
+  const inputRef = React.useRef(null);
+  const isChecked = React.useMemo(
+    () => value?.length > 0 && value.find((it) => keyExtractor(it) === keyExtractor(option)) !== void 0,
+    [value, option]
+  );
+  const onClickOption = React.useCallback(() => {
+    onSelectOption(option);
+    inputRef.current?.click();
+  }, [onSelectOption, inputRef]);
+  return /* @__PURE__ */ React.createElement("li", { onClick: onClickOption, className: cortexCore.option(), role: "option" }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: isChecked,
+      className: cortexCore.checkbox({ className: "pointer-events-none" }),
+      ref: inputRef
+    }
+  ), labelExtractor(option));
+};
+
+exports.SelectMultiOption = SelectMultiOption;

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

@@ -0,0 +1,23 @@
+'use strict';
+
+var React = require('react');
+var index = require('./index.js');
+var context = require('./context.js');
+var utils = require('./utils.js');
+
+const SelectMultiOptions = ({
+  onSelect,
+  options
+}) => {
+  const { keyExtractor, value: currentValue } = React.useContext(context.SelectContext);
+  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: "list-none" }, (options ?? []).map((option) => /* @__PURE__ */ React.createElement(
+    index.Select.MultiOption,
+    {
+      option,
+      key: keyExtractor(option),
+      onSelectOption: (option2) => utils.handleSelectMulti(option2, currentValue, onSelect)
+    }
+  )));
+};
+
+exports.SelectMultiOptions = SelectMultiOptions;

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

@@ -1,8 +1,9 @@
 'use strict';
 
 var React = require('react');
-var Content = require('./Content.js');
 var index = require('../Popover/index.js');
+var Content = require('./Content.js');
+var context = require('./context.js');
 
 const SelectRoot = ({
   children,
@@ -10,15 +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(
-    Content,
-    {
-      keyExtractor,
-      labelExtractor,
-      value
-    },
-    children
-  )));
+  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, null, children))));
 };
 
 exports.SelectRoot = SelectRoot;

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

@@ -3,16 +3,18 @@
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 var io5 = require('react-icons/io5');
-var context = require('./context.js');
 var index = require('../Popover/index.js');
+var context = require('./context.js');
 
 const { button } = cortexCore.selectVariants();
 const SelectTrigger = ({ label, disabled }) => {
   const { value, labelExtractor } = React.useContext(context.SelectContext);
-  const placeholder = React.useMemo(
-    () => value ? labelExtractor(value) : label,
-    [label, value]
-  );
+  const placeholder = React.useMemo(() => {
+    if (value?.length === 0 || !value) return label;
+    if (value?.length === 1) return labelExtractor(value[0]);
+    if (value?.length > 1) return `${value.length} items selected`;
+    return labelExtractor(value);
+  }, [label, value]);
   return /* @__PURE__ */ React.createElement(index.Popover.Trigger, null, /* @__PURE__ */ React.createElement(
     "button",
     {

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

@@ -1,6 +1,9 @@
 'use strict';
 
 var GroupedOptions = require('./GroupedOptions.js');
+var MultiGroupedOptions = require('./MultiGroupedOptions.js');
+var MultiOption = require('./MultiOption.js');
+var MultiOptions = require('./MultiOptions.js');
 var Option = require('./Option.js');
 var Options = require('./Options.js');
 var Popover = require('./Popover.js');
@@ -13,7 +16,10 @@ const Select = {
   Popover: Popover.SelectPopover,
   Options: Options.SelectOptions,
   GroupedOptions: GroupedOptions.SelectGroupedOptions,
-  Option: Option.SelectOption
+  Option: Option.SelectOption,
+  MultiOptions: MultiOptions.SelectMultiOptions,
+  MultiGroupedOptions: MultiGroupedOptions.SelectMultiGroupedOptions,
+  MultiOption: MultiOption.SelectMultiOption
 };
 
 exports.Select = Select;

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

@@ -0,0 +1,14 @@
+'use strict';
+
+const handleSelectMulti = (option, value, onSelect) => {
+  const current = Array.from(value ?? []);
+  const indexOf = current.indexOf(option);
+  if (indexOf === -1) {
+    current.push(option);
+  } else {
+    current.splice(indexOf, 1);
+  }
+  onSelect(current);
+};
+
+exports.handleSelectMulti = handleSelectMulti;

package/dist/cjs/components/Tooltip.js

@@ -7,6 +7,7 @@ var react = require('@floating-ui/react');
 require('@internationalized/date');
 require('react-aria');
 require('react-stately');
+var utils = require('./utils.js');
 var useFloatingLogic = require('../hooks/useFloatingLogic.js');
 
 const Tooltip = React.forwardRef(
@@ -30,7 +31,7 @@ const Tooltip = React.forwardRef(
       context,
       floatingStyles
     } = useFloatingLogic.useFloatingLogic({ placement, arrowRef, trigger });
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, React.cloneElement(children, triggerProps), isOpen ? /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, utils.cloneWithProps(children, triggerProps), isOpen ? /* @__PURE__ */ React.createElement(
       "div",
       {
         ref: ref || refs.setFloating,

package/dist/cjs/components/utils.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var date = require('@internationalized/date');
+var React = require('react');
 
 const getNameInitials = (name) => {
   const nameSplit = name.split(" ");
@@ -20,7 +21,11 @@ const dateToCalendarDate = (value) => {
 const calendarDateToDate = (value) => {
   return value.toDate(date.getLocalTimeZone());
 };
+function cloneWithProps(children, triggerProps) {
+  return React.cloneElement(/* @__PURE__ */ React.createElement("div", null, children), triggerProps);
+}
 
 exports.calendarDateToDate = calendarDateToDate;
+exports.cloneWithProps = cloneWithProps;
 exports.dateToCalendarDate = dateToCalendarDate;
 exports.getNameInitials = getNameInitials;

package/dist/cjs/provider/SnackbarProvider.js

@@ -19,6 +19,7 @@ require('react-icons/lia');
 require('../components/Input/Box.js');
 require('../components/Input/Face.js');
 require('../components/Input/Left.js');
+require('../components/Input/Mask.js');
 require('../components/Input/Right.js');
 require('../components/Input/Root.js');
 require('../components/Input/Search.js');
@@ -41,6 +42,7 @@ require('../styles/calendar-cell.js');
 require('../styles/groupButton.js');
 require('../styles/progressBar.js');
 require('../components/Select/GroupedOptions.js');
+require('../components/Select/MultiGroupedOptions.js');
 require('../components/Select/context.js');
 require('../components/Select/Trigger.js');
 require('../components/Tag.js');

package/dist/cjs/service/SnackbarSonner.js

@@ -19,6 +19,7 @@ require('react-icons/lia');
 require('../components/Input/Box.js');
 require('../components/Input/Face.js');
 require('../components/Input/Left.js');
+require('../components/Input/Mask.js');
 require('../components/Input/Right.js');
 require('../components/Input/Root.js');
 require('../components/Input/Search.js');
@@ -42,6 +43,7 @@ require('../styles/calendar-cell.js');
 require('../styles/groupButton.js');
 require('../styles/progressBar.js');
 require('../components/Select/GroupedOptions.js');
+require('../components/Select/MultiGroupedOptions.js');
 require('../components/Select/context.js');
 require('../components/Select/Trigger.js');
 require('../components/Tag.js');

package/dist/cjs/styles/menubar.js

@@ -4,10 +4,10 @@ var tailwindVariants = require('tailwind-variants');
 
 const menubar = tailwindVariants.tv({
   slots: {
-    root: "w-screen px-kilo py-deca flex flex-row justify-between bg-white z-[100]",
+    header: "relative w-screen px-kilo py-deca flex flex-row justify-between bg-white z-[100]",
     left: "flex items-center w-fit",
     right: "flex items-center gap-x-deca",
-    dropdown: "w-full bg-white flex-1 shadow-default z-[100] px-[8vw]"
+    dropdown: "w-full bg-white flex-1 shadow-default z-[100] px-[8vw] absolute"
   },
   variants: {
     show: {

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

@@ -0,0 +1,50 @@
+import React, { createRef, useEffect } from 'react';
+import { useIMask } from 'react-imask';
+import { Input } from './index.js';
+
+const useIMaskLocal = (mask, inputProps, ref) => {
+  const { ref: iMaskRef, maskRef } = useIMask(mask, {
+    onAccept: () => inputProps.onChange?.(maskRef.current),
+    ref: ref ? ref : createRef()
+  });
+  useEffect(() => {
+    if (inputProps.value === "") {
+      maskRef.current?.updateValue();
+    }
+  }, [maskRef, inputProps.value]);
+  return {
+    iMaskRef
+  };
+};
+const InputMaskExpression = React.forwardRef(({ mask, ...rest }, ref) => {
+  const { iMaskRef } = useIMaskLocal({ mask }, rest, ref);
+  return /* @__PURE__ */ React.createElement(Input.Root, { ...rest, ref: iMaskRef });
+});
+const InputMaskNumber = React.forwardRef(
+  ({ ...rest }, ref) => {
+    const mask = { mask: Number, scale: 2 };
+    const { iMaskRef } = useIMaskLocal(mask, rest, ref);
+    return /* @__PURE__ */ React.createElement(Input.Root, { ...rest, ref: iMaskRef });
+  }
+);
+const InputMaskCurrency = React.forwardRef(
+  ({ ...rest }, ref) => {
+    const mask = {
+      mask: "R$ num",
+      blocks: {
+        num: {
+          mask: Number,
+          scale: 2,
+          thousandsSeparator: ".",
+          padFractionalZeros: true,
+          radix: ",",
+          mapToRadix: ["."]
+        }
+      }
+    };
+    const { iMaskRef } = useIMaskLocal(mask, rest, ref);
+    return /* @__PURE__ */ React.createElement(Input.Root, { ...rest, ref: iMaskRef });
+  }
+);
+
+export { InputMaskCurrency, InputMaskExpression, InputMaskNumber };

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

@@ -1,6 +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 { InputRight } from './Right.js';
 import { InputRoot } from './Root.js';
 import { InputSearch } from './Search.js';
@@ -11,7 +12,10 @@ const Input = {
   Box: InputBox,
   Left: InputLeft,
   Right: InputRight,
-  Search: InputSearch
+  Search: InputSearch,
+  MaskCurrency: InputMaskCurrency,
+  MaskNumber: InputMaskNumber,
+  MaskExpression: InputMaskExpression
 };
 
 export { Input };

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

@@ -5,13 +5,13 @@ import { IoMenu } from 'react-icons/io5';
 import { useMenubar } from '../../provider/MenubarProvider.js';
 import '../../provider/SnackbarProvider.js';
 
-const { root } = menubar();
+const { header } = menubar();
 const Header = ({ children, className, ...rest }) => {
   const [show, setShow] = useMenubar();
   return /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: root({ className }),
+      className: header({ className }),
       "data-testid": "header-menubar",
       ...rest
     },

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

@@ -16,6 +16,7 @@ import 'react-icons/lia';
 import '../Input/Box.js';
 import '../Input/Face.js';
 import '../Input/Left.js';
+import '../Input/Mask.js';
 import '../Input/Right.js';
 import '../Input/Root.js';
 import '../Input/Search.js';
@@ -29,6 +30,7 @@ import '../../styles/calendar-cell.js';
 import '../../styles/groupButton.js';
 import '../../styles/progressBar.js';
 import '../Select/GroupedOptions.js';
+import '../Select/MultiGroupedOptions.js';
 import '../Select/context.js';
 import '../Select/Trigger.js';
 import '../Tag.js';

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

@@ -1,9 +1,9 @@
-import React from 'react';
 import { usePopoverContext } from './Context.js';
+import { cloneWithProps } from '../utils.js';
 
 const PopoverTrigger = ({ children }) => {
   const { triggerProps } = usePopoverContext();
-  return React.cloneElement(children, triggerProps);
+  return cloneWithProps(children, triggerProps);
 };
 
 export { PopoverTrigger };

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

@@ -5,21 +5,15 @@ import 'react-stately';
 import { useOutsideClickListener } from '../../hooks/useOutsideClickListener.js';
 import '@floating-ui/react';
 import { usePopoverContext } from '../Popover/Context.js';
-import { SelectContext } from './context.js';
 
-const Content = ({
-  children,
-  keyExtractor,
-  labelExtractor,
-  value
-}) => {
+const Content = ({ children }) => {
   const { setIsOpen } = usePopoverContext();
   const ref = useRef(null);
   useOutsideClickListener({
     ref,
     onClickOutside: () => setIsOpen(false)
   });
-  return /* @__PURE__ */ React.createElement(SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, children));
+  return /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, children);
 };
 
 export { Content as default };

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

@@ -0,0 +1,24 @@
+import { selectVariants } from '@tecsinapse/cortex-core';
+import React, { useContext } from 'react';
+import { Select } from './index.js';
+import { SelectContext } from './context.js';
+import { handleSelectMulti } from './utils.js';
+
+const { groupedTitle, containerGrouped } = selectVariants();
+const SelectMultiGroupedOptions = ({
+  onSelect,
+  groupedLabelExtractor,
+  options
+}) => {
+  const { value: currentValue, keyExtractor } = useContext(SelectContext);
+  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: containerGrouped() }, [...options ?? []].map(([key, value]) => /* @__PURE__ */ React.createElement("div", { key }, /* @__PURE__ */ React.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React.createElement(
+    Select.MultiOption,
+    {
+      option,
+      key: keyExtractor(option),
+      onSelectOption: (option2) => handleSelectMulti(option2, currentValue, onSelect)
+    }
+  )))));
+};
+
+export { SelectMultiGroupedOptions };

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

@@ -0,0 +1,30 @@
+import { option, checkbox } from '@tecsinapse/cortex-core';
+import React, { useContext, useRef, useMemo, useCallback } from 'react';
+import { SelectContext } from './context.js';
+
+const SelectMultiOption = ({
+  onSelectOption,
+  option: option$1
+}) => {
+  const { keyExtractor, labelExtractor, value } = useContext(SelectContext);
+  const inputRef = useRef(null);
+  const isChecked = useMemo(
+    () => value?.length > 0 && value.find((it) => keyExtractor(it) === keyExtractor(option$1)) !== void 0,
+    [value, option$1]
+  );
+  const onClickOption = useCallback(() => {
+    onSelectOption(option$1);
+    inputRef.current?.click();
+  }, [onSelectOption, inputRef]);
+  return /* @__PURE__ */ React.createElement("li", { onClick: onClickOption, className: option(), role: "option" }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: isChecked,
+      className: checkbox({ className: "pointer-events-none" }),
+      ref: inputRef
+    }
+  ), labelExtractor(option$1));
+};
+
+export { SelectMultiOption };

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

@@ -0,0 +1,21 @@
+import React, { useContext } from 'react';
+import { Select } from './index.js';
+import { SelectContext } from './context.js';
+import { handleSelectMulti } from './utils.js';
+
+const SelectMultiOptions = ({
+  onSelect,
+  options
+}) => {
+  const { keyExtractor, value: currentValue } = useContext(SelectContext);
+  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: "list-none" }, (options ?? []).map((option) => /* @__PURE__ */ React.createElement(
+    Select.MultiOption,
+    {
+      option,
+      key: keyExtractor(option),
+      onSelectOption: (option2) => handleSelectMulti(option2, currentValue, onSelect)
+    }
+  )));
+};
+
+export { SelectMultiOptions };

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import Content from './Content.js';
 import { Popover } from '../Popover/index.js';
+import Content from './Content.js';
+import { SelectContext } from './context.js';
 
 const SelectRoot = ({
   children,
@@ -8,15 +9,7 @@ const SelectRoot = ({
   keyExtractor,
   labelExtractor
 }) => {
-  return /* @__PURE__ */ React.createElement(Popover.Provider, null, /* @__PURE__ */ React.createElement(Popover.Root, { placement: "bottom", trigger: "click" }, /* @__PURE__ */ React.createElement(
-    Content,
-    {
-      keyExtractor,
-      labelExtractor,
-      value
-    },
-    children
-  )));
+  return /* @__PURE__ */ React.createElement(Popover.Provider, null, /* @__PURE__ */ React.createElement(Popover.Root, { placement: "bottom", trigger: "click" }, /* @__PURE__ */ React.createElement(SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React.createElement(Content, null, children))));
 };
 
 export { SelectRoot };

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

@@ -1,16 +1,18 @@
 import { selectVariants } from '@tecsinapse/cortex-core';
 import React, { useContext, useMemo } from 'react';
 import { IoChevronDownOutline } from 'react-icons/io5';
-import { SelectContext } from './context.js';
 import { Popover } from '../Popover/index.js';
+import { SelectContext } from './context.js';
 
 const { button } = selectVariants();
 const SelectTrigger = ({ label, disabled }) => {
   const { value, labelExtractor } = useContext(SelectContext);
-  const placeholder = useMemo(
-    () => value ? labelExtractor(value) : label,
-    [label, value]
-  );
+  const placeholder = useMemo(() => {
+    if (value?.length === 0 || !value) return label;
+    if (value?.length === 1) return labelExtractor(value[0]);
+    if (value?.length > 1) return `${value.length} items selected`;
+    return labelExtractor(value);
+  }, [label, value]);
   return /* @__PURE__ */ React.createElement(Popover.Trigger, null, /* @__PURE__ */ React.createElement(
     "button",
     {

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

@@ -1,4 +1,7 @@
 import { SelectGroupedOptions } from './GroupedOptions.js';
+import { SelectMultiGroupedOptions } from './MultiGroupedOptions.js';
+import { SelectMultiOption } from './MultiOption.js';
+import { SelectMultiOptions } from './MultiOptions.js';
 import { SelectOption } from './Option.js';
 import { SelectOptions } from './Options.js';
 import { SelectPopover } from './Popover.js';
@@ -11,7 +14,10 @@ const Select = {
   Popover: SelectPopover,
   Options: SelectOptions,
   GroupedOptions: SelectGroupedOptions,
-  Option: SelectOption
+  Option: SelectOption,
+  MultiOptions: SelectMultiOptions,
+  MultiGroupedOptions: SelectMultiGroupedOptions,
+  MultiOption: SelectMultiOption
 };
 
 export { Select };

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

@@ -0,0 +1,12 @@
+const handleSelectMulti = (option, value, onSelect) => {
+  const current = Array.from(value ?? []);
+  const indexOf = current.indexOf(option);
+  if (indexOf === -1) {
+    current.push(option);
+  } else {
+    current.splice(indexOf, 1);
+  }
+  onSelect(current);
+};
+
+export { handleSelectMulti };

package/dist/esm/components/Tooltip.js

@@ -3,6 +3,7 @@ import { FloatingArrow } from '@floating-ui/react';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
+import { cloneWithProps } from './utils.js';
 import { useFloatingLogic } from '../hooks/useFloatingLogic.js';
 
 const Tooltip = forwardRef(
@@ -26,7 +27,7 @@ const Tooltip = forwardRef(
       context,
       floatingStyles
     } = useFloatingLogic({ placement, arrowRef, trigger });
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, React.cloneElement(children, triggerProps), isOpen ? /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, cloneWithProps(children, triggerProps), isOpen ? /* @__PURE__ */ React.createElement(
       "div",
       {
         ref: ref || refs.setFloating,

package/dist/esm/components/utils.js

@@ -1,4 +1,5 @@
 import { CalendarDate, getLocalTimeZone } from '@internationalized/date';
+import React from 'react';
 
 const getNameInitials = (name) => {
   const nameSplit = name.split(" ");
@@ -18,5 +19,8 @@ const dateToCalendarDate = (value) => {
 const calendarDateToDate = (value) => {
   return value.toDate(getLocalTimeZone());
 };
+function cloneWithProps(children, triggerProps) {
+  return React.cloneElement(/* @__PURE__ */ React.createElement("div", null, children), triggerProps);
+}
 
-export { calendarDateToDate, dateToCalendarDate, getNameInitials };
+export { calendarDateToDate, cloneWithProps, dateToCalendarDate, getNameInitials };

package/dist/esm/provider/SnackbarProvider.js

@@ -17,6 +17,7 @@ import 'react-icons/lia';
 import '../components/Input/Box.js';
 import '../components/Input/Face.js';
 import '../components/Input/Left.js';
+import '../components/Input/Mask.js';
 import '../components/Input/Right.js';
 import '../components/Input/Root.js';
 import '../components/Input/Search.js';
@@ -39,6 +40,7 @@ import '../styles/calendar-cell.js';
 import '../styles/groupButton.js';
 import '../styles/progressBar.js';
 import '../components/Select/GroupedOptions.js';
+import '../components/Select/MultiGroupedOptions.js';
 import '../components/Select/context.js';
 import '../components/Select/Trigger.js';
 import '../components/Tag.js';

package/dist/esm/service/SnackbarSonner.js

@@ -17,6 +17,7 @@ import 'react-icons/lia';
 import '../components/Input/Box.js';
 import '../components/Input/Face.js';
 import '../components/Input/Left.js';
+import '../components/Input/Mask.js';
 import '../components/Input/Right.js';
 import '../components/Input/Root.js';
 import '../components/Input/Search.js';
@@ -40,6 +41,7 @@ import '../styles/calendar-cell.js';
 import '../styles/groupButton.js';
 import '../styles/progressBar.js';
 import '../components/Select/GroupedOptions.js';
+import '../components/Select/MultiGroupedOptions.js';
 import '../components/Select/context.js';
 import '../components/Select/Trigger.js';
 import '../components/Tag.js';

package/dist/esm/styles/menubar.js

@@ -2,10 +2,10 @@ import { tv } from 'tailwind-variants';
 
 const menubar = tv({
   slots: {
-    root: "w-screen px-kilo py-deca flex flex-row justify-between bg-white z-[100]",
+    header: "relative w-screen px-kilo py-deca flex flex-row justify-between bg-white z-[100]",
     left: "flex items-center w-fit",
     right: "flex items-center gap-x-deca",
-    dropdown: "w-full bg-white flex-1 shadow-default z-[100] px-[8vw]"
+    dropdown: "w-full bg-white flex-1 shadow-default z-[100] px-[8vw] absolute"
   },
   variants: {
     show: {

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

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

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

@@ -5,5 +5,8 @@ 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").InputProps & import("react").RefAttributes<HTMLInputElement>>;
+    MaskNumber: import("react").ForwardRefExoticComponent<import("./types").InputProps & import("react").RefAttributes<HTMLInputElement>>;
+    MaskExpression: import("react").ForwardRefExoticComponent<import("./types").InputMaskProps & import("react").RefAttributes<HTMLInputElement>>;
 };
 export * from './types';

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

@@ -18,3 +18,6 @@ export interface InputRightProps extends React.HTMLAttributes<HTMLDivElement> {
 export interface InputSearchProps extends InputProps {
     bounceTimeout?: number;
 }
+export interface InputMaskProps extends InputProps {
+    mask: any;
+}

package/dist/types/components/Popover/Trigger.d.ts

@@ -2,4 +2,4 @@ import React from 'react';
 export interface PopoverTriggerProps {
     children: React.ReactElement;
 }
-export declare const PopoverTrigger: ({ children }: PopoverTriggerProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const PopoverTrigger: ({ children }: PopoverTriggerProps) => React.FunctionComponentElement<any>;

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

@@ -1,6 +1,6 @@
 export declare const Popover: {
     Root: ({ children, placement, trigger, }: import("./Root").PopoverRootProps) => JSX.Element;
-    Trigger: ({ children }: import("./Trigger").PopoverTriggerProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    Trigger: ({ children }: import("./Trigger").PopoverTriggerProps) => import("react").FunctionComponentElement<any>;
     Content: ({ children, className, }: import("./Content").PopoverContentProps) => JSX.Element;
     Provider: ({ children, placement, trigger, }: import("./Provider").PopoverProviderProps) => JSX.Element;
 };

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

@@ -1,9 +1,6 @@
 import { ReactNode } from 'react';
-interface ContentProps<T> {
+interface ContentProps {
     children: ReactNode;
-    keyExtractor: (value: T) => string;
-    labelExtractor: (value: T) => string;
-    value?: T;
 }
-declare const Content: <T>({ children, keyExtractor, labelExtractor, value, }: ContentProps<T>) => JSX.Element;
+declare const Content: ({ children }: ContentProps) => JSX.Element;
 export default Content;

package/dist/types/components/Select/MultiGroupedOptions.d.ts

@@ -0,0 +1,6 @@
+export interface SelectMultiGroupedOptionsProps<T> {
+    onSelect: (value: T[]) => void;
+    options?: Map<string, T[]>;
+    groupedLabelExtractor: (value: string) => string;
+}
+export declare const SelectMultiGroupedOptions: <T>({ onSelect, groupedLabelExtractor, options, }: SelectMultiGroupedOptionsProps<T>) => JSX.Element;

package/dist/types/components/Select/MultiOption.d.ts

@@ -0,0 +1,5 @@
+export interface SelectMultiOptionProps<T> {
+    option: T;
+    onSelectOption: (option: T) => void;
+}
+export declare const SelectMultiOption: <T>({ onSelectOption, option, }: SelectMultiOptionProps<T>) => JSX.Element;

package/dist/types/components/Select/MultiOptions.d.ts

@@ -0,0 +1,5 @@
+export interface SelectMultiOptionsProps<T> {
+    options?: T[];
+    onSelect: (value: T[]) => void;
+}
+export declare const SelectMultiOptions: <T>({ onSelect, options, }: SelectMultiOptionsProps<T>) => JSX.Element;

package/dist/types/components/Select/Root.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 export interface SelectRootProps<T> {
     children: ReactNode;
-    value?: T;
+    value?: T | T[];
     keyExtractor: (value: T) => string;
     labelExtractor: (value: T) => string;
 }

package/dist/types/components/Select/context.d.ts

@@ -1,5 +1,5 @@
 interface SelectContextProps<T> {
-    value?: T;
+    value?: T | T[];
     keyExtractor: (value: T) => string;
     labelExtractor: (value: T) => string;
 }

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

@@ -5,4 +5,7 @@ export declare const Select: {
     Options: <T_1>({ onSelect, options, }: import("./Options").SelectOptionsProps<T_1>) => JSX.Element;
     GroupedOptions: <T_2>({ onSelect, groupedLabelExtractor, options, }: import("./GroupedOptions").SelectGroupedOptionsProps<T_2>) => JSX.Element;
     Option: <T_3>({ onSelectOption, option, }: import("./Option").SelectOptionProps<T_3>) => JSX.Element;
+    MultiOptions: <T_4>({ onSelect, options, }: import("./MultiOptions").SelectMultiOptionsProps<T_4>) => JSX.Element;
+    MultiGroupedOptions: <T_5>({ onSelect, groupedLabelExtractor, options, }: import("./MultiGroupedOptions").SelectMultiGroupedOptionsProps<T_5>) => JSX.Element;
+    MultiOption: <T_6>({ onSelectOption, option, }: import("./MultiOption").SelectMultiOptionProps<T_6>) => JSX.Element;
 };

package/dist/types/components/Select/utils.d.ts

@@ -0,0 +1 @@
+export declare const handleSelectMulti: <T>(option: T, value: T[], onSelect: (value: T[]) => void) => void;

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

@@ -1,4 +1,6 @@
 import { CalendarDate } from '@internationalized/date';
+import React from 'react';
 export declare const getNameInitials: (name: string) => string;
 export declare const dateToCalendarDate: (value?: Date) => CalendarDate;
 export declare const calendarDateToDate: (value: CalendarDate) => Date;
+export declare function cloneWithProps(children: React.ReactElement, triggerProps: any): React.FunctionComponentElement<any>;

package/dist/types/styles/menubar.d.ts

@@ -1,64 +1,68 @@
 export declare const menubar: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            right?: import("tailwind-merge").ClassNameValue;
-            left?: import("tailwind-merge").ClassNameValue;
-            root?: import("tailwind-merge").ClassNameValue;
-            dropdown?: import("tailwind-merge").ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            right?: import("tailwind-merge").ClassNameValue;
-            left?: import("tailwind-merge").ClassNameValue;
-            root?: import("tailwind-merge").ClassNameValue;
-            dropdown?: import("tailwind-merge").ClassNameValue;
+    show: {
+        true: {
+            dropdown: string;
+            false: string;
         };
     };
-} | {}, {
-    root: string;
+}, {
+    header: string;
     left: string;
     right: string;
     dropdown: string;
-}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            right?: import("tailwind-merge").ClassNameValue;
-            left?: import("tailwind-merge").ClassNameValue;
-            root?: import("tailwind-merge").ClassNameValue;
-            dropdown?: import("tailwind-merge").ClassNameValue;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    show: {
+        true: {
+            dropdown: string;
+            false: string;
         };
     };
-} | {}>, {
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            right?: import("tailwind-merge").ClassNameValue;
-            left?: import("tailwind-merge").ClassNameValue;
-            root?: import("tailwind-merge").ClassNameValue;
-            dropdown?: import("tailwind-merge").ClassNameValue;
+}, {
+    show: {
+        true: {
+            dropdown: string;
+            false: string;
         };
     };
-} | {}, {
-    root: string;
+}>, {
+    show: {
+        true: {
+            dropdown: string;
+            false: string;
+        };
+    };
+}, {
+    header: string;
     left: string;
     right: string;
     dropdown: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
-    root: string;
+}, import("tailwind-variants").TVReturnType<{
+    show: {
+        true: {
+            dropdown: string;
+            false: string;
+        };
+    };
+}, {
+    header: string;
     left: string;
     right: string;
     dropdown: string;
-}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            right?: import("tailwind-merge").ClassNameValue;
-            left?: import("tailwind-merge").ClassNameValue;
-            root?: import("tailwind-merge").ClassNameValue;
-            dropdown?: import("tailwind-merge").ClassNameValue;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    show: {
+        true: {
+            dropdown: string;
+            false: string;
         };
     };
-} | {}>, unknown, unknown, undefined>>;
+}, {
+    show: {
+        true: {
+            dropdown: string;
+            false: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
 export declare const mostUsed: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {

package/dist/types/tests/Input/Mask.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.3.0-beta.14",
+  "version": "1.3.0-beta.16",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -20,10 +20,11 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.18",
     "@internationalized/date": "*",
-    "@tecsinapse/cortex-core": "0.3.0-beta.7",
+    "@tecsinapse/cortex-core": "0.3.0-beta.8",
     "clsx": "*",
     "react-aria": "^3.33.1",
     "react-icons": "^5.2.1",
+    "react-imask": "7.6.1",
     "react-stately": "^3.31.1",
     "sonner": "^1.5.0",
     "tailwind-merge": "*"
@@ -42,5 +43,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "7e4bfdf657dc900734aa73f8649ad749eea787d8"
+  "gitHead": "61cbf81c03570640266b11e0330e7da91344006b"
 }