@quen-ui/components 0.0.14

package/dist/Layout/styles.es.js

@@ -0,0 +1,150 @@
+import { styled, css } from "styled-components";
+const HeaderStyled = 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.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 && 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({
+  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 && css`
+      position: fixed;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: 80%;
+      max-width: 300px;
+      z-index: 95;
+      transform: translateX(-100%);
+    `};
+
+  ${({ mobile, open }) => mobile && open && css`
+      transform: translateX(0);
+    `}
+`;
+const ContentStyled = styled.main`
+  grid-area: content;
+  overflow: auto;
+  height: 100vh;
+`;
+const LayoutStyled = 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.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;
+`;
+export {
+  ContentStyled,
+  FooterStyled,
+  HeaderStyled,
+  LayoutMenuItem,
+  LayoutStyled,
+  SidebarMenuItem,
+  SliderStyled
+};

package/dist/Layout/types.d.ts

@@ -0,0 +1,75 @@
+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;
+}
+export interface ILayoutContextProps {
+    /** Mobile layout detection (based on breakpoint) */
+    mobile: boolean;
+    /** Mobile sidebar visibility state */
+    sidebarOpen: boolean;
+    /** Desktop sidebar collapsed state */
+    sliderCollapsed: boolean;
+    /** Toggles mobile sidebar visibility */
+    toggleSidebar: () => void;
+    /** Toggles desktop sidebar collapse state */
+    toggleSliderCollapse: () => void;
+}
+export interface ILayoutHeaderProps {
+    /** Custom CSS classes */
+    className?: string;
+    /**	Inline styles */
+    style?: React.CSSProperties;
+    /** Header height */
+    height?: string;
+    /** Navigation menu items */
+    menuItems?: ILayoutMenuItem[];
+    /**	Custom menu item renderer (overrides default) */
+    renderMenuItem?: (item: ILayoutMenuItem) => React.ReactNode;
+    /** Brand logo/content */
+    logo?: React.ReactNode;
+    /** Custom CSS classes for menu item */
+    classNameMenuItem?: string;
+}
+export interface ILayoutProps {
+    /**	Viewport width (px) for mobile/desktop switch */
+    breakpoint?: number;
+}
+export interface ILayoutSidebarProps {
+    /** Desktop collapsed state */
+    collapsed?: boolean;
+    /**	Whether collapsing is allowed */
+    collapsible?: boolean;
+    /** Width (px) in collapsed state */
+    collapsedWidth?: number;
+    /** Custom CSS classes */
+    className?: string;
+    /** Navigation items in sidebar */
+    menuItems?: ILayoutMenuItem[];
+    /** Custom menu item renderer */
+    renderMenuItem?: (item: ILayoutMenuItem) => React.ReactNode;
+    /** Title menu in mobile version */
+    titleDrawer?: string;
+}
+export interface ILayoutFooterProps {
+    /** Content */
+    children: React.ReactNode;
+}
+export interface ILayoutContentProps {
+    /** Content */
+    children: React.ReactNode;
+    /** Custom CSS classes */
+    className?: string;
+}

package/dist/Loader/Loader.cjs.js

@@ -0,0 +1,34 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Bars = require("./loaders/Bars.cjs.js");
+const Oval = require("./loaders/Oval.cjs.js");
+const Dots = require("./loaders/Dots.cjs.js");
+const Loader = ({ view = "dots", size = "s", className }) => {
+  const height = React.useMemo(() => {
+    if (typeof size === "number") {
+      return size / Number(
+        window.getComputedStyle(document.getElementsByTagName("body")[0]).fontSize.replace("px", "")
+      );
+    }
+    switch (size) {
+      case "xs":
+        return 0.75;
+      case "m":
+        return 1.5;
+      case "l":
+        return 2;
+      case "s":
+      default:
+        return 1;
+    }
+  }, [size]);
+  if (view === "bars") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Bars, { height, className });
+  }
+  if (view === "oval") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Oval, { height, className });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Dots, { height, className });
+};
+module.exports = Loader;

package/dist/Loader/Loader.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ILoaderProps } from './types';
+declare const Loader: ({ view, size, className }: ILoaderProps) => React.ReactElement;
+export default Loader;

package/dist/Loader/Loader.es.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import BarsLoader from "./loaders/Bars.es.js";
+import BarsLoader$1 from "./loaders/Oval.es.js";
+import DotsLoader from "./loaders/Dots.es.js";
+const Loader = ({ view = "dots", size = "s", className }) => {
+  const height = useMemo(() => {
+    if (typeof size === "number") {
+      return size / Number(
+        window.getComputedStyle(document.getElementsByTagName("body")[0]).fontSize.replace("px", "")
+      );
+    }
+    switch (size) {
+      case "xs":
+        return 0.75;
+      case "m":
+        return 1.5;
+      case "l":
+        return 2;
+      case "s":
+      default:
+        return 1;
+    }
+  }, [size]);
+  if (view === "bars") {
+    return /* @__PURE__ */ jsx(BarsLoader, { height, className });
+  }
+  if (view === "oval") {
+    return /* @__PURE__ */ jsx(BarsLoader$1, { height, className });
+  }
+  return /* @__PURE__ */ jsx(DotsLoader, { height, className });
+};
+export {
+  Loader as default
+};

