@quen-ui/components 0.0.14 → 1.0.0

package/dist/Layout/index.d.ts

@@ -3,7 +3,7 @@ import { default as Header } from './Header';
 import { default as Content } from './Content';
 import { default as Footer } from './Footer';
 import { default as Sidebar } from './Sidebar';
-import { ILayoutSidebarProps, ILayoutProps, ILayoutHeaderProps, ILayoutMenuItem } from './types';
+import { ILayoutSidebarProps, ILayoutProps, ILayoutHeaderProps } from './types';
 type TLayout = typeof LayoutComponent & {
     Header: typeof Header;
     Content: typeof Content;
@@ -11,4 +11,4 @@ type TLayout = typeof LayoutComponent & {
     Sidebar: typeof Sidebar;
 };
 declare const Layout: TLayout;
-export { Layout, ILayoutHeaderProps, ILayoutMenuItem, ILayoutProps, ILayoutSidebarProps };
+export { Layout, ILayoutHeaderProps, ILayoutProps, ILayoutSidebarProps };

package/dist/Layout/styles.cjs.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const styled = require("styled-components");
+const Menu = require("../Menu/Menu.cjs.js");
 const HeaderStyled = styled.styled.header.withConfig({
   shouldForwardProp: (prop) => prop !== "height"
 })`
@@ -9,7 +10,7 @@ const HeaderStyled = styled.styled.header.withConfig({
   padding-top: ${({ theme }) => theme.space.xs};
   padding-bottom: ${({ theme }) => theme.space.xs};
   svg {
-    color: ${({ theme }) => theme.colors.grayViolet["9"]};
+    color: ${({ theme }) => theme.components.Layout.iconColor};
   }
   position: sticky;
   top: 0;
@@ -18,65 +19,26 @@ const HeaderStyled = styled.styled.header.withConfig({
   display: flex;
   flex-wrap: wrap;
 
-  background: ${({ theme }) => theme.colors.grayViolet["1"]};
+  background: ${({ theme }) => theme.components.Layout.headerBackground};
 
   border-bottom: ${({ theme }) => theme.control.borderWidth} solid
-    ${({ theme }) => theme.colors.gray["2"]};
+    ${({ theme }) => theme.components.Layout.borderColor};
 
   ${({ height }) => `height: ${height};`};
-`;
-const LayoutMenuItem = styled.styled.button.withConfig({
-  shouldForwardProp: (prop) => !["disabled", "active"].includes(prop)
-}).attrs((props) => ({
-  className: props.active ? "quen-ui__layout-menu-item--active" : "quen-ui__layout-menu-item"
-}))`
-  outline: none;
-  border: none;
-  display: flex;
-  align-items: center;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  border-radius: 4px;
-  transition: background 0.2s ease;
-  background: transparent;
-  justify-content: ${({ collapsed }) => collapsed ? "center" : "flex-start"};
-
-  color: ${({ theme }) => theme.textColor};
-
-  a {
-    text-decoration: none;
-    color: ${({ theme }) => theme.textColor};
-    display: flex;
-    width: 100%;
-  }
-
-  .menu-label {
-    width: 100%;
-  }
-
-  &:hover {
-    background: ${({ theme, disabled, active }) => !disabled && !active && theme.colors.grayViolet["5"]};
+  
+  .quen-ui__layout-header__content__menu-items {
+    flex-wrap: wrap;
   }
-
-  ${({ theme, disabled, active }) => active && !disabled && styled.css`
-      background-color: ${theme.colors.violet["5"]};
-    `}
-`;
-const SidebarMenuItem = styled.styled(LayoutMenuItem)`
-  a {
-    color: inherit;
-  }
-
 `;
 const FooterStyled = styled.styled.footer`
   grid-area: footer;
 `;
-const SliderStyled = styled.styled.aside.withConfig({
+const SidebarStyled = styled.styled.aside.withConfig({
   shouldForwardProp: (prop) => !["isMobile", "isOpen", "isCollapsed", "collapsedWidth"].includes(prop)
 })`
   grid-area: slider;
   min-width: ${({ collapsible, collapsed, collapsedWidth }) => collapsible && collapsed ? collapsedWidth : "250px"};
-  background: ${({ theme }) => theme.colors.grayViolet["2"]};
+  background: ${({ theme }) => theme.components.Layout.sidebarBackground};
   transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   overflow: auto;
@@ -118,7 +80,7 @@ const LayoutStyled = styled.styled.div.withConfig({
     grid-template-areas: "header" "content" "footer";
     grid-template-columns: 1fr;
 
-    ${SliderStyled} {
+    ${SidebarStyled} {
       display: none;
     }
   }
@@ -135,16 +97,18 @@ styled.styled.div`
   left: 0;
   right: 0;
   bottom: 0;
-  background: ${({ theme }) => theme.colors.grayViolet["2"]};
+  background: ${({ theme }) => theme.components.Layout.sidebarBackground};
   z-index: 100;
   opacity: 1;
   pointer-events: all;
   transition: opacity 0.3s ease;
 `;
+const SidebarMenuStyled = styled.styled(Menu)`
+  gap: 0;
+`;
 exports.ContentStyled = ContentStyled;
 exports.FooterStyled = FooterStyled;
 exports.HeaderStyled = HeaderStyled;
-exports.LayoutMenuItem = LayoutMenuItem;
 exports.LayoutStyled = LayoutStyled;
-exports.SidebarMenuItem = SidebarMenuItem;
-exports.SliderStyled = SliderStyled;
+exports.SidebarMenuStyled = SidebarMenuStyled;
+exports.SidebarStyled = SidebarStyled;

package/dist/Layout/styles.d.ts

@@ -1,24 +1,10 @@
 export declare const HeaderStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, {
     height?: string;
 }>> & string;
-export declare const LayoutMenuItem: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components/dist/types').Substitute<import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, {
-    active?: boolean;
-}>, {
-    disabled?: boolean;
-    active?: boolean;
-    collapsed?: boolean;
-}>> & string;
-export declare const SidebarMenuItem: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('styled-components/dist/types').Substitute<import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, {
-    active?: boolean;
-}>, "disabled" | "active" | "collapsed"> & {
-    disabled?: boolean;
-    active?: boolean;
-    collapsed?: boolean;
-}, never>> & string;
 export declare const FooterStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, {
     height?: string;
 }>> & string;
-export declare const SliderStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, {
+export declare const SidebarStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, {
     mobile?: boolean;
     open?: boolean;
     collapsible?: boolean;
@@ -30,3 +16,4 @@ export declare const LayoutStyled: import('styled-components/dist/types').IStyle
     breakpoint: number;
 }>> & string;
 export declare const OverlayStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SidebarMenuStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('..').IMenuProps<Record<string, any>>, never>> & string & Omit<(<Item extends Record<string, any> = import('..').IMenuDefaultItem>(props: import('..').IMenuProps<Item>) => import("react/jsx-runtime").JSX.Element), keyof import('react').Component<any, {}, any>>;

package/dist/Layout/styles.es.js

@@ -1,4 +1,5 @@
 import { styled, css } from "styled-components";
+import Menu from "../Menu/Menu.es.js";
 const HeaderStyled = styled.header.withConfig({
   shouldForwardProp: (prop) => prop !== "height"
 })`
@@ -7,7 +8,7 @@ const HeaderStyled = styled.header.withConfig({
   padding-top: ${({ theme }) => theme.space.xs};
   padding-bottom: ${({ theme }) => theme.space.xs};
   svg {
-    color: ${({ theme }) => theme.colors.grayViolet["9"]};
+    color: ${({ theme }) => theme.components.Layout.iconColor};
   }
   position: sticky;
   top: 0;
@@ -16,65 +17,26 @@ const HeaderStyled = styled.header.withConfig({
   display: flex;
   flex-wrap: wrap;
 
-  background: ${({ theme }) => theme.colors.grayViolet["1"]};
+  background: ${({ theme }) => theme.components.Layout.headerBackground};
 
   border-bottom: ${({ theme }) => theme.control.borderWidth} solid
-    ${({ theme }) => theme.colors.gray["2"]};
+    ${({ theme }) => theme.components.Layout.borderColor};
 
   ${({ height }) => `height: ${height};`};
-`;
-const LayoutMenuItem = styled.button.withConfig({
-  shouldForwardProp: (prop) => !["disabled", "active"].includes(prop)
-}).attrs((props) => ({
-  className: props.active ? "quen-ui__layout-menu-item--active" : "quen-ui__layout-menu-item"
-}))`
-  outline: none;
-  border: none;
-  display: flex;
-  align-items: center;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  border-radius: 4px;
-  transition: background 0.2s ease;
-  background: transparent;
-  justify-content: ${({ collapsed }) => collapsed ? "center" : "flex-start"};
-
-  color: ${({ theme }) => theme.textColor};
-
-  a {
-    text-decoration: none;
-    color: ${({ theme }) => theme.textColor};
-    display: flex;
-    width: 100%;
-  }
-
-  .menu-label {
-    width: 100%;
-  }
-
-  &:hover {
-    background: ${({ theme, disabled, active }) => !disabled && !active && theme.colors.grayViolet["5"]};
+  
+  .quen-ui__layout-header__content__menu-items {
+    flex-wrap: wrap;
   }
-
-  ${({ theme, disabled, active }) => active && !disabled && css`
-      background-color: ${theme.colors.violet["5"]};
-    `}
-`;
-const SidebarMenuItem = styled(LayoutMenuItem)`
-  a {
-    color: inherit;
-  }
-
 `;
 const FooterStyled = styled.footer`
   grid-area: footer;
 `;
-const SliderStyled = styled.aside.withConfig({
+const SidebarStyled = styled.aside.withConfig({
   shouldForwardProp: (prop) => !["isMobile", "isOpen", "isCollapsed", "collapsedWidth"].includes(prop)
 })`
   grid-area: slider;
   min-width: ${({ collapsible, collapsed, collapsedWidth }) => collapsible && collapsed ? collapsedWidth : "250px"};
-  background: ${({ theme }) => theme.colors.grayViolet["2"]};
+  background: ${({ theme }) => theme.components.Layout.sidebarBackground};
   transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   overflow: auto;
@@ -116,7 +78,7 @@ const LayoutStyled = styled.div.withConfig({
     grid-template-areas: "header" "content" "footer";
     grid-template-columns: 1fr;
 
-    ${SliderStyled} {
+    ${SidebarStyled} {
       display: none;
     }
   }
@@ -133,18 +95,20 @@ styled.div`
   left: 0;
   right: 0;
   bottom: 0;
-  background: ${({ theme }) => theme.colors.grayViolet["2"]};
+  background: ${({ theme }) => theme.components.Layout.sidebarBackground};
   z-index: 100;
   opacity: 1;
   pointer-events: all;
   transition: opacity 0.3s ease;
 `;
+const SidebarMenuStyled = styled(Menu)`
+  gap: 0;
+`;
 export {
   ContentStyled,
   FooterStyled,
   HeaderStyled,
-  LayoutMenuItem,
   LayoutStyled,
-  SidebarMenuItem,
-  SliderStyled
+  SidebarMenuStyled,
+  SidebarStyled
 };

package/dist/Layout/types.d.ts

@@ -1,20 +1,5 @@
 import { default as React } from 'react';
-export interface ILayoutMenuItem {
-    /** Unique item identifier */
-    key: string;
-    /** Icon displayed before label */
-    icon?: React.ReactNode;
-    /** Menu item content */
-    label: React.ReactNode;
-    /** Click handler */
-    onClick?: () => void;
-    /** Visual active state (highlighting) */
-    active?: boolean;
-    /** Disables interaction */
-    disabled?: boolean;
-    /** Custom CSS classes */
-    className?: string;
-}
+import { IMenuDefaultItem } from '../Menu';
 export interface ILayoutContextProps {
     /** Mobile layout detection (based on breakpoint) */
     mobile: boolean;
@@ -35,13 +20,12 @@ export interface ILayoutHeaderProps {
     /** Header height */
     height?: string;
     /** Navigation menu items */
-    menuItems?: ILayoutMenuItem[];
-    /**	Custom menu item renderer (overrides default) */
-    renderMenuItem?: (item: ILayoutMenuItem) => React.ReactNode;
+    menuItems?: IMenuDefaultItem[];
     /** Brand logo/content */
     logo?: React.ReactNode;
     /** Custom CSS classes for menu item */
     classNameMenuItem?: string;
+    activeMenuKeys?: string[];
 }
 export interface ILayoutProps {
     /**	Viewport width (px) for mobile/desktop switch */
@@ -57,11 +41,12 @@ export interface ILayoutSidebarProps {
     /** Custom CSS classes */
     className?: string;
     /** Navigation items in sidebar */
-    menuItems?: ILayoutMenuItem[];
-    /** Custom menu item renderer */
-    renderMenuItem?: (item: ILayoutMenuItem) => React.ReactNode;
+    menuItems?: IMenuDefaultItem[];
     /** Title menu in mobile version */
     titleDrawer?: string;
+    /** Custom CSS classes for menu item */
+    classNameMenuItem?: string;
+    activeMenuKeys?: string[];
 }
 export interface ILayoutFooterProps {
     /** Content */

package/dist/Loader/styles.cjs.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const styled = require("styled-components");
+const polished = require("polished");
 const BarsLoaderStyled = styled.div.withConfig({
   shouldForwardProp: (prop) => prop !== "height"
 })`
@@ -13,7 +14,7 @@ const BarsLoaderStyled = styled.div.withConfig({
   .bar {
     width: 10px;
     height: 30px;
-    background-color: ${({ theme }) => theme.colors.violet[5]};
+    background-color: ${({ theme }) => theme.components.Loader.color};
     margin: 0 5px;
     animation: bar-animation 1.4s infinite ease-in-out;
   }
@@ -42,8 +43,8 @@ const OvalLoaderStyled = styled.div.withConfig({
 })`
   width: ${({ height }) => height}rem;
   height: ${({ height }) => height}rem;
-  border: 5px solid ${({ theme }) => theme.colors.grayViolet[5]};
-  border-top: 5px solid ${({ theme }) => theme.colors.violet[5]};
+  border: 5px solid ${({ theme }) => polished.rgba(theme.components.Loader.color, 0.3)};
+  border-top: 5px solid ${({ theme }) => theme.components.Loader.color};
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }
@@ -68,7 +69,7 @@ const DotsLoaderStyled = styled.div.withConfig({
   .dot {
     width: ${({ height }) => height / 2}rem;
     height: ${({ height }) => height / 2}rem;
-    background-color: ${({ theme }) => theme.colors.violet[5]};
+    background-color: ${({ theme }) => theme.components.Loader.color};
     border-radius: 50%;
     margin: 0 5px;
     animation: dot-animation 1.4s infinite ease-in-out;

package/dist/Loader/styles.es.js

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { rgba } from "polished";
 const BarsLoaderStyled = styled.div.withConfig({
   shouldForwardProp: (prop) => prop !== "height"
 })`
@@ -11,7 +12,7 @@ const BarsLoaderStyled = styled.div.withConfig({
   .bar {
     width: 10px;
     height: 30px;
-    background-color: ${({ theme }) => theme.colors.violet[5]};
+    background-color: ${({ theme }) => theme.components.Loader.color};
     margin: 0 5px;
     animation: bar-animation 1.4s infinite ease-in-out;
   }
@@ -40,8 +41,8 @@ const OvalLoaderStyled = styled.div.withConfig({
 })`
   width: ${({ height }) => height}rem;
   height: ${({ height }) => height}rem;
-  border: 5px solid ${({ theme }) => theme.colors.grayViolet[5]};
-  border-top: 5px solid ${({ theme }) => theme.colors.violet[5]};
+  border: 5px solid ${({ theme }) => rgba(theme.components.Loader.color, 0.3)};
+  border-top: 5px solid ${({ theme }) => theme.components.Loader.color};
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }
@@ -66,7 +67,7 @@ const DotsLoaderStyled = styled.div.withConfig({
   .dot {
     width: ${({ height }) => height / 2}rem;
     height: ${({ height }) => height / 2}rem;
-    background-color: ${({ theme }) => theme.colors.violet[5]};
+    background-color: ${({ theme }) => theme.components.Loader.color};
     border-radius: 50%;
     margin: 0 5px;
     animation: dot-animation 1.4s infinite ease-in-out;

package/dist/LoadingOverlay/LoadingOverlay.cjs.js

@@ -0,0 +1,22 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("./styles.cjs.js");
+const Loader = require("../Loader/Loader.cjs.js");
+const Text = require("../typography/Text/Text.cjs.js");
+const LoadingOverlay = ({
+  children,
+  loading,
+  backdrop = true,
+  label,
+  loaderVariant,
+  zIndex = 1e3
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(styles.LoadingOverlayWrapper, { children: [
+    children,
+    loading && /* @__PURE__ */ jsxRuntime.jsxs(styles.LoadingOverlayStyled, { backdrop, zIndex, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Loader, { view: loaderVariant, size: "l" }),
+      label && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "s", children: label })
+    ] })
+  ] });
+};
+module.exports = LoadingOverlay;

package/dist/LoadingOverlay/LoadingOverlay.d.ts

@@ -0,0 +1,3 @@
+import { ILoadingOverlayProps } from './types';
+declare const LoadingOverlay: ({ children, loading, backdrop, label, loaderVariant, zIndex }: ILoadingOverlayProps) => import("react/jsx-runtime").JSX.Element;
+export default LoadingOverlay;

package/dist/LoadingOverlay/LoadingOverlay.es.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { LoadingOverlayWrapper, LoadingOverlayStyled } from "./styles.es.js";
+import Loader from "../Loader/Loader.es.js";
+import Text from "../typography/Text/Text.es.js";
+const LoadingOverlay = ({
+  children,
+  loading,
+  backdrop = true,
+  label,
+  loaderVariant,
+  zIndex = 1e3
+}) => {
+  return /* @__PURE__ */ jsxs(LoadingOverlayWrapper, { children: [
+    children,
+    loading && /* @__PURE__ */ jsxs(LoadingOverlayStyled, { backdrop, zIndex, children: [
+      /* @__PURE__ */ jsx(Loader, { view: loaderVariant, size: "l" }),
+      label && /* @__PURE__ */ jsx(Text, { size: "s", children: label })
+    ] })
+  ] });
+};
+export {
+  LoadingOverlay as default
+};

package/dist/LoadingOverlay/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LoadingOverlay } from './LoadingOverlay';
+export type { ILoadingOverlayProps } from './types';

package/dist/LoadingOverlay/styles.cjs.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const LoadingOverlayWrapper = styled.div`
+  position: relative;
+`;
+const fadeIn = styled.keyframes`
+from { opacity: 0; }
+to { opacity: 1; }
+`;
+const LoadingOverlayStyled = styled.div`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: ${({ zIndex }) => zIndex};
+  pointer-events: all;
+  animation: ${fadeIn} 0.2s ease;
+
+  ${({ backdrop, theme }) => backdrop && styled.css`
+      background: ${theme.components.LoadingOverlay.background};
+      backdrop-filter: ${theme.components.LoadingOverlay.blur};
+    `}
+`;
+exports.LoadingOverlayStyled = LoadingOverlayStyled;
+exports.LoadingOverlayWrapper = LoadingOverlayWrapper;

package/dist/LoadingOverlay/styles.d.ts

@@ -0,0 +1,5 @@
+export declare const LoadingOverlayWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LoadingOverlayStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    backdrop?: boolean;
+    zIndex: number;
+}>> & string;

package/dist/LoadingOverlay/styles.es.js

@@ -0,0 +1,28 @@
+import styled, { keyframes, css } from "styled-components";
+const LoadingOverlayWrapper = styled.div`
+  position: relative;
+`;
+const fadeIn = keyframes`
+from { opacity: 0; }
+to { opacity: 1; }
+`;
+const LoadingOverlayStyled = styled.div`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: ${({ zIndex }) => zIndex};
+  pointer-events: all;
+  animation: ${fadeIn} 0.2s ease;
+
+  ${({ backdrop, theme }) => backdrop && css`
+      background: ${theme.components.LoadingOverlay.background};
+      backdrop-filter: ${theme.components.LoadingOverlay.blur};
+    `}
+`;
+export {
+  LoadingOverlayStyled,
+  LoadingOverlayWrapper
+};

package/dist/LoadingOverlay/types.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { ILoaderProps } from '../Loader';
+export interface ILoadingOverlayProps {
+    /** Whether to show overlay */
+    loading?: boolean;
+    /** Text under the spinner */
+    label?: string;
+    /** Should I darken the background */
+    backdrop?: boolean;
+    /** Control rendering via children */
+    children?: ReactNode;
+    /** Visual style of the loading indicator */
+    loaderVariant?: ILoaderProps["view"];
+    /** Controls overlay */
+    zIndex?: number;
+}

package/dist/Menu/Menu.cjs.js

@@ -0,0 +1,42 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const helpers = require("./helpers.cjs.js");
+const MenuItem = require("./MenuItem.cjs.js");
+const styles = require("./styles.cjs.js");
+const Menu = (props) => {
+  const direction = React.useMemo(() => {
+    return props.direction === "vertical" ? "column" : "row";
+  }, [props.direction]);
+  const {
+    items,
+    getItemRightContent,
+    getItemDisabled,
+    getItemLeftContent,
+    getItemKey,
+    getItemLabel,
+    getItemClassName,
+    className,
+    getItemOnClick,
+    style
+  } = helpers.withDefaultGetters(props);
+  return /* @__PURE__ */ jsxRuntime.jsx(styles.MenuStyled, { gap: "xs", direction, className, style, children: (items ?? []).map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+    MenuItem,
+    {
+      className: props.classNameMenuItem,
+      item,
+      getItemKey,
+      getItemLabel,
+      getItemOnClick,
+      getItemDisabled,
+      getItemClassName,
+      getItemLeftContent,
+      getItemRightContent,
+      size: props.size,
+      activeKeys: props.activeKeys,
+      direction: props.direction || "horizontal"
+    },
+    getItemKey(item)
+  )) });
+};
+module.exports = Menu;

package/dist/Menu/Menu.d.ts

@@ -0,0 +1,3 @@
+import { IMenuProps, IMenuDefaultItem } from './types';
+declare const Menu: <Item extends Record<string, any> = IMenuDefaultItem>(props: IMenuProps<Item>) => import("react/jsx-runtime").JSX.Element;
+export default Menu;

package/dist/Menu/Menu.es.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { withDefaultGetters } from "./helpers.es.js";
+import MenuItem from "./MenuItem.es.js";
+import { MenuStyled } from "./styles.es.js";
+const Menu = (props) => {
+  const direction = useMemo(() => {
+    return props.direction === "vertical" ? "column" : "row";
+  }, [props.direction]);
+  const {
+    items,
+    getItemRightContent,
+    getItemDisabled,
+    getItemLeftContent,
+    getItemKey,
+    getItemLabel,
+    getItemClassName,
+    className,
+    getItemOnClick,
+    style
+  } = withDefaultGetters(props);
+  return /* @__PURE__ */ jsx(MenuStyled, { gap: "xs", direction, className, style, children: (items ?? []).map((item) => /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      className: props.classNameMenuItem,
+      item,
+      getItemKey,
+      getItemLabel,
+      getItemOnClick,
+      getItemDisabled,
+      getItemClassName,
+      getItemLeftContent,
+      getItemRightContent,
+      size: props.size,
+      activeKeys: props.activeKeys,
+      direction: props.direction || "horizontal"
+    },
+    getItemKey(item)
+  )) });
+};
+export {
+  Menu as default
+};