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

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

@@ -1,12 +1,8 @@
 '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 Content = require('./Content.js');
+var index = require('../Popover/index.js');
 
 const SelectRoot = ({
   children,
@@ -14,19 +10,15 @@ const SelectRoot = ({
   keyExtractor,
   labelExtractor
 }) => {
-  const [open, setOpen] = React.useState(false);
-  const ref = React.useRef(null);
-  useOutsideClickListener.useOutsideClickListener({
-    ref,
-    onClickOutside: () => setOpen?.(false)
-  });
-  return /* @__PURE__ */ React.createElement(
-    context.SelectContext.Provider,
+  return /* @__PURE__ */ React.createElement(index.Popover.Provider, null, /* @__PURE__ */ React.createElement(index.Popover.Root, { placement: "bottom", trigger: "click" }, /* @__PURE__ */ React.createElement(
+    Content,
     {
-      value: { value, open, setOpen, keyExtractor, labelExtractor }
+      keyExtractor,
+      labelExtractor,
+      value
     },
-    /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, children)
-  );
+    children
+  )));
 };
 
 exports.SelectRoot = SelectRoot;

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

@@ -4,25 +4,25 @@ 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');
 
 const { button } = cortexCore.selectVariants();
 const SelectTrigger = ({ label, disabled }) => {
-  const { value, setOpen, labelExtractor, open } = React.useContext(context.SelectContext);
+  const { value, labelExtractor } = React.useContext(context.SelectContext);
   const placeholder = React.useMemo(
     () => value ? labelExtractor(value) : label,
     [label, value]
   );
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(index.Popover.Trigger, null, /* @__PURE__ */ React.createElement(
     "button",
     {
       className: button({ disabled }),
-      onClick: () => setOpen?.(!open),
       disabled,
       role: "button"
     },
     /* @__PURE__ */ React.createElement("span", { "data-testid": "select-placeholder" }, placeholder),
     /* @__PURE__ */ React.createElement(io5.IoChevronDownOutline, null)
-  );
+  ));
 };
 
 exports.SelectTrigger = SelectTrigger;

package/dist/cjs/hooks/useOutsideClickListener.js

