@tecsinapse/cortex-react 1.3.0-beta.3 → 1.3.0-beta.5

package/dist/cjs/components/Masonry.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+
+const Masonry = ({ children, columns }) => {
+  const getColumns = () => {
+    const columnsArray = Array.from(
+      { length: columns },
+      () => []
+    );
+    React.Children.forEach(children, (child, index) => {
+      if (child && React.isValidElement(child)) {
+        columnsArray[index % columns].push(child);
+      }
+    });
+    return columnsArray;
+  };
+  const renderColumn = (column) => {
+    return column.map((item, index) => {
+      return /* @__PURE__ */ React.createElement("div", { className: index > 0 ? "mt-deca" : "mt-0", key: index }, item);
+    });
+  };
+  const renderColumns = () => {
+    return getColumns().map((column, index) => {
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: clsx(
+            "width-0 flex flex-1 flex-col content-start",
+            index > 0 ? "ml-deca" : "ml-0"
+          ),
+          key: index
+        },
+        renderColumn(column)
+      );
+    });
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-testid": "masonry",
+      className: "box-border flex w-full flex-row content-stretch justify-center"
+    },
+    renderColumns()
+  );
+};
+
+module.exports = Masonry;

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

@@ -0,0 +1,10 @@
+'use strict';
+
+var React = require('react');
+var Masonry = require('../Masonry.js');
+
+const Categories = ({ children }) => {
+  return /* @__PURE__ */ React.createElement(Masonry, { columns: 4 }, children);
+};
+
+module.exports = Categories;

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

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+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))));
+};
+
+module.exports = Category;

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

@@ -0,0 +1,23 @@
+'use strict';
+
+var React = require('react');
+var menubar = require('../../styles/menubar.js');
+var clsx = require('clsx');
+var MenubarProvider = require('../../provider/MenubarProvider.js');
+require('../../provider/SnackbarProvider.js');
+
+const { dropdown } = menubar.menubar();
+const Dropdown = ({ children, ...rest }) => {
+  const [show] = MenubarProvider.useMenubar();
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(dropdown(), menubar.animate({ show })),
+      "data-testid": "dropdown-menubar",
+      ...rest
+    },
+    children
+  );
+};
+
+module.exports = Dropdown;

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

@@ -0,0 +1,38 @@
+'use strict';
+
+var React = require('react');
+var index = require('./index.js');
+var MostUsedList = require('./MostUsedList.js');
+
+const DropdownRoot = ({
+  mostUsed,
+  options,
+  labelMostUsed
+}) => {
+  const hasMostUsed = mostUsed && (mostUsed ?? []).length > 0;
+  return /* @__PURE__ */ React.createElement(index.Menubar.Dropdown, null, hasMostUsed ? /* @__PURE__ */ React.createElement(index.Menubar.MostUsed, { label: labelMostUsed }, /* @__PURE__ */ React.createElement(MostUsedList, { mostUsed })) : /* @__PURE__ */ React.createElement(React.Fragment, null), /* @__PURE__ */ React.createElement(index.Menubar.Categories, null, options.map((item, index$1) => /* @__PURE__ */ React.createElement(
+    index.Menubar.Category,
+    {
+      key: `${item.title}-${index$1}`,
+      title: item.title,
+      options: item.items,
+      render: (prop) => {
+        const { title, items, ...rest } = prop;
+        return /* @__PURE__ */ React.createElement(
+          index.Menubar.Item,
+          {
+            key: prop.title,
+            ...rest,
+            subItems: items ?? [],
+            renderSubItems: ({ title: title2, ...rest2 }) => {
+              return /* @__PURE__ */ React.createElement(index.Menubar.SubItem, { key: title2, ...rest2 }, title2);
+            }
+          },
+          title
+        );
+      }
+    }
+  ))));
+};
+
+module.exports = DropdownRoot;

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

