@tecsinapse/cortex-react 1.5.4 → 1.5.6

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

@@ -5,7 +5,7 @@ var menubar = require('../../styles/menubar.js');
 
 const Category = ({ title, options, render }) => {
   const { text, hr, container } = menubar.category();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", { className: text() }, title), /* @__PURE__ */ React.createElement("hr", { className: hr() }), /* @__PURE__ */ React.createElement("div", { className: container() }, options.map((i) => render(i))));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", { className: text() }, title), /* @__PURE__ */ React.createElement("a", null), /* @__PURE__ */ React.createElement("hr", { className: hr() }), /* @__PURE__ */ React.createElement("div", { className: container() }, options.map((i) => render(i))));
 };
 
 module.exports = Category;

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

@@ -3,12 +3,18 @@
 var React = require('react');
 var menubar = require('../../styles/menubar.js');
 var clsx = require('clsx');
-var MenubarProvider = require('../../provider/MenubarProvider.js');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+require('@floating-ui/react');
+require('currency.js');
+require('../../provider/MenubarContext.js');
 require('../../provider/SnackbarProvider.js');
+var useMenubar = require('../../provider/useMenubar.js');
 
 const { dropdown } = menubar.menubar();
 const Dropdown = ({ children, ...rest }) => {
-  const [show] = MenubarProvider.useMenubar();
+  const [show] = useMenubar.useMenubar();
   return /* @__PURE__ */ React.createElement(
     "div",
     {

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

@@ -2,14 +2,20 @@
 
 var React = require('react');
 var io5 = require('react-icons/io5');
-var MenubarProvider = require('../../provider/MenubarProvider.js');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+require('@floating-ui/react');
+require('currency.js');
+require('../../provider/MenubarContext.js');
 require('../../provider/SnackbarProvider.js');
+var useMenubar = require('../../provider/useMenubar.js');
 var menubar = require('../../styles/menubar.js');
 var Button = require('../Button.js');
 
 const { header } = menubar.menubar();
 const Header = ({ children, className, ...rest }) => {
-  const [show, setShow] = MenubarProvider.useMenubar();
+  const [show, setShow] = useMenubar.useMenubar();
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -17,7 +23,7 @@ const Header = ({ children, className, ...rest }) => {
       "data-testid": "header-menubar",
       ...rest
     },
-    /* @__PURE__ */ React.createElement(Button.Button, { variants: { size: "square" }, onClick: () => setShow(!show) }, /* @__PURE__ */ React.createElement(io5.IoMenu, { size: 16 })),
+    /* @__PURE__ */ React.createElement(Button.Button, { variants: { size: "square" }, onClick: () => setShow(!show) }, show ? /* @__PURE__ */ React.createElement(io5.IoCloseOutline, { size: 16 }) : /* @__PURE__ */ React.createElement(io5.IoMenu, { size: 16 })),
     children
   );
 };

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

@@ -5,10 +5,7 @@ var menubar = require('../../styles/menubar.js');
 var io5 = require('react-icons/io5');
 
 const { icon } = menubar.item();
-const IconControlSubItem = ({
-  show,
-  setShow
-}) => {
+const IconControlSubItem = ({ show, setShow }) => {
   const handleClick = (e) => {
     e.stopPropagation();
     setShow(!show);

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

@@ -11,12 +11,12 @@ const Item = ({
   subItems,
   renderSubItems,
   className,
-  href,
+  anchorProps,
   ...rest
 }) => {
   const [showSubItem, setShowSubItem] = React.useState(false);
   const hasSubItems = (subItems ?? []).length > 0;
-  return /* @__PURE__ */ React.createElement(ItemLink, { href }, /* @__PURE__ */ React.createElement("div", { "data-testid": "item-menubar", ...rest, className: container() }, /* @__PURE__ */ React.createElement("div", { className: text({ className }) }, children), hasSubItems ? /* @__PURE__ */ React.createElement(IconControlSubItem, { show: showSubItem, setShow: setShowSubItem }) : /* @__PURE__ */ React.createElement(React.Fragment, null)), showSubItem ? /* @__PURE__ */ React.createElement(React.Fragment, null, subItems?.map((subItem) => renderSubItems?.(subItem))) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+  return /* @__PURE__ */ React.createElement(ItemLink, { anchorProps }, /* @__PURE__ */ React.createElement("div", { "data-testid": "item-menubar", ...rest, className: container() }, /* @__PURE__ */ React.createElement("div", { className: text({ className }) }, children), hasSubItems ? /* @__PURE__ */ React.createElement(IconControlSubItem, { show: showSubItem, setShow: setShowSubItem }) : /* @__PURE__ */ React.createElement(React.Fragment, null)), showSubItem ? /* @__PURE__ */ React.createElement(React.Fragment, null, subItems?.map((subItem) => renderSubItems?.(subItem))) : /* @__PURE__ */ React.createElement(React.Fragment, null));
 };
 
 module.exports = Item;

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

@@ -1,18 +1,10 @@
 'use strict';
 
 var React = require('react');
+var clsx = require('clsx');
 
-const ItemLink = ({ href, children, classNameAnchor }) => {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, href ? /* @__PURE__ */ React.createElement(
-    "a",
-    {
-      href,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      className: classNameAnchor
-    },
-    children
-  ) : children);
+const ItemLink = ({ anchorProps, children }) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, anchorProps ? /* @__PURE__ */ React.createElement("a", { ...anchorProps, className: clsx("w-full", anchorProps?.className) }, children) : children);
 };
 
 module.exports = ItemLink;

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

@@ -13,10 +13,10 @@ const {
 const MostUsedItem = ({
   title,
   category,
-  href,
+  anchorProps,
   ...rest
 }) => {
-  return /* @__PURE__ */ React.createElement(ItemLink, { href, classNameAnchor: "w-full" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(ItemLink, { anchorProps }, /* @__PURE__ */ React.createElement(
     Card.Card,
     {
       ...rest,

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

@@ -2,9 +2,11 @@
 
 var React = require('react');
 var MenubarProvider = require('../../provider/MenubarProvider.js');
+require('../../provider/SnackbarProvider.js');
+require('../../provider/MenubarContext.js');
 
-const Root = ({ children, ...rest }) => {
-  return /* @__PURE__ */ React.createElement(MenubarProvider.MenubarProvider, null, /* @__PURE__ */ React.createElement("div", { ...rest }, children));
+const Root = ({ children }) => {
+  return /* @__PURE__ */ React.createElement(MenubarProvider.MenubarProvider, null, children);
 };
 
 module.exports = Root;

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

@@ -4,11 +4,17 @@ var React = require('react');
 var index = require('../Input/index.js');
 var clsx = require('clsx');
 var menubar = require('../../styles/menubar.js');
-var MenubarProvider = require('../../provider/MenubarProvider.js');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+require('@floating-ui/react');
+require('currency.js');
+require('../../provider/MenubarContext.js');
 require('../../provider/SnackbarProvider.js');
+var useMenubar = require('../../provider/useMenubar.js');
 
 const Search = (props) => {
-  const [show] = MenubarProvider.useMenubar();
+  const [show] = useMenubar.useMenubar();
   return /* @__PURE__ */ React.createElement(
     index.Input.Search,
     {

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

@@ -5,8 +5,13 @@ var menubar = require('../../styles/menubar.js');
 var ItemLink = require('./ItemLink.js');
 
 const { container } = menubar.subItem();
-const SubItem = ({ children, href, className, ...rest }) => {
-  return /* @__PURE__ */ React.createElement(ItemLink, { href }, /* @__PURE__ */ React.createElement(
+const SubItem = ({
+  children,
+  anchorProps,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ React.createElement(ItemLink, { anchorProps }, /* @__PURE__ */ React.createElement(
     "div",
     {
       ...rest,

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

@@ -19,7 +19,7 @@ const PopoverContent = ({
     getFloatingProps,
     context
   } = Context.usePopoverContext();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, isOpen && /* @__PURE__ */ React.createElement(react.FloatingFocusManager, { context, modal: true }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, isOpen && /* @__PURE__ */ React.createElement(react.FloatingFocusManager, { context, modal: false }, /* @__PURE__ */ React.createElement(
     "div",
     {
       ref: refs.setFloating,

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

@@ -5,7 +5,8 @@ var Context = require('./Context.js');
 
 const PopoverTrigger = ({ children }) => {
   const { triggerProps } = Context.usePopoverContext();
-  return utils.cloneWithProps(children, triggerProps);
+  const isDisabled = children.props?.disabled;
+  return utils.cloneWithProps(children, isDisabled ? {} : triggerProps);
 };
 
 exports.PopoverTrigger = PopoverTrigger;

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

@@ -21,16 +21,7 @@ const SelectTrigger = ({
       return multiLabelSelected ? multiLabelSelected(value.length) : `${value.length} items selected`;
     return labelExtractor(value);
   }, [label, value]);
-  return /* @__PURE__ */ React.createElement(index.Popover.Trigger, null, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: button({ disabled, className: "bg-white" }),
-      disabled,
-      role: "button"
-    },
-    /* @__PURE__ */ React.createElement("span", { "data-testid": "select-placeholder" }, _placeholder),
-    /* @__PURE__ */ React.createElement(io5.IoChevronDownOutline, null)
-  ));
+  return /* @__PURE__ */ React.createElement(index.Popover.Trigger, null, /* @__PURE__ */ React.createElement("button", { className: button(), disabled, role: "button" }, /* @__PURE__ */ React.createElement("span", { "data-testid": "select-placeholder" }, _placeholder), /* @__PURE__ */ React.createElement(io5.IoChevronDownOutline, null)));
 };
 
 exports.SelectTrigger = SelectTrigger;

package/dist/cjs/index.js

@@ -54,6 +54,8 @@ var useStringMask = require('./hooks/useStringMask.js');
 var SnackbarSonner = require('./service/SnackbarSonner.js');
 var MenubarProvider = require('./provider/MenubarProvider.js');
 var SnackbarProvider = require('./provider/SnackbarProvider.js');
+var MenubarContext = require('./provider/MenubarContext.js');
+var useMenubar = require('./provider/useMenubar.js');
 var masks = require('./components/Input/masks.js');
 
 
@@ -123,9 +125,10 @@ 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.MenubarContext = MenubarContext.MenubarContext;
+exports.useMenubar = useMenubar.useMenubar;
 exports.BRLMask = masks.BRLMask;
 exports.CurrencyIMask = masks.CurrencyIMask;
 exports.ExpressionMasks = masks.ExpressionMasks;

package/dist/cjs/provider/MenubarContext.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var React = require('react');
+
+const MenubarContext = React.createContext({
+  show: false,
+  setShow: () => void 0
+});
+
+exports.MenubarContext = MenubarContext;

package/dist/cjs/provider/MenubarProvider.js

@@ -1,22 +1,31 @@
 'use strict';
 
 var React = require('react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+require('@floating-ui/react');
+require('currency.js');
+var useOutsideClickListener = require('../hooks/useOutsideClickListener.js');
+var MenubarContext = require('./MenubarContext.js');
 
-const MenubarContext = React.createContext({
-  show: false,
-  setShow: () => void 0
-});
 const MenubarProvider = ({ children }) => {
   const [show, setShow] = React.useState(false);
-  return /* @__PURE__ */ React.createElement(MenubarContext.Provider, { value: { show, setShow } }, children);
-};
-const useMenubar = () => {
-  const context = React.useContext(MenubarContext);
-  if (!context) {
-    throw new Error("useMenubar must be used within a MenubarProvider");
-  }
-  return [context.show, context.setShow];
+  const ref = React.useRef(null);
+  const showRef = React.useRef(false);
+  React.useEffect(() => {
+    showRef.current = show;
+  }, [show]);
+  const onClickOutside = () => {
+    if (showRef.current === true) {
+      setShow(false);
+    }
+  };
+  useOutsideClickListener.useOutsideClickListener({
+    ref,
+    onClickOutside
+  });
+  return /* @__PURE__ */ React.createElement(MenubarContext.MenubarContext.Provider, { value: { show, setShow } }, /* @__PURE__ */ React.createElement("div", { ref }, children));
 };
 
 exports.MenubarProvider = MenubarProvider;
-exports.useMenubar = useMenubar;

package/dist/cjs/provider/useMenubar.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+var MenubarContext = require('./MenubarContext.js');
+
+const useMenubar = () => {
+  const context = React.useContext(MenubarContext.MenubarContext);
+  if (!context) {
+    throw new Error("useMenubar must be used within a MenubarProvider");
+  }
+  return [context.show, context.setShow];
+};
+
+exports.useMenubar = useMenubar;

package/dist/cjs/styles/menubar.js

@@ -4,10 +4,10 @@ var tailwindVariants = require('tailwind-variants');
 
 const menubar = tailwindVariants.tv({
   slots: {
-    header: "relative 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-sidebar",
     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] absolute"
+    dropdown: "w-full bg-white flex-1 shadow-default z-popover px-[8vw] absolute"
   },
   variants: {
     show: {

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

@@ -3,7 +3,7 @@ import { category } from '../../styles/menubar.js';
 
 const Category = ({ title, options, render }) => {
   const { text, hr, container } = category();
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("p", { className: text() }, title), /* @__PURE__ */ React__default.createElement("hr", { className: hr() }), /* @__PURE__ */ React__default.createElement("div", { className: container() }, options.map((i) => render(i))));
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("p", { className: text() }, title), /* @__PURE__ */ React__default.createElement("a", null), /* @__PURE__ */ React__default.createElement("hr", { className: hr() }), /* @__PURE__ */ React__default.createElement("div", { className: container() }, options.map((i) => render(i))));
 };
 
 export { Category as default };

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

@@ -1,8 +1,14 @@
 import React__default from 'react';
 import { menubar, animate } from '../../styles/menubar.js';
 import clsx from 'clsx';
-import { useMenubar } from '../../provider/MenubarProvider.js';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import 'currency.js';
+import '../../provider/MenubarContext.js';
 import '../../provider/SnackbarProvider.js';
+import { useMenubar } from '../../provider/useMenubar.js';
 
 const { dropdown } = menubar();
 const Dropdown = ({ children, ...rest }) => {

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

@@ -1,7 +1,13 @@
 import React__default from 'react';
-import { IoMenu } from 'react-icons/io5';
-import { useMenubar } from '../../provider/MenubarProvider.js';
+import { IoCloseOutline, IoMenu } from 'react-icons/io5';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import 'currency.js';
+import '../../provider/MenubarContext.js';
 import '../../provider/SnackbarProvider.js';
+import { useMenubar } from '../../provider/useMenubar.js';
 import { menubar } from '../../styles/menubar.js';
 import { Button } from '../Button.js';
 
@@ -15,7 +21,7 @@ const Header = ({ children, className, ...rest }) => {
       "data-testid": "header-menubar",
       ...rest
     },
-    /* @__PURE__ */ React__default.createElement(Button, { variants: { size: "square" }, onClick: () => setShow(!show) }, /* @__PURE__ */ React__default.createElement(IoMenu, { size: 16 })),
+    /* @__PURE__ */ React__default.createElement(Button, { variants: { size: "square" }, onClick: () => setShow(!show) }, show ? /* @__PURE__ */ React__default.createElement(IoCloseOutline, { size: 16 }) : /* @__PURE__ */ React__default.createElement(IoMenu, { size: 16 })),
     children
   );
 };

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

@@ -3,10 +3,7 @@ import { item } from '../../styles/menubar.js';
 import { IoCaretUpCircleOutline, IoCaretDownCircleOutline } from 'react-icons/io5';
 
 const { icon } = item();
-const IconControlSubItem = ({
-  show,
-  setShow
-}) => {
+const IconControlSubItem = ({ show, setShow }) => {
   const handleClick = (e) => {
     e.stopPropagation();
     setShow(!show);

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

@@ -9,12 +9,12 @@ const Item = ({
   subItems,
   renderSubItems,
   className,
-  href,
+  anchorProps,
   ...rest
 }) => {
   const [showSubItem, setShowSubItem] = useState(false);
   const hasSubItems = (subItems ?? []).length > 0;
-  return /* @__PURE__ */ React__default.createElement(ItemLink, { href }, /* @__PURE__ */ React__default.createElement("div", { "data-testid": "item-menubar", ...rest, className: container() }, /* @__PURE__ */ React__default.createElement("div", { className: text({ className }) }, children), hasSubItems ? /* @__PURE__ */ React__default.createElement(IconControlSubItem, { show: showSubItem, setShow: setShowSubItem }) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null)), showSubItem ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, subItems?.map((subItem) => renderSubItems?.(subItem))) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null));
+  return /* @__PURE__ */ React__default.createElement(ItemLink, { anchorProps }, /* @__PURE__ */ React__default.createElement("div", { "data-testid": "item-menubar", ...rest, className: container() }, /* @__PURE__ */ React__default.createElement("div", { className: text({ className }) }, children), hasSubItems ? /* @__PURE__ */ React__default.createElement(IconControlSubItem, { show: showSubItem, setShow: setShowSubItem }) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null)), showSubItem ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, subItems?.map((subItem) => renderSubItems?.(subItem))) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null));
 };
 
 export { Item as default };

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

@@ -1,16 +1,8 @@
 import React__default from 'react';
+import clsx from 'clsx';
 
-const ItemLink = ({ href, children, classNameAnchor }) => {
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, href ? /* @__PURE__ */ React__default.createElement(
-    "a",
-    {
-      href,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      className: classNameAnchor
-    },
-    children
-  ) : children);
+const ItemLink = ({ anchorProps, children }) => {
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, anchorProps ? /* @__PURE__ */ React__default.createElement("a", { ...anchorProps, className: clsx("w-full", anchorProps?.className) }, children) : children);
 };
 
 export { ItemLink as default };

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

@@ -11,10 +11,10 @@ const {
 const MostUsedItem = ({
   title,
   category,
-  href,
+  anchorProps,
   ...rest
 }) => {
-  return /* @__PURE__ */ React__default.createElement(ItemLink, { href, classNameAnchor: "w-full" }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(ItemLink, { anchorProps }, /* @__PURE__ */ React__default.createElement(
     Card,
     {
       ...rest,

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

@@ -1,8 +1,10 @@
 import React__default from 'react';
 import { MenubarProvider } from '../../provider/MenubarProvider.js';
+import '../../provider/SnackbarProvider.js';
+import '../../provider/MenubarContext.js';
 
-const Root = ({ children, ...rest }) => {
-  return /* @__PURE__ */ React__default.createElement(MenubarProvider, null, /* @__PURE__ */ React__default.createElement("div", { ...rest }, children));
+const Root = ({ children }) => {
+  return /* @__PURE__ */ React__default.createElement(MenubarProvider, null, children);
 };
 
 export { Root as default };

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

@@ -2,8 +2,14 @@ import React__default from 'react';
 import { Input } from '../Input/index.js';
 import clsx from 'clsx';
 import { animate } from '../../styles/menubar.js';
-import { useMenubar } from '../../provider/MenubarProvider.js';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import 'currency.js';
+import '../../provider/MenubarContext.js';
 import '../../provider/SnackbarProvider.js';
+import { useMenubar } from '../../provider/useMenubar.js';
 
 const Search = (props) => {
   const [show] = useMenubar();

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

@@ -3,8 +3,13 @@ import { subItem } from '../../styles/menubar.js';
 import ItemLink from './ItemLink.js';
 
 const { container } = subItem();
-const SubItem = ({ children, href, className, ...rest }) => {
-  return /* @__PURE__ */ React__default.createElement(ItemLink, { href }, /* @__PURE__ */ React__default.createElement(
+const SubItem = ({
+  children,
+  anchorProps,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ React__default.createElement(ItemLink, { anchorProps }, /* @__PURE__ */ React__default.createElement(
     "div",
     {
       ...rest,

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

@@ -17,7 +17,7 @@ const PopoverContent = ({
     getFloatingProps,
     context
   } = usePopoverContext();
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, isOpen && /* @__PURE__ */ React__default.createElement(FloatingFocusManager, { context, modal: true }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, isOpen && /* @__PURE__ */ React__default.createElement(FloatingFocusManager, { context, modal: false }, /* @__PURE__ */ React__default.createElement(
     "div",
     {
       ref: refs.setFloating,

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

@@ -3,7 +3,8 @@ import { usePopoverContext } from './Context.js';
 
 const PopoverTrigger = ({ children }) => {
   const { triggerProps } = usePopoverContext();
-  return cloneWithProps(children, triggerProps);
+  const isDisabled = children.props?.disabled;
+  return cloneWithProps(children, isDisabled ? {} : triggerProps);
 };
 
 export { PopoverTrigger };

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

@@ -19,16 +19,7 @@ const SelectTrigger = ({
       return multiLabelSelected ? multiLabelSelected(value.length) : `${value.length} items selected`;
     return labelExtractor(value);
   }, [label, value]);
-  return /* @__PURE__ */ React__default.createElement(Popover.Trigger, null, /* @__PURE__ */ React__default.createElement(
-    "button",
-    {
-      className: button({ disabled, className: "bg-white" }),
-      disabled,
-      role: "button"
-    },
-    /* @__PURE__ */ React__default.createElement("span", { "data-testid": "select-placeholder" }, _placeholder),
-    /* @__PURE__ */ React__default.createElement(IoChevronDownOutline, null)
-  ));
+  return /* @__PURE__ */ React__default.createElement(Popover.Trigger, null, /* @__PURE__ */ React__default.createElement("button", { className: button(), disabled, role: "button" }, /* @__PURE__ */ React__default.createElement("span", { "data-testid": "select-placeholder" }, _placeholder), /* @__PURE__ */ React__default.createElement(IoChevronDownOutline, null)));
 };
 
 export { SelectTrigger };

package/dist/esm/index.js

@@ -50,6 +50,8 @@ 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 { MenubarProvider } from './provider/MenubarProvider.js';
 export { SnackbarProvider, useSnackbar } from './provider/SnackbarProvider.js';
+export { MenubarContext } from './provider/MenubarContext.js';
+export { useMenubar } from './provider/useMenubar.js';
 export { BRLMask, CurrencyIMask, ExpressionMasks, Masks, NumberIMask, PercentageIMask, PercentageMask } from './components/Input/masks.js';

package/dist/esm/provider/MenubarContext.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+const MenubarContext = createContext({
+  show: false,
+  setShow: () => void 0
+});
+
+export { MenubarContext };

package/dist/esm/provider/MenubarProvider.js

@@ -1,19 +1,29 @@
-import React__default, { createContext, useContext } from 'react';
+import React__default, { useRef, useEffect } from 'react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import 'currency.js';
+import { useOutsideClickListener } from '../hooks/useOutsideClickListener.js';
+import { MenubarContext } from './MenubarContext.js';
 
-const MenubarContext = createContext({
-  show: false,
-  setShow: () => void 0
-});
 const MenubarProvider = ({ children }) => {
   const [show, setShow] = React__default.useState(false);
-  return /* @__PURE__ */ React__default.createElement(MenubarContext.Provider, { value: { show, setShow } }, children);
-};
-const useMenubar = () => {
-  const context = useContext(MenubarContext);
-  if (!context) {
-    throw new Error("useMenubar must be used within a MenubarProvider");
-  }
-  return [context.show, context.setShow];
+  const ref = useRef(null);
+  const showRef = useRef(false);
+  useEffect(() => {
+    showRef.current = show;
+  }, [show]);
+  const onClickOutside = () => {
+    if (showRef.current === true) {
+      setShow(false);
+    }
+  };
+  useOutsideClickListener({
+    ref,
+    onClickOutside
+  });
+  return /* @__PURE__ */ React__default.createElement(MenubarContext.Provider, { value: { show, setShow } }, /* @__PURE__ */ React__default.createElement("div", { ref }, children));
 };
 
-export { MenubarProvider, useMenubar };
+export { MenubarProvider };

package/dist/esm/provider/useMenubar.js

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { MenubarContext } from './MenubarContext.js';
+
+const useMenubar = () => {
+  const context = useContext(MenubarContext);
+  if (!context) {
+    throw new Error("useMenubar must be used within a MenubarProvider");
+  }
+  return [context.show, context.setShow];
+};
+
+export { useMenubar };

package/dist/esm/styles/menubar.js

@@ -2,10 +2,10 @@ import { tv } from 'tailwind-variants';
 
 const menubar = tv({
   slots: {
-    header: "relative 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-sidebar",
     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] absolute"
+    dropdown: "w-full bg-white flex-1 shadow-default z-popover px-[8vw] absolute"
   },
   variants: {
     show: {

package/dist/types/components/Menubar/Categories.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { DefaultProps } from './interface';
+import { DefaultProps } from './types';
 declare const Categories: ({ children }: DefaultProps) => JSX.Element;
 export default Categories;

package/dist/types/components/Menubar/Category.d.ts

@@ -1,8 +1,4 @@
-import { ReactNode } from 'react';
-export type CategoryType<T> = {
-    title: string;
-    options: T[];
-    render: (prop: T) => ReactNode;
-};
+/// <reference types="react" />
+import { CategoryType } from './types';
 declare const Category: <T>({ title, options, render }: CategoryType<T>) => JSX.Element;
 export default Category;

package/dist/types/components/Menubar/Dropdown.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { DefaultProps } from './interface';
+import { DefaultProps } from './types';
 declare const Dropdown: ({ children, ...rest }: DefaultProps) => JSX.Element;
 export default Dropdown;

package/dist/types/components/Menubar/DropdownRoot.d.ts

@@ -1,18 +1,4 @@
 /// <reference types="react" />
-import { DefaultProps } from './interface';
-import { MostUsedItemProps } from './MostUsedItem';
-interface MenuItem extends DefaultProps {
-    title: string;
-    items?: MenuItem[];
-}
-interface MenuCategory {
-    title: string;
-    items: MenuItem[];
-}
-export interface DropdownRootProps {
-    labelMostUsed?: string;
-    mostUsed?: MostUsedItemProps[];
-    options: MenuCategory[];
-}
+import { DropdownRootProps } from './types';
 declare const DropdownRoot: ({ mostUsed, options, labelMostUsed, }: DropdownRootProps) => JSX.Element;
 export default DropdownRoot;

package/dist/types/components/Menubar/Header.d.ts

@@ -1,6 +1,4 @@
-import React, { ReactNode } from 'react';
-export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-    children?: ReactNode;
-}
+/// <reference types="react" />
+import { HeaderProps } from './types';
 declare const Header: ({ children, className, ...rest }: HeaderProps) => JSX.Element;
 export default Header;

package/dist/types/components/Menubar/IconControlSubItem.d.ts

@@ -1,6 +1,4 @@
-import React, { Dispatch } from 'react';
-declare const IconControlSubItem: ({ show, setShow, }: {
-    show: boolean;
-    setShow: Dispatch<React.SetStateAction<boolean>>;
-}) => JSX.Element;
+/// <reference types="react" />
+import { IconControlSubItemProps } from './types';
+declare const IconControlSubItem: ({ show, setShow }: IconControlSubItemProps) => JSX.Element;
 export default IconControlSubItem;

package/dist/types/components/Menubar/Item.d.ts

@@ -1,10 +1,4 @@
-import React from 'react';
-import { DefaultProps } from './interface';
-export interface ItemProps<T> extends DefaultProps {
-    children?: React.ReactNode;
-    subItems?: T[];
-    renderSubItems?: (prop: T) => React.ReactNode;
-    href?: string;
-}
-declare const Item: <T>({ children, subItems, renderSubItems, className, href, ...rest }: ItemProps<T>) => JSX.Element;
+/// <reference types="react" />
+import { ItemProps } from './types';
+declare const Item: <T>({ children, subItems, renderSubItems, className, anchorProps, ...rest }: ItemProps<T>) => JSX.Element;
 export default Item;

package/dist/types/components/Menubar/ItemLink.d.ts

@@ -1,8 +1,4 @@
-import React from 'react';
-interface ItemLinkProps {
-    href?: string;
-    children?: React.ReactNode;
-    classNameAnchor?: string;
-}
-declare const ItemLink: ({ href, children, classNameAnchor }: ItemLinkProps) => JSX.Element;
+/// <reference types="react" />
+import { ItemLinkProps } from './types';
+declare const ItemLink: ({ anchorProps, children }: ItemLinkProps) => JSX.Element;
 export default ItemLink;

package/dist/types/components/Menubar/Left.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { DefaultProps } from './interface';
+import { DefaultProps } from './types';
 declare const Left: ({ children, ...rest }: DefaultProps) => JSX.Element;
 export default Left;

package/dist/types/components/Menubar/MostUsed.d.ts

@@ -1,8 +1,4 @@
-import React from 'react';
-import { DefaultProps } from './interface';
-export interface MostUsedProps extends DefaultProps {
-    label?: string;
-    children?: React.ReactNode;
-}
+/// <reference types="react" />
+import { MostUsedProps } from './types';
 declare const MostUsed: ({ label, children, ...rest }: MostUsedProps) => JSX.Element;
 export default MostUsed;

package/dist/types/components/Menubar/MostUsedItem.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-import { CardProps } from '../Card';
-export interface MostUsedItemProps extends CardProps {
-    title: string;
-    category: string;
-    href?: string;
-}
-declare const MostUsedItem: ({ title, category, href, ...rest }: MostUsedItemProps) => JSX.Element;
+import { MostUsedItemProps } from './types';
+declare const MostUsedItem: ({ title, category, anchorProps, ...rest }: MostUsedItemProps) => JSX.Element;
 export default MostUsedItem;

package/dist/types/components/Menubar/MostUsedList.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { DropdownRootProps } from './DropdownRoot';
+import { DropdownRootProps } from './types';
 declare const MostUsedList: ({ mostUsed }: Pick<DropdownRootProps, 'mostUsed'>) => JSX.Element;
 export default MostUsedList;

package/dist/types/components/Menubar/Right.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { DefaultProps } from './interface';
+import { DefaultProps } from './types';
 declare const Right: ({ children, ...rest }: DefaultProps) => JSX.Element;
 export default Right;

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

@@ -1,6 +1,4 @@
-import React, { ReactNode } from 'react';
-export interface RootProps extends React.HTMLAttributes<HTMLDivElement> {
-    children?: ReactNode;
-}
-declare const Root: ({ children, ...rest }: RootProps) => JSX.Element;
+/// <reference types="react" />
+import { RootProps } from './types';
+declare const Root: ({ children }: RootProps) => JSX.Element;
 export default Root;

package/dist/types/components/Menubar/SubItem.d.ts

@@ -1,7 +1,4 @@
 /// <reference types="react" />
-import { DefaultProps } from './interface';
-export interface SubItemProps extends DefaultProps {
-    href?: string;
-}
-declare const SubItem: ({ children, href, className, ...rest }: SubItemProps) => JSX.Element;
+import { SubItemProps } from './types';
+declare const SubItem: ({ children, anchorProps, className, ...rest }: SubItemProps) => JSX.Element;
 export default SubItem;

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

@@ -1,16 +1,17 @@
 /// <reference types="react" />
 export declare const Menubar: {
-    Root: ({ children, ...rest }: import("./Root").RootProps) => JSX.Element;
-    Header: ({ children, className, ...rest }: import("./Header").HeaderProps) => JSX.Element;
-    HeaderLeft: ({ children, ...rest }: import("./interface").DefaultProps) => JSX.Element;
+    Root: ({ children }: import("./types").RootProps) => JSX.Element;
+    Header: ({ children, className, ...rest }: import("./types").HeaderProps) => JSX.Element;
+    HeaderLeft: ({ children, ...rest }: import("./types").DefaultProps) => JSX.Element;
     Search: (props: import("..").InputSearchProps) => JSX.Element;
-    HeaderRight: ({ children, ...rest }: import("./interface").DefaultProps) => JSX.Element;
-    Dropdown: ({ children, ...rest }: import("./interface").DefaultProps) => JSX.Element;
-    MostUsed: ({ label, children, ...rest }: import("./MostUsed").MostUsedProps) => JSX.Element;
-    MostUsedItem: ({ title, category, href, ...rest }: import("./MostUsedItem").MostUsedItemProps) => JSX.Element;
-    Category: <T>({ title, options, render }: import("./Category").CategoryType<T>) => JSX.Element;
-    Categories: ({ children }: import("./interface").DefaultProps) => JSX.Element;
-    Item: <T_1>({ children, subItems, renderSubItems, className, href, ...rest }: import("./Item").ItemProps<T_1>) => JSX.Element;
-    SubItem: ({ children, href, className, ...rest }: import("./SubItem").SubItemProps) => JSX.Element;
-    DropdownRoot: ({ mostUsed, options, labelMostUsed, }: import("./DropdownRoot").DropdownRootProps) => JSX.Element;
+    HeaderRight: ({ children, ...rest }: import("./types").DefaultProps) => JSX.Element;
+    Dropdown: ({ children, ...rest }: import("./types").DefaultProps) => JSX.Element;
+    MostUsed: ({ label, children, ...rest }: import("./types").MostUsedProps) => JSX.Element;
+    MostUsedItem: ({ title, category, anchorProps, ...rest }: import("./types").MostUsedItemProps) => JSX.Element;
+    Category: <T>({ title, options, render }: import("./types").CategoryType<T>) => JSX.Element;
+    Categories: ({ children }: import("./types").DefaultProps) => JSX.Element;
+    Item: <T_1>({ children, subItems, renderSubItems, className, anchorProps, ...rest }: import("./types").ItemProps<T_1>) => JSX.Element;
+    SubItem: ({ children, anchorProps, className, ...rest }: import("./types").SubItemProps) => JSX.Element;
+    DropdownRoot: ({ mostUsed, options, labelMostUsed, }: import("./types").DropdownRootProps) => JSX.Element;
 };
+export * from './types';

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

@@ -0,0 +1,56 @@
+import React, { Dispatch, ReactNode } from 'react';
+import { CardProps } from '../Card';
+export interface DefaultProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+export interface MenuItem extends DefaultProps {
+    title: string;
+    items?: MenuItem[];
+    anchorProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
+}
+export interface MenuCategory {
+    title: string;
+    items: MenuItem[];
+}
+export interface DropdownRootProps {
+    labelMostUsed?: string;
+    mostUsed?: MostUsedItemProps[];
+    options: MenuCategory[];
+}
+export type CategoryType<T> = {
+    title: string;
+    options: T[];
+    render: (prop: T) => ReactNode;
+};
+export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+export interface ItemLinkProps {
+    anchorProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
+    children?: React.ReactNode;
+}
+export interface MostUsedItemProps extends CardProps {
+    title: string;
+    category: string;
+    anchorProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
+}
+export interface MostUsedProps extends DefaultProps {
+    label?: string;
+    children?: React.ReactNode;
+}
+export interface RootProps {
+    children?: ReactNode;
+}
+export interface SubItemProps extends DefaultProps {
+    anchorProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
+}
+export interface IconControlSubItemProps {
+    show: boolean;
+    setShow: Dispatch<React.SetStateAction<boolean>>;
+}
+export interface ItemProps<T> extends DefaultProps {
+    children?: React.ReactNode;
+    subItems?: T[];
+    renderSubItems?: (prop: T) => React.ReactNode;
+    anchorProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
+}

package/dist/types/provider/MenubarContext.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface ContextProviderProps {
+    show: boolean;
+    setShow: (show: boolean) => void;
+}
+export declare const MenubarContext: import("react").Context<ContextProviderProps | null>;
+export {};

package/dist/types/provider/MenubarProvider.d.ts

@@ -2,7 +2,3 @@ import { ReactNode } from 'react';
 export declare const MenubarProvider: ({ children }: {
     children: ReactNode;
 }) => JSX.Element;
-export declare const useMenubar: () => [
-    show: boolean,
-    setShow: (show: boolean) => void
-];

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

@@ -1,2 +1,4 @@
 export * from './MenubarProvider';
 export * from './SnackbarProvider';
+export * from './MenubarContext';
+export * from './useMenubar';

package/dist/types/provider/useMenubar.d.ts

@@ -0,0 +1,4 @@
+export declare const useMenubar: () => [
+    show: boolean,
+    setShow: (show: boolean) => void
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "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.2",
+    "@tecsinapse/cortex-core": "0.3.3",
     "clsx": "*",
     "react-aria": "^3.33.1",
     "react-icons": "^5.2.1",
@@ -45,5 +45,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "331072b5da891409d0d7bd89df4a86e4d77dd8b8"
+  "gitHead": "13abeb7d1d5569567ef6f158d404211ddffce5f1"
 }

package/dist/types/components/Menubar/interface.d.ts

@@ -1,4 +0,0 @@
-import React, { ReactNode } from 'react';
-export interface DefaultProps extends React.HTMLAttributes<HTMLDivElement> {
-    children?: ReactNode;
-}