@@ -8,7 +8,9 @@ const useOutsideClickListener = ({
 }) => {
   const handleClickOutside = React.useCallback((event) => {
     if (ref.current && !ref.current.contains(event.target)) {
-      onClickOutside?.();
+      setTimeout(() => {
+        onClickOutside?.();
+      }, 10);
     }
   }, []);
   React.useEffect(() => {

package/dist/cjs/index.js

@@ -25,7 +25,8 @@ var TextArea = require('./components/TextArea.js');
 var TimeFieldInput = require('./components/TimeFieldInput.js');
 var Toggle = require('./components/Toggle.js');
 require('./components/Tooltip.js');
-var Popover = require('./components/Popover/Popover.js');
+var index$2 = require('./components/Popover/index.js');
+var index$3 = require('./components/Menubar/index.js');
 var useCalendar = require('./hooks/useCalendar.js');
 var useCalendarCell = require('./hooks/useCalendarCell.js');
 var useCalendarGrid = require('./hooks/useCalendarGrid.js');
@@ -71,7 +72,8 @@ exports.Tag = Tag.Tag;
 exports.TextArea = TextArea.TextArea;
 exports.TimeFieldInput = TimeFieldInput.TimeFieldInput;
 exports.Toggle = Toggle.Toggle;
-exports.Popover = Popover.Popover;
+exports.Popover = index$2.Popover;
+exports.Menubar = index$3.Menubar;
 exports.useCalendar = useCalendar.useCalendar;
 exports.useCalendarCell = useCalendarCell.useCalendarCell;
 exports.useCalendarGrid = useCalendarGrid.useCalendarGrid;

package/dist/cjs/provider/MenubarProvider.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+
+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("useSnackbar must be used within a SnackbarProvider");
+  }
+  return [context.show, context.setShow];
+};
+
+exports.MenubarProvider = MenubarProvider;
+exports.useMenubar = useMenubar;

package/dist/cjs/provider/SnackbarProvider.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var React = require('react');
+require('sonner');
+require('clsx');
+require('@internationalized/date');
+require('../components/Badge.js');
+require('../components/BaseSnackbar.js');
+require('react-icons/md');
+require('../components/Card.js');
+require('../components/Button.js');
+require('react-aria');
+require('react-stately');
+require('@floating-ui/react');
+require('../components/CalendarCell.js');
+require('@tecsinapse/cortex-core');
+require('react-icons/fa');
+require('react-icons/lia');
+require('../components/Input/Box.js');
+require('../components/Input/Face.js');
+require('../components/Input/Left.js');
+require('../components/Input/Right.js');
+require('../components/Input/Root.js');
+require('../components/Input/Search.js');
+require('react-icons/io');
+require('../components/GroupButton.js');
+require('../components/Hint.js');
+require('../components/Modal.js');
+require('../styles/calendar-cell.js');
+require('../styles/groupButton.js');
+require('../styles/progressBar.js');
+require('../components/Select/GroupedOptions.js');
+require('../components/Select/context.js');
+require('../components/Popover/Context.js');
+require('../components/Select/Trigger.js');
+require('../components/Tag.js');
+require('../components/TextArea.js');
+require('../components/Toggle.js');
+require('../components/Tooltip.js');
+require('./MenubarProvider.js');
+require('../components/Menubar/Left.js');
+require('../styles/menubar.js');
+require('../components/Menubar/Right.js');
+require('../components/Menubar/Dropdown.js');
+require('../components/Menubar/MostUsed.js');
+require('../components/Menubar/MostUsedItem.js');
+require('../components/Menubar/Header.js');
+require('../components/Menubar/Item.js');
+require('../components/Menubar/SubItem.js');
+
+React.createContext(null);

package/dist/cjs/service/SnackbarSonner.js

@@ -31,13 +31,23 @@ require('../styles/groupButton.js');
 require('../styles/progressBar.js');
 require('../components/Select/GroupedOptions.js');
 require('../components/Select/context.js');
-require('../components/Select/Popover.js');
+require('../components/Popover/Context.js');
 require('../components/Select/Trigger.js');
 require('../components/Tag.js');
 require('../components/TextArea.js');
 require('../components/Toggle.js');
 require('../components/Tooltip.js');
-require('../components/Popover/PopoverContext.js');
+require('../provider/MenubarProvider.js');
+require('../provider/SnackbarProvider.js');
+require('../components/Menubar/Left.js');
+require('../styles/menubar.js');
+require('../components/Menubar/Right.js');
+require('../components/Menubar/Dropdown.js');
+require('../components/Menubar/MostUsed.js');
+require('../components/Menubar/MostUsedItem.js');
+require('../components/Menubar/Header.js');
+require('../components/Menubar/Item.js');
+require('../components/Menubar/SubItem.js');
 
 class SnackbarSonner {
   custom(Component, options) {

package/dist/cjs/styles/menubar.js

@@ -0,0 +1,62 @@
+'use strict';
+
+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]",
+    left: "flex items-center w-fit",
+    right: "flex items-center gap-x-deca",
+    dropdown: "w-full bg-white flex-1 pt-kilo pb-mega shadow-default px-[8vw] z-[100]"
+  }
+});
+const mostUsed = tailwindVariants.tv({
+  slots: {
+    container: "mb-kilo",
+    label: "font-bold mb-centi",
+    containerList: "gap-x-kilo flex flex-row"
+  }
+});
+const mostUsedItem = tailwindVariants.tv({
+  slots: {
+    container: "flex-1 py-mili",
+    title: "text-primary-medium font-bold",
+    category: "text-secondary-medium"
+  }
+});
+const item = tailwindVariants.tv({
+  slots: {
+    container: "flex flex-row gap-x-deca items-center",
+    text: "text-secondary-dark hover:text-primary-medium hover:cursor-pointer text-base",
+    icon: "text-primary-medium hover:cursor-pointer"
+  }
+});
+const category = tailwindVariants.tv({
+  slots: {
+    text: "mb-mili font-bold",
+    hr: "mb-mili",
+    container: "flex flex-col gap-y-mili"
+  }
+});
+const subItem = tailwindVariants.tv({
+  slots: {
+    container: "pl-deca text-sub border-l-[1px] border-primary-medium text-secondary-dark hover:text-primary-medium cursor-pointer"
+  }
+});
+const animate = tailwindVariants.tv({
+  base: "transition-all ease-in-out duration-250",
+  variants: {
+    show: {
+      true: "translate-y-0 opacity-1 visible",
+      false: "-translate-y-[120%] opacity-0 invisible"
+    }
+  }
+});
+
+exports.animate = animate;
+exports.category = category;
+exports.item = item;
+exports.menubar = menubar;
+exports.mostUsed = mostUsed;
+exports.mostUsedItem = mostUsedItem;
+exports.subItem = subItem;