@@ -0,0 +1,26 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var menubar = require('../../styles/menubar.js');
+var Button = require('../Button.js');
+var io5 = require('react-icons/io5');
+var MenubarProvider = require('../../provider/MenubarProvider.js');
+require('../../provider/SnackbarProvider.js');
+
+const { root } = menubar.menubar();
+const Header = ({ children, className, ...rest }) => {
+  const [show, setShow] = MenubarProvider.useMenubar();
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx.clsx(root(), className),
+      "data-testid": "header-menubar",
+      ...rest
+    },
+    /* @__PURE__ */ React.createElement(Button.Button, { variants: { size: "square" }, onClick: () => setShow(!show) }, /* @__PURE__ */ React.createElement(io5.IoMenu, { size: 16 })),
+    children
+  );
+};
+
+module.exports = Header;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+var React = require('react');
+var menubar = require('../../styles/menubar.js');
+var io5 = require('react-icons/io5');
+
+const { icon } = menubar.item();
+const IconControlSubItem = ({
+  show,
+  setShow
+}) => {
+  const handleClick = (e) => {
+    e.stopPropagation();
+    setShow(!show);
+  };
+  return /* @__PURE__ */ React.createElement("div", { onClick: handleClick, "data-testid": "icon-sub-item-menubar" }, show ? /* @__PURE__ */ React.createElement(io5.IoCaretUpCircleOutline, { className: icon() }) : /* @__PURE__ */ React.createElement(io5.IoCaretDownCircleOutline, { className: icon() }));
+};
+
+module.exports = IconControlSubItem;

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

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+var IconControlSubItem = require('./IconControlSubItem.js');
+var menubar = require('../../styles/menubar.js');
+var ItemLink = require('./ItemLink.js');
+
+const { container, text } = menubar.item();
+const Item = ({
+  children,
+  subItems,
+  renderSubItems,
+  className,
+  href,
+  ...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));
+};
+
+module.exports = Item;

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

@@ -0,0 +1,18 @@
+'use strict';
+
+var React = require('react');
+
+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);
+};
+
+module.exports = ItemLink;

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

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+var menubar = require('../../styles/menubar.js');
+
+const { left } = menubar.menubar();
+const Left = ({ children, ...rest }) => {
+  return /* @__PURE__ */ React.createElement("div", { className: left(), "data-testid": "header-left-menubar", ...rest }, children);
+};
+
+module.exports = Left;

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

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+var menubar = require('../../styles/menubar.js');
+
+const { container, label: labelClass, containerList } = menubar.mostUsed();
+const MostUsed = ({ label, children, ...rest }) => {
+  return /* @__PURE__ */ React.createElement("div", { className: container(), "data-testid": "most-used-menubar", ...rest }, /* @__PURE__ */ React.createElement("p", { className: labelClass() }, label), /* @__PURE__ */ React.createElement("div", { className: containerList() }, children));
+};
+
+module.exports = MostUsed;

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

@@ -0,0 +1,31 @@
+'use strict';
+
+var React = require('react');
+var menubar = require('../../styles/menubar.js');
+var Card = require('../Card.js');
+var ItemLink = require('./ItemLink.js');
+
+const {
+  title: titleClass,
+  category: categoryClass,
+  container
+} = menubar.mostUsedItem();
+const MostUsedItem = ({
+  title,
+  category,
+  href,
+  ...rest
+}) => {
+  return /* @__PURE__ */ React.createElement(ItemLink, { href, classNameAnchor: "w-full" }, /* @__PURE__ */ React.createElement(
+    Card.Card,
+    {
+      ...rest,
+      "data-testid": "most-used-item-menubar",
+      className: container()
+    },
+    /* @__PURE__ */ React.createElement("p", { className: titleClass() }, title),
+    /* @__PURE__ */ React.createElement("p", { className: categoryClass() }, category)
+  ));
+};
+
+module.exports = MostUsedItem;

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

