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

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 = ({ children, ...rest }) => {
+  const { dropdown } = menubar();
+  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: "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 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 '../Select/Popover.js';
+import '../Select/Trigger.js';
+import '../Tag.js';
+import '../TextArea.js';
+import '../Toggle.js';
+import '../Tooltip.js';
+import '../Popover/PopoverContext.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(React.Fragment, null);
+    return /* @__PURE__ */ React.createElement(
+      Menubar.MostUsedItem,
+      {
+        key: title,
+        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 };

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

@@ -0,0 +1,31 @@
+import Root from './Root.js';
+import Left from './Left.js';
+import Search from './Search.js';
+import Right from './Right.js';
+import Dropdown from './Dropdown.js';
+import MostUsed from './MostUsed.js';
+import MostUsedItem from './MostUsedItem.js';
+import Header from './Header.js';
+import Category from './Category.js';
+import Item from './Item.js';
+import Categories from './Categories.js';
+import SubItem from './SubItem.js';
+import DropdownRoot from './DropdownRoot.js';
+
+const Menubar = {
+  Root,
+  Header,
+  HeaderLeft: Left,
+  Search,
+  HeaderRight: Right,
+  Dropdown,
+  MostUsed,
+  MostUsedItem,
+  Category,
+  Categories,
+  Item,
+  SubItem,
+  DropdownRoot
+};
+
+export { Menubar };

package/dist/esm/index.js

@@ -24,6 +24,7 @@ export { TimeFieldInput } from './components/TimeFieldInput.js';
 export { Toggle } from './components/Toggle.js';
 import './components/Tooltip.js';
 export { Popover } from './components/Popover/Popover.js';
+export { Menubar } from './components/Menubar/index.js';
 export { useCalendar } from './hooks/useCalendar.js';
 export { useCalendarCell } from './hooks/useCalendarCell.js';
 export { useCalendarGrid } from './hooks/useCalendarGrid.js';

package/dist/esm/provider/MenubarProvider.js

@@ -0,0 +1,19 @@
+import React, { createContext, useContext } from 'react';
+
+const MenubarContext = 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 = useContext(MenubarContext);
+  if (!context) {
+    throw new Error("useSnackbar must be used within a SnackbarProvider");
+  }
+  return [context.show, context.setShow];
+};
+
+export { MenubarProvider, useMenubar };

package/dist/esm/provider/SnackbarProvider.js

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

package/dist/esm/service/SnackbarSonner.js

@@ -36,6 +36,16 @@ import '../components/TextArea.js';
 import '../components/Toggle.js';
 import '../components/Tooltip.js';
 import '../components/Popover/PopoverContext.js';
+import '../provider/MenubarProvider.js';
+import '../provider/SnackbarProvider.js';
+import '../components/Menubar/Left.js';
+import '../styles/menubar.js';
+import '../components/Menubar/Right.js';
+import '../components/Menubar/MostUsed.js';
+import '../components/Menubar/MostUsedItem.js';
+import '../components/Menubar/Header.js';
+import '../components/Menubar/Item.js';
+import '../components/Menubar/SubItem.js';
 
 class SnackbarSonner {
   custom(Component, options) {

package/dist/esm/styles/menubar.js

@@ -0,0 +1,54 @@
+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]",
+    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 = tv({
+  slots: {
+    container: "mb-kilo",
+    label: "font-bold mb-centi",
+    containerList: "gap-x-kilo flex flex-row"
+  }
+});
+const mostUsedItem = tv({
+  slots: {
+    container: "flex-1 py-mili",
+    title: "text-primary-medium font-bold",
+    category: "text-secondary-medium"
+  }
+});
+const item = 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 = tv({
+  slots: {
+    text: "mb-mili font-bold",
+    hr: "mb-mili",
+    container: "flex flex-col gap-y-mili"
+  }
+});
+const subItem = tv({
+  slots: {
+    container: "pl-deca text-sub border-l-[1px] border-primary-medium text-secondary-dark hover:text-primary-medium cursor-pointer"
+  }
+});
+const animate = 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"
+    }
+  }
+});
+
+export { animate, category, item, menubar, mostUsed, mostUsedItem, subItem };

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

@@ -1,6 +1,5 @@
-import React from 'react';
-interface CardProps {
+import React, { HTMLAttributes } from 'react';
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
 }
-export declare const Card: React.ForwardRefExoticComponent<Omit<CardProps & React.HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export {};
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface MasonryProps {
+    columns: number;
+    children?: ReactNode;
+}
+declare const Masonry: ({ children, columns }: MasonryProps) => JSX.Element;
+export default Masonry;

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

@@ -0,0 +1,3 @@
+import { DefaultProps } from './interface';
+declare const Categories: ({ children }: DefaultProps) => JSX.Element;
+export default Categories;

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

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

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

@@ -0,0 +1,3 @@
+import { DefaultProps } from './interface';
+declare const Dropdown: ({ children, ...rest }: DefaultProps) => JSX.Element;
+export default Dropdown;

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+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;
+export default Item;

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

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

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

@@ -0,0 +1,3 @@
+import { DefaultProps } from './interface';
+declare const Left: ({ children, ...rest }: DefaultProps) => JSX.Element;
+export default Left;

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

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

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

@@ -0,0 +1,8 @@
+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;
+export default MostUsedItem;

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

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

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

@@ -0,0 +1,3 @@
+import { DefaultProps } from './interface';
+declare const Right: ({ children, ...rest }: DefaultProps) => JSX.Element;
+export default Right;