package/dist/esm/components/Masonry.js

@@ -0,0 +1,47 @@
+import clsx from 'clsx';
+import React from '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()
+  );
+};
+
+export { Masonry as default };

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import Masonry from '../Masonry.js';
+
+const Categories = ({ children }) => {
+  return /* @__PURE__ */ React.createElement(Masonry, { columns: 4 }, children);
+};
+
+export { Categories as default };

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { category } from '../../styles/menubar.js';
+
+const Category = ({ title, options, render }) => {
+  const { text, hr, container } = 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))));
+};
+
+export { Category as default };

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { menubar, animate } from '../../styles/menubar.js';
+import clsx from 'clsx';
+import { useMenubar } from '../../provider/MenubarProvider.js';
+import '../../provider/SnackbarProvider.js';
+
+const { dropdown } = menubar();
+const Dropdown = ({ children, ...rest }) => {
+  const [show] = useMenubar();
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(dropdown(), animate({ show })),
+      "data-testid": "dropdown-menubar",
+      ...rest
+    },
+    children
+  );
+};
+
+export { Dropdown as default };

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

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

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

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

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { item } from '../../styles/menubar.js';
+import { IoCaretUpCircleOutline, IoCaretDownCircleOutline } from 'react-icons/io5';
+
+const { icon } = 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(IoCaretUpCircleOutline, { className: icon() }) : /* @__PURE__ */ React.createElement(IoCaretDownCircleOutline, { className: icon() }));
+};
+
+export { IconControlSubItem as default };

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

@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+import IconControlSubItem from './IconControlSubItem.js';
+import { item } from '../../styles/menubar.js';
+import ItemLink from './ItemLink.js';
+
+const { container, text } = item();
+const Item = ({
+  children,
+  subItems,
+  renderSubItems,
+  className,
+  href,
+  ...rest
+}) => {
+  const [showSubItem, setShowSubItem] = 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));
+};
+
+export { Item as default };

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

@@ -0,0 +1,16 @@
+import React from '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);
+};
+
+export { ItemLink as default };

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { menubar } from '../../styles/menubar.js';
+
+const { left } = menubar();
+const Left = ({ children, ...rest }) => {
+  return /* @__PURE__ */ React.createElement("div", { className: left(), "data-testid": "header-left-menubar", ...rest }, children);
+};
+
+export { Left as default };

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { mostUsed } from '../../styles/menubar.js';
+
+const { container, label: labelClass, containerList } = 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));
+};
+
+export { MostUsed as default };

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { mostUsedItem } from '../../styles/menubar.js';
+import { Card } from '../Card.js';
+import ItemLink from './ItemLink.js';
+
+const {
+  title: titleClass,
+  category: categoryClass,
+  container
+} = mostUsedItem();
+const MostUsedItem = ({
+  title,
+  category,
+  href,
+  ...rest
+}) => {
+  return /* @__PURE__ */ React.createElement(ItemLink, { href, classNameAnchor: "w-full" }, /* @__PURE__ */ React.createElement(
+    Card,
+    {
+      ...rest,
+      "data-testid": "most-used-item-menubar",
+      className: container()
+    },
+    /* @__PURE__ */ React.createElement("p", { className: titleClass() }, title),
+    /* @__PURE__ */ React.createElement("p", { className: categoryClass() }, category)
+  ));
+};
+
+export { MostUsedItem as default };

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

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

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { menubar } from '../../styles/menubar.js';
+
+const { right } = menubar();
+const Right = ({ children, ...rest }) => {
+  return /* @__PURE__ */ React.createElement("div", { className: right(), "data-testid": "header-right-menubar", ...rest }, children);
+};
+
+export { Right as default };

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

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

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

@@ -0,0 +1,19 @@
+import React 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 '../../provider/SnackbarProvider.js';
+
+const Search = (props) => {
+  const [show] = useMenubar();
+  return /* @__PURE__ */ React.createElement(
+    Input.Search,
+    {
+      ...props,
+      className: clsx("mr-tera flex-1", animate({ show }))
+    }
+  );
+};
+
+export { Search as default };

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { subItem } from '../../styles/menubar.js';
+import ItemLink from './ItemLink.js';
+
+const { container } = 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
+  ));
+};
+
+export { SubItem as default };