@@ -0,0 +1,58 @@
+'use strict';
+
+var React = require('react');
+require('clsx');
+require('@internationalized/date');
+require('../Badge.js');
+require('../BaseSnackbar.js');
+require('react-icons/md');
+require('../Card.js');
+require('../Button.js');
+require('react-aria');
+require('react-stately');
+require('@floating-ui/react');
+require('../CalendarCell.js');
+require('@tecsinapse/cortex-core');
+require('react-icons/fa');
+require('react-icons/lia');
+require('../Input/Box.js');
+require('../Input/Face.js');
+require('../Input/Left.js');
+require('../Input/Right.js');
+require('../Input/Root.js');
+require('../Input/Search.js');
+require('react-icons/io');
+require('../GroupButton.js');
+require('../Hint.js');
+require('../Modal.js');
+require('../../styles/calendar-cell.js');
+require('../../styles/groupButton.js');
+require('../../styles/progressBar.js');
+require('../Select/GroupedOptions.js');
+require('../Select/context.js');
+require('../Popover/Context.js');
+require('../Select/Trigger.js');
+require('../Tag.js');
+require('../TextArea.js');
+require('../Toggle.js');
+require('../Tooltip.js');
+var index = require('./index.js');
+
+const MostUsedList = ({ mostUsed }) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, (mostUsed ?? []).map((item, index$1) => {
+    const { title, category, ...rest } = item;
+    if (index$1 > 3)
+      return /* @__PURE__ */ React.createElement(React.Fragment, { key: `${title}-${category}` });
+    return /* @__PURE__ */ React.createElement(
+      index.Menubar.MostUsedItem,
+      {
+        key: `${title}-${category}`,
+        title,
+        category,
+        ...rest
+      }
+    );
+  }));
+};
+
+module.exports = MostUsedList;

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

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+var menubar = require('../../styles/menubar.js');
+
+const { right } = menubar.menubar();
+const Right = ({ children, ...rest }) => {
+  return /* @__PURE__ */ React.createElement("div", { className: right(), "data-testid": "header-right-menubar", ...rest }, children);
+};
+
+module.exports = Right;

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

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

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

@@ -0,0 +1,21 @@
+'use strict';
+
+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('../../provider/SnackbarProvider.js');
+
+const Search = (props) => {
+  const [show] = MenubarProvider.useMenubar();
+  return /* @__PURE__ */ React.createElement(
+    index.Input.Search,
+    {
+      ...props,
+      className: clsx("mr-tera flex-1", menubar.animate({ show }))
+    }
+  );
+};
+
+module.exports = Search;

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

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react');
+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(
+    "div",
+    {
+      ...rest,
+      "data-testid": "sub-item-menubar",
+      className: container({ className })
+    },
+    children
+  ));
+};
+
+module.exports = SubItem;

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

@@ -0,0 +1,33 @@
+'use strict';
+
+var Root = require('./Root.js');
+var Left = require('./Left.js');
+var Search = require('./Search.js');
+var Right = require('./Right.js');
+var Dropdown = require('./Dropdown.js');
+var MostUsed = require('./MostUsed.js');
+var MostUsedItem = require('./MostUsedItem.js');
+var Header = require('./Header.js');
+var Category = require('./Category.js');
+var Item = require('./Item.js');
+var Categories = require('./Categories.js');
+var SubItem = require('./SubItem.js');
+var DropdownRoot = require('./DropdownRoot.js');
+
+const Menubar = {
+  Root,
+  Header,
+  HeaderLeft: Left,
+  Search,
+  HeaderRight: Right,
+  Dropdown,
+  MostUsed,
+  MostUsedItem,
+  Category,
+  Categories,
+  Item,
+  SubItem,
+  DropdownRoot
+};
+
+exports.Menubar = Menubar;

package/dist/cjs/components/Popover/{PopoverContent.js → Content.js}

@@ -2,16 +2,19 @@
 
 var React = require('react');
 var clsx = require('clsx');
-var PopoverContext = require('./PopoverContext.js');
+var Context = require('./Context.js');
 