package/dist/Loader/index.d.ts

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

package/dist/Loader/loaders/Bars.cjs.js

@@ -0,0 +1,12 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("../styles.cjs.js");
+const BarsLoader = ({
+  height,
+  className
+}) => /* @__PURE__ */ jsxRuntime.jsxs(styles.BarsLoaderStyled, { height, className, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bar" }),
+  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bar" }),
+  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bar" })
+] });
+module.exports = BarsLoader;

package/dist/Loader/loaders/Bars.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+declare const BarsLoader: ({ height, className }: {
+    height: number;
+    className?: string;
+}) => React.ReactElement;
+export default BarsLoader;

package/dist/Loader/loaders/Bars.es.js

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { BarsLoaderStyled } from "../styles.es.js";
+const BarsLoader = ({
+  height,
+  className
+}) => /* @__PURE__ */ jsxs(BarsLoaderStyled, { height, className, children: [
+  /* @__PURE__ */ jsx("span", { className: "bar" }),
+  /* @__PURE__ */ jsx("span", { className: "bar" }),
+  /* @__PURE__ */ jsx("span", { className: "bar" })
+] });
+export {
+  BarsLoader as default
+};

package/dist/Loader/loaders/Dots.cjs.js

@@ -0,0 +1,12 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("../styles.cjs.js");
+const DotsLoader = ({
+  height,
+  className
+}) => /* @__PURE__ */ jsxRuntime.jsxs(styles.DotsLoaderStyled, { height, className, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dot" }),
+  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dot" }),
+  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dot" })
+] });
+module.exports = DotsLoader;

package/dist/Loader/loaders/Dots.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+declare const DotsLoader: ({ height, className }: {
+    height: number;
+    className?: string;
+}) => React.ReactElement;
+export default DotsLoader;

package/dist/Loader/loaders/Dots.es.js

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { DotsLoaderStyled } from "../styles.es.js";
+const DotsLoader = ({
+  height,
+  className
+}) => /* @__PURE__ */ jsxs(DotsLoaderStyled, { height, className, children: [
+  /* @__PURE__ */ jsx("span", { className: "dot" }),
+  /* @__PURE__ */ jsx("span", { className: "dot" }),
+  /* @__PURE__ */ jsx("span", { className: "dot" })
+] });
+export {
+  DotsLoader as default
+};

package/dist/Loader/loaders/Oval.cjs.js

@@ -0,0 +1,8 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("../styles.cjs.js");
+const BarsLoader = ({
+  height,
+  className
+}) => /* @__PURE__ */ jsxRuntime.jsx(styles.OvalLoaderStyled, { height, className });
+module.exports = BarsLoader;

package/dist/Loader/loaders/Oval.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+declare const BarsLoader: ({ height, className }: {
+    height: number;
+    className?: string;
+}) => React.ReactElement;
+export default BarsLoader;

package/dist/Loader/loaders/Oval.es.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { OvalLoaderStyled } from "../styles.es.js";
+const BarsLoader = ({
+  height,
+  className
+}) => /* @__PURE__ */ jsx(OvalLoaderStyled, { height, className });
+export {
+  BarsLoader as default
+};

package/dist/Loader/styles.cjs.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const BarsLoaderStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => prop !== "height"
+})`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: ${({ height }) => height}rem;
+  width: max-content;
+
+  .bar {
+    width: 10px;
+    height: 30px;
+    background-color: ${({ theme }) => theme.colors.violet[5]};
+    margin: 0 5px;
+    animation: bar-animation 1.4s infinite ease-in-out;
+  }
+
+  .bar:nth-child(2) {
+    animation-delay: -1.1s;
+  }
+
+  .bar:nth-child(3) {
+    animation-delay: -0.9s;
+  }
+
+  @keyframes bar-animation {
+    0%,
+    40%,
+    100% {
+      transform: scaleY(0.4);
+    }
+    20% {
+      transform: scaleY(1);
+    }
+  }
+`;
+const OvalLoaderStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => prop !== "height"
+})`
+  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-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+const DotsLoaderStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => prop !== "height"
+})`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: ${({ height }) => height}rem;
+  width: max-content;
+
+  .dot {
+    width: ${({ height }) => height / 2}rem;
+    height: ${({ height }) => height / 2}rem;
+    background-color: ${({ theme }) => theme.colors.violet[5]};
+    border-radius: 50%;
+    margin: 0 5px;
+    animation: dot-animation 1.4s infinite ease-in-out;
+  }
+
+  .dot:nth-child(2) {
+    animation-delay: -0.7s;
+  }
+
+  .dot:nth-child(3) {
+    animation-delay: -0.3s;
+  }
+
+  @keyframes dot-animation {
+    0%, 80%, 100% {
+      transform: scale(0);
+    }
+    40% {
+      transform: scale(1);
+    }
+`;
+exports.BarsLoaderStyled = BarsLoaderStyled;
+exports.DotsLoaderStyled = DotsLoaderStyled;
+exports.OvalLoaderStyled = OvalLoaderStyled;

package/dist/Loader/styles.d.ts

@@ -0,0 +1,9 @@
+export declare const BarsLoaderStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    height: number;
+}>> & string;
+export declare const OvalLoaderStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    height: number;
+}>> & string;
+export declare const DotsLoaderStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    height: number;
+}>> & string;

package/dist/Loader/styles.es.js

@@ -0,0 +1,95 @@
+import styled from "styled-components";
+const BarsLoaderStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => prop !== "height"
+})`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: ${({ height }) => height}rem;
+  width: max-content;
+
+  .bar {
+    width: 10px;
+    height: 30px;
+    background-color: ${({ theme }) => theme.colors.violet[5]};
+    margin: 0 5px;
+    animation: bar-animation 1.4s infinite ease-in-out;
+  }
+
+  .bar:nth-child(2) {
+    animation-delay: -1.1s;
+  }
+
+  .bar:nth-child(3) {
+    animation-delay: -0.9s;
+  }
+
+  @keyframes bar-animation {
+    0%,
+    40%,
+    100% {
+      transform: scaleY(0.4);
+    }
+    20% {
+      transform: scaleY(1);
+    }
+  }
+`;
+const OvalLoaderStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => prop !== "height"
+})`
+  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-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+const DotsLoaderStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => prop !== "height"
+})`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: ${({ height }) => height}rem;
+  width: max-content;
+
+  .dot {
+    width: ${({ height }) => height / 2}rem;
+    height: ${({ height }) => height / 2}rem;
+    background-color: ${({ theme }) => theme.colors.violet[5]};
+    border-radius: 50%;
+    margin: 0 5px;
+    animation: dot-animation 1.4s infinite ease-in-out;
+  }
+
+  .dot:nth-child(2) {
+    animation-delay: -0.7s;
+  }
+
+  .dot:nth-child(3) {
+    animation-delay: -0.3s;
+  }
+
+  @keyframes dot-animation {
+    0%, 80%, 100% {
+      transform: scale(0);
+    }
+    40% {
+      transform: scale(1);
+    }
+`;
+export {
+  BarsLoaderStyled,
+  DotsLoaderStyled,
+  OvalLoaderStyled
+};

package/dist/Loader/types.d.ts

@@ -0,0 +1,11 @@
+import { TQuenSize } from '../types/size';
+export declare const LOADER_VIEW: readonly ["bars", "dots", "oval"];
+export type TLoaderView = typeof LOADER_VIEW[number];
+export interface ILoaderProps {
+    /** Visual style of the loading indicator */
+    view?: TLoaderView;
+    /** Size of the loading indicator */
+    size?: TQuenSize | number;
+    /** Additional classname */
+    className?: string;
+}

package/dist/Modal/Modal.cjs.js

@@ -0,0 +1,67 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const reactDom = require("react-dom");
+const reactTransitionState = require("react-transition-state");
+const styles = require("./styles.cjs.js");
+const Title = require("../typography/Title/Title.cjs.js");
+const Text = require("../typography/Text/Text.cjs.js");
+const Button = require("../Button/Button.cjs.js");
+const iconClose = require("../assets/icon-close.svg.cjs.js");
+const Modal = ({
+  open,
+  title,
+  size = "m",
+  closeButton,
+  onClickClose,
+  onEsc,
+  zIndex = 1e3,
+  description,
+  children,
+  footer,
+  fullScreen,
+  classNameFooter,
+  className,
+  ...props
+}) => {
+  const [state, toggle] = reactTransitionState.useTransitionState({
+    timeout: 500,
+    unmountOnExit: true,
+    initialEntered: open
+  });
+  React.useEffect(() => {
+    toggle(open);
+  }, [open]);
+  const [container, setContainer] = React.useState(null);
+  const handleEscapeDown = (event) => {
+    if (event.key === "Escape") {
+      onEsc == null ? void 0 : onEsc();
+    }
+  };
+  React.useEffect(() => {
+    const container2 = document.getElementsByTagName("body").item(0);
+    if (container2) {
+      container2.addEventListener("keydown", handleEscapeDown);
+    }
+    setContainer(container2);
+    return () => {
+      container2 == null ? void 0 : container2.removeEventListener("keydown", handleEscapeDown);
+    };
+  }, []);
+  if (state.isEnter && container) {
+    return reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(styles.ModalContainer, { status: state.status, zIndex, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(styles.ModalStyled, { fullScreen, className, size, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(styles.ModalHeaderStyled, { children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx(Title, { size, children: title }),
+          closeButton && /* @__PURE__ */ jsxRuntime.jsx(Button, { view: "icon", size, onClick: onClickClose, children: /* @__PURE__ */ jsxRuntime.jsx(iconClose, { width: 16, height: 16 }) })
+        ] }),
+        description && /* @__PURE__ */ jsxRuntime.jsx(Text, { size, children: description }),
+        children,
+        footer && /* @__PURE__ */ jsxRuntime.jsx(styles.ModalFooterStyled, { className: classNameFooter, children: footer })
+      ] }) }),
+      container
+    );
+  }
+  return null;
+};
+module.exports = Modal;