@quen-ui/components 0.0.14

package/dist/Layout/Footer.es.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { FooterStyled } from "./styles.es.js";
+const Footer = ({ children }) => {
+  return /* @__PURE__ */ jsx(FooterStyled, { children });
+};
+export {
+  Footer as default
+};

package/dist/Layout/Header.cjs.js

@@ -0,0 +1,47 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("./styles.cjs.js");
+const Layout = require("./Layout.cjs.js");
+const Flex = require("../Flex/Flex.cjs.js");
+const Button = require("../Button/Button.cjs.js");
+const iconLines = require("../assets/icon-lines.svg.cjs.js");
+const iconClose = require("../assets/icon-close.svg.cjs.js");
+const Header = ({
+  children,
+  className,
+  style,
+  height,
+  menuItems,
+  renderMenuItem,
+  logo,
+  classNameMenuItem
+}) => {
+  const { mobile, toggleSidebar, sidebarOpen } = Layout.useLayout();
+  const defaultRenderMenuItem = (item) => /* @__PURE__ */ jsxRuntime.jsxs(
+    styles.LayoutMenuItem,
+    {
+      className: classNameMenuItem,
+      onClick: item.onClick,
+      active: item.active,
+      disabled: item.disabled,
+      children: [
+        item.icon,
+        item.label
+      ]
+    },
+    item.key
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(styles.HeaderStyled, { className, style, height, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: "s", align: "center", children: [
+      mobile && /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: toggleSidebar, children: sidebarOpen ? /* @__PURE__ */ jsxRuntime.jsx(iconClose, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconLines, {}) }),
+      logo
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", justify: "space-between", className: "quen-ui__layout-header__content", wrap: "wrap", children: [
+      menuItems && /* @__PURE__ */ jsxRuntime.jsx(Flex, { gap: "xs", children: menuItems.map(
+        (item) => renderMenuItem ? /* @__PURE__ */ jsxRuntime.jsx(styles.LayoutMenuItem, { className: classNameMenuItem, children: renderMenuItem(item) }, item.key) : defaultRenderMenuItem(item)
+      ) }),
+      children
+    ] })
+  ] });
+};
+module.exports = Header;

package/dist/Layout/Header.d.ts

@@ -0,0 +1,4 @@
+import { default as React, PropsWithChildren } from 'react';
+import { ILayoutHeaderProps } from './types';
+declare const Header: ({ children, className, style, height, menuItems, renderMenuItem, logo, classNameMenuItem }: PropsWithChildren<ILayoutHeaderProps>) => React.ReactNode;
+export default Header;

package/dist/Layout/Header.es.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { HeaderStyled, LayoutMenuItem } from "./styles.es.js";
+import { useLayout } from "./Layout.es.js";
+import Flex from "../Flex/Flex.es.js";
+import Button from "../Button/Button.es.js";
+import SvgIconLines from "../assets/icon-lines.svg.es.js";
+import SvgIconClose from "../assets/icon-close.svg.es.js";
+const Header = ({
+  children,
+  className,
+  style,
+  height,
+  menuItems,
+  renderMenuItem,
+  logo,
+  classNameMenuItem
+}) => {
+  const { mobile, toggleSidebar, sidebarOpen } = useLayout();
+  const defaultRenderMenuItem = (item) => /* @__PURE__ */ jsxs(
+    LayoutMenuItem,
+    {
+      className: classNameMenuItem,
+      onClick: item.onClick,
+      active: item.active,
+      disabled: item.disabled,
+      children: [
+        item.icon,
+        item.label
+      ]
+    },
+    item.key
+  );
+  return /* @__PURE__ */ jsxs(HeaderStyled, { className, style, height, children: [
+    /* @__PURE__ */ jsxs(Flex, { gap: "s", align: "center", children: [
+      mobile && /* @__PURE__ */ jsx(Button, { onClick: toggleSidebar, children: sidebarOpen ? /* @__PURE__ */ jsx(SvgIconClose, {}) : /* @__PURE__ */ jsx(SvgIconLines, {}) }),
+      logo
+    ] }),
+    /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "space-between", className: "quen-ui__layout-header__content", wrap: "wrap", children: [
+      menuItems && /* @__PURE__ */ jsx(Flex, { gap: "xs", children: menuItems.map(
+        (item) => renderMenuItem ? /* @__PURE__ */ jsx(LayoutMenuItem, { className: classNameMenuItem, children: renderMenuItem(item) }, item.key) : defaultRenderMenuItem(item)
+      ) }),
+      children
+    ] })
+  ] });
+};
+export {
+  Header as default
+};

package/dist/Layout/Layout.cjs.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const styles = require("./styles.cjs.js");
+const LayoutContext = React.createContext(null);
+const Layout = ({
+  children,
+  breakpoint = 768
+}) => {
+  const [mobile, setMobile] = React.useState(false);
+  const [sidebarOpen, setSidebarOpen] = React.useState(false);
+  const [sliderCollapsed, setSliderCollapsed] = React.useState(false);
+  React.useEffect(() => {
+    const checkScreenSize = () => {
+      setMobile(window.innerWidth <= breakpoint);
+      if (window.innerWidth > breakpoint) {
+        setSidebarOpen(false);
+      }
+    };
+    checkScreenSize();
+    window.addEventListener("resize", checkScreenSize);
+    return () => window.removeEventListener("resize", checkScreenSize);
+  }, [breakpoint]);
+  const toggleSidebar = () => setSidebarOpen(!sidebarOpen);
+  const toggleSliderCollapse = () => setSliderCollapsed(!sliderCollapsed);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    LayoutContext.Provider,
+    {
+      value: {
+        mobile,
+        sidebarOpen,
+        sliderCollapsed,
+        toggleSidebar,
+        toggleSliderCollapse
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(styles.LayoutStyled, { breakpoint, children })
+    }
+  );
+};
+const useLayout = () => {
+  const context = React.useContext(LayoutContext);
+  if (!context) {
+    throw new Error("useLayout must be used within a LayoutProvider");
+  }
+  return context;
+};
+exports.default = Layout;
+exports.useLayout = useLayout;

package/dist/Layout/Layout.d.ts

@@ -0,0 +1,5 @@
+import { default as React, PropsWithChildren } from 'react';
+import { ILayoutProps, ILayoutContextProps } from './types';
+declare const Layout: ({ children, breakpoint }: PropsWithChildren<ILayoutProps>) => React.ReactNode;
+export declare const useLayout: () => ILayoutContextProps;
+export default Layout;

package/dist/Layout/Layout.es.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useState, useEffect, useContext } from "react";
+import { LayoutStyled } from "./styles.es.js";
+const LayoutContext = createContext(null);
+const Layout = ({
+  children,
+  breakpoint = 768
+}) => {
+  const [mobile, setMobile] = useState(false);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [sliderCollapsed, setSliderCollapsed] = useState(false);
+  useEffect(() => {
+    const checkScreenSize = () => {
+      setMobile(window.innerWidth <= breakpoint);
+      if (window.innerWidth > breakpoint) {
+        setSidebarOpen(false);
+      }
+    };
+    checkScreenSize();
+    window.addEventListener("resize", checkScreenSize);
+    return () => window.removeEventListener("resize", checkScreenSize);
+  }, [breakpoint]);
+  const toggleSidebar = () => setSidebarOpen(!sidebarOpen);
+  const toggleSliderCollapse = () => setSliderCollapsed(!sliderCollapsed);
+  return /* @__PURE__ */ jsx(
+    LayoutContext.Provider,
+    {
+      value: {
+        mobile,
+        sidebarOpen,
+        sliderCollapsed,
+        toggleSidebar,
+        toggleSliderCollapse
+      },
+      children: /* @__PURE__ */ jsx(LayoutStyled, { breakpoint, children })
+    }
+  );
+};
+const useLayout = () => {
+  const context = useContext(LayoutContext);
+  if (!context) {
+    throw new Error("useLayout must be used within a LayoutProvider");
+  }
+  return context;
+};
+export {
+  Layout as default,
+  useLayout
+};

package/dist/Layout/Sidebar.cjs.js