-const PopoverContent = ({ children, className }) => {
-  const { isOpen, x, y, strategy, floatingStyles, refs } = PopoverContext.usePopoverContext();
+const PopoverContent = ({
+  children,
+  className
+}) => {
+  const { isOpen, x, y, strategy, floatingStyles, refs } = Context.usePopoverContext();
   return /* @__PURE__ */ React.createElement(React.Fragment, null, isOpen ? /* @__PURE__ */ React.createElement(
     "div",
     {
       ref: refs.setFloating,
       className: clsx(
-        "border border-gray-200 bg-black text-white p-4 rounded-md shadow-lg z-50",
+        "border border-gray-200 bg-black  p-4 rounded-md shadow-lg z-50",
         className
       ),
       style: {
@@ -25,4 +28,4 @@ const PopoverContent = ({ children, className }) => {
   ) : /* @__PURE__ */ React.createElement(React.Fragment, null));
 };
 
-module.exports = PopoverContent;
+exports.PopoverContent = PopoverContent;

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

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+
+const Context = React.createContext(void 0);
+const usePopoverContext = () => {
+  const context = React.useContext(Context);
+  if (!context) {
+    throw new Error("usePopoverContext must be used within a PopoverProvider");
+  }
+  return context;
+};
+
+exports.Context = Context;
+exports.usePopoverContext = usePopoverContext;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+var React = require('react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var useFloatingLogic = require('../../hooks/useFloatingLogic.js');
+var Context = require('./Context.js');
+
+const PopoverProvider = ({
+  children,
+  placement,
+  trigger
+}) => {
+  const floatingLogic = useFloatingLogic.useFloatingLogic({ placement, trigger });
+  return /* @__PURE__ */ React.createElement(Context.Context.Provider, { value: { ...floatingLogic } }, children);
+};
+
+exports.PopoverProvider = PopoverProvider;

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

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+var index = require('./index.js');
+
+const PopoverRoot = ({
+  children,
+  placement,
+  trigger
+}) => {
+  return /* @__PURE__ */ React.createElement(index.Popover.Provider, { placement, trigger }, children);
+};
+
+exports.PopoverRoot = PopoverRoot;

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

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

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

@@ -0,0 +1,15 @@
+'use strict';
+
+var Root = require('./Root.js');
+var Trigger = require('./Trigger.js');
+var Content = require('./Content.js');
+var Provider = require('./Provider.js');
+
+const Popover = {
+  Root: Root.PopoverRoot,
+  Trigger: Trigger.PopoverTrigger,
+  Content: Content.PopoverContent,
+  Provider: Provider.PopoverProvider
+};
+
+exports.Popover = Popover;

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

@@ -0,0 +1,26 @@
+'use strict';
+
+var React = require('react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var useOutsideClickListener = require('../../hooks/useOutsideClickListener.js');
+require('@floating-ui/react');
+var context = require('./context.js');
+var Context = require('../Popover/Context.js');
+
+const Content = ({
+  children,
+  keyExtractor,
+  labelExtractor,
+  value
+}) => {
+  const { setIsOpen, refs } = Context.usePopoverContext();
+  useOutsideClickListener.useOutsideClickListener({
+    ref: refs.domReference,
+    onClickOutside: () => setIsOpen(false)
+  });
+  return /* @__PURE__ */ React.createElement(context.SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white" }, children));
+};
+
+module.exports = Content;

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

@@ -4,6 +4,7 @@ var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 var index = require('./index.js');
 var context = require('./context.js');
+var Context = require('../Popover/Context.js');
 
 const { groupedTitle, containerGrouped } = cortexCore.selectVariants();
 const SelectGroupedOptions = ({
@@ -11,11 +12,12 @@ const SelectGroupedOptions = ({
   groupedLabelExtractor,
   options
 }) => {
-  const { setOpen, keyExtractor } = React.useContext(context.SelectContext);
+  const { keyExtractor } = React.useContext(context.SelectContext);
+  const { setIsOpen } = Context.usePopoverContext();
   const handleSelect = React.useCallback(
     (option) => {
       onSelect(option);
-      setOpen?.(false);
+      setIsOpen?.(false);
     },
     [onSelect]
   );

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

@@ -1,18 +1,20 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index.js');
 var context = require('./context.js');
+var index = require('./index.js');
+var Context = require('../Popover/Context.js');
 
 const SelectOptions = ({
   onSelect,
   options
 }) => {
-  const { setOpen, keyExtractor } = React.useContext(context.SelectContext);
+  const { keyExtractor } = React.useContext(context.SelectContext);
+  const { setIsOpen } = Context.usePopoverContext();
   const handleSelect = React.useCallback(
     (option) => {
       onSelect(option);
-      setOpen?.(false);
+      setIsOpen?.(false);
     },
     [onSelect]
   );

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

@@ -1,13 +1,10 @@
 'use strict';
 
-var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
-var context = require('./context.js');
+var index = require('../Popover/index.js');
 
-const { dropdown } = cortexCore.selectVariants();
 const SelectPopover = ({ children }) => {
-  const { open } = React.useContext(context.SelectContext);
-  return /* @__PURE__ */ React.createElement("div", { className: dropdown({ open }), "data-testid": "select-popover" }, children);
+  return /* @__PURE__ */ React.createElement(index.Popover.Content, { className: "bg-white max-h-[30vh] w-full overflow-y-scroll" }, children);
 };
 
 exports.SelectPopover = SelectPopover;