@@ -0,0 +1,57 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("./styles.cjs.js");
+const Flex = require("../Flex/Flex.cjs.js");
+const Text = require("../typography/Text/Text.cjs.js");
+const Layout = require("./Layout.cjs.js");
+const Drawer = require("../Drawer/Drawer.cjs.js");
+const Sidebar = ({
+  children,
+  collapsed,
+  menuItems,
+  renderMenuItem,
+  collapsible,
+  collapsedWidth,
+  className,
+  titleDrawer
+}) => {
+  const { mobile, toggleSidebar, sidebarOpen } = Layout.useLayout();
+  const defaultRenderMenuItem = (item) => /* @__PURE__ */ jsxRuntime.jsxs(
+    styles.SidebarMenuItem,
+    {
+      onClick: item.onClick,
+      active: item.active,
+      collapsed,
+      disabled: item.disabled,
+      children: [
+        item.icon,
+        !collapsed && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", className: "menu-label", children: item.label })
+      ]
+    },
+    item.key
+  );
+  if (mobile) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Drawer, { open: sidebarOpen, onClose: toggleSidebar, title: titleDrawer, children: [
+      children,
+      menuItems && /* @__PURE__ */ jsxRuntime.jsx(Flex, { direction: "column", children: menuItems.map(
+        (item) => renderMenuItem ? renderMenuItem(item) : defaultRenderMenuItem(item)
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    styles.SliderStyled,
+    {
+      collapsed,
+      collapsible,
+      className,
+      collapsedWidth,
+      children: [
+        children,
+        menuItems && /* @__PURE__ */ jsxRuntime.jsx(Flex, { direction: "column", children: menuItems.map(
+          (item) => renderMenuItem ? renderMenuItem(item) : defaultRenderMenuItem(item)
+        ) })
+      ]
+    }
+  );
+};
+module.exports = Sidebar;

package/dist/Layout/Sidebar.d.ts

@@ -0,0 +1,4 @@
+import { default as React, PropsWithChildren } from 'react';
+import { ILayoutSidebarProps } from './types';
+declare const Sidebar: ({ children, collapsed, menuItems, renderMenuItem, collapsible, collapsedWidth, className, titleDrawer }: PropsWithChildren<ILayoutSidebarProps>) => React.ReactElement;
+export default Sidebar;

package/dist/Layout/Sidebar.es.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { SliderStyled, SidebarMenuItem } from "./styles.es.js";
+import Flex from "../Flex/Flex.es.js";
+import Text from "../typography/Text/Text.es.js";
+import { useLayout } from "./Layout.es.js";
+import Drawer from "../Drawer/Drawer.es.js";
+const Sidebar = ({
+  children,
+  collapsed,
+  menuItems,
+  renderMenuItem,
+  collapsible,
+  collapsedWidth,
+  className,
+  titleDrawer
+}) => {
+  const { mobile, toggleSidebar, sidebarOpen } = useLayout();
+  const defaultRenderMenuItem = (item) => /* @__PURE__ */ jsxs(
+    SidebarMenuItem,
+    {
+      onClick: item.onClick,
+      active: item.active,
+      collapsed,
+      disabled: item.disabled,
+      children: [
+        item.icon,
+        !collapsed && /* @__PURE__ */ jsx(Text, { size: "xs", className: "menu-label", children: item.label })
+      ]
+    },
+    item.key
+  );
+  if (mobile) {
+    return /* @__PURE__ */ jsxs(Drawer, { open: sidebarOpen, onClose: toggleSidebar, title: titleDrawer, children: [
+      children,
+      menuItems && /* @__PURE__ */ jsx(Flex, { direction: "column", children: menuItems.map(
+        (item) => renderMenuItem ? renderMenuItem(item) : defaultRenderMenuItem(item)
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    SliderStyled,
+    {
+      collapsed,
+      collapsible,
+      className,
+      collapsedWidth,
+      children: [
+        children,
+        menuItems && /* @__PURE__ */ jsx(Flex, { direction: "column", children: menuItems.map(
+          (item) => renderMenuItem ? renderMenuItem(item) : defaultRenderMenuItem(item)
+        ) })
+      ]
+    }
+  );
+};
+export {
+  Sidebar as default
+};

package/dist/Layout/index.cjs.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Layout$1 = require("./Layout.cjs.js");
+const Header = require("./Header.cjs.js");
+const Content = require("./Content.cjs.js");
+const Footer = require("./Footer.cjs.js");
+const Sidebar = require("./Sidebar.cjs.js");
+const Layout = Layout$1.default;
+Layout.Header = Header;
+Layout.Content = Content;
+Layout.Footer = Footer;
+Layout.Sidebar = Sidebar;
+exports.Layout = Layout;

package/dist/Layout/index.d.ts

@@ -0,0 +1,14 @@
+import { default as LayoutComponent } from './Layout';
+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';
+type TLayout = typeof LayoutComponent & {
+    Header: typeof Header;
+    Content: typeof Content;
+    Footer: typeof Footer;
+    Sidebar: typeof Sidebar;
+};
+declare const Layout: TLayout;
+export { Layout, ILayoutHeaderProps, ILayoutMenuItem, ILayoutProps, ILayoutSidebarProps };

package/dist/Layout/index.es.js

@@ -0,0 +1,13 @@
+import Layout$1 from "./Layout.es.js";
+import Header from "./Header.es.js";
+import Content from "./Content.es.js";
+import Footer from "./Footer.es.js";
+import Sidebar from "./Sidebar.es.js";
+const Layout = Layout$1;
+Layout.Header = Header;
+Layout.Content = Content;
+Layout.Footer = Footer;
+Layout.Sidebar = Sidebar;
+export {
+  Layout
+};

package/dist/Layout/styles.cjs.js

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const HeaderStyled = styled.styled.header.withConfig({
+  shouldForwardProp: (prop) => prop !== "height"
+})`
+  grid-area: header;
+  padding-inline: ${({ theme }) => theme.space.m};
+  padding-top: ${({ theme }) => theme.space.xs};
+  padding-bottom: ${({ theme }) => theme.space.xs};
+  svg {
+    color: ${({ theme }) => theme.colors.grayViolet["9"]};
+  }
+  position: sticky;
+  top: 0;
+  z-index: 100;
+
+  display: flex;
+  flex-wrap: wrap;
+
+  background: ${({ theme }) => theme.colors.grayViolet["1"]};
+
+  border-bottom: ${({ theme }) => theme.control.borderWidth} solid
+    ${({ theme }) => theme.colors.gray["2"]};
+
+  ${({ 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"]};
+  }
+
+  ${({ 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({
+  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"]};
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: auto;
+  padding: ${({ theme }) => theme.space.xs};
+  flex-direction: column;
+  display: flex;
+  height: calc(100vh - 87px);
+
+  ${({ mobile }) => mobile && styled.css`
+      position: fixed;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: 80%;
+      max-width: 300px;
+      z-index: 95;
+      transform: translateX(-100%);
+    `};
+
+  ${({ mobile, open }) => mobile && open && styled.css`
+      transform: translateX(0);
+    `}
+`;
+const ContentStyled = styled.styled.main`
+  grid-area: content;
+  overflow: auto;
+  height: 100vh;
+`;
+const LayoutStyled = styled.styled.div.withConfig({
+  shouldForwardProp: (prop) => !["breakpoint"].includes(prop)
+})`
+  display: grid;
+  min-height: 100vh;
+  grid-template-areas: "header header" "slider content" "slider footer";
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto 1fr auto;
+
+  @media (max-width: ${({ breakpoint }) => `${breakpoint}px`}) {
+    grid-template-areas: "header" "content" "footer";
+    grid-template-columns: 1fr;
+
+    ${SliderStyled} {
+      display: none;
+    }
+  }
+
+  &:has(${HeaderStyled}) {
+    ${ContentStyled} {
+      height: calc(100vh - 71px);
+    }
+  }
+`;
+styled.styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: ${({ theme }) => theme.colors.grayViolet["2"]};
+  z-index: 100;
+  opacity: 1;
+  pointer-events: all;
+  transition: opacity 0.3s ease;
+`;
+exports.ContentStyled = ContentStyled;
+exports.FooterStyled = FooterStyled;
+exports.HeaderStyled = HeaderStyled;
+exports.LayoutMenuItem = LayoutMenuItem;
+exports.LayoutStyled = LayoutStyled;
+exports.SidebarMenuItem = SidebarMenuItem;
+exports.SliderStyled = SliderStyled;

package/dist/Layout/styles.d.ts

@@ -0,0 +1,32 @@
+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>, {
+    mobile?: boolean;
+    open?: boolean;
+    collapsible?: boolean;
+    collapsed?: boolean;
+    collapsedWidth?: number;
+}>> & string;
+export declare const ContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const LayoutStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    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;