@max-ts/components 0.1.1 → 0.2.0

package/lib/components/NavMenu/Item/ItemButton/styles.mjs

@@ -0,0 +1,126 @@
+import { listItemIconClasses as e, styled as o } from "@mui/material";
+import { ChevronDown as i } from "lucide-react";
+import { ListItemButton as n } from "../../../ListItemButton/ListItemButton.mjs";
+import { ListItemIcon as a } from "../../../ListItemIcon/ListItemIcon.mjs";
+import { OverflowTypography as s } from "../../../OverflowTypography/OverflowTypography.mjs";
+const u = o(n, {
+  shouldForwardProp: (t) => !["$isGroupTitleItem"].includes(t.toString())
+})`
+  box-sizing: border-box;
+  min-height: 40px;
+  padding: ${({ theme: t }) => t.spacing(2)};
+
+  border-radius: ${({ theme: t }) => t.shape.small};
+
+  ${e.root} {
+    color: ${({ theme: t, selected: r }) => r ? t.palette.primary[800] : "inherit"};
+
+    transition: ${({ theme: t }) => t.transitions.create("color", {
+  easing: t.transitions.easing.easeIn,
+  duration: t.transitions.duration.shortest
+})};
+  }
+
+  &:focus-visible {
+    position: relative;
+
+    color: ${({ theme: t }) => t.palette.primary[900]};
+
+    background-color: unset;
+
+    &::before {
+      content: '';
+
+      position: absolute;
+      z-index: 1;
+      inset: 0;
+
+      border: 2px solid ${({ theme: t }) => t.palette.primary[400]};
+      border-radius: ${({ theme: t }) => t.shape.small};
+    }
+  }
+
+  &.Mui-selected {
+    color: ${({ theme: t }) => t.palette.grey[900]};
+
+    background-color: ${({ theme: t, $isGroupTitleItem: r }) => r ? "inherit" : t.palette.primary[100]};
+
+    &::before {
+      content: '';
+
+      position: absolute;
+      inset: 0;
+
+      width: 10px;
+
+      border-left: 3px solid ${({ theme: t }) => t.palette.primary[800]};
+      border-radius: ${({ theme: t }) => t.shape.small};
+    }
+
+    &:hover {
+      color: ${({ theme: t }) => t.palette.grey[900]};
+
+      background-color: ${({ theme: t, $isGroupTitleItem: r }) => r ? "inherit" : t.palette.primary[100]};
+    }
+  }
+
+  &:hover {
+    color: ${({ theme: t }) => t.palette.primary[800]};
+
+    background-color: inherit;
+
+    ${e.root} {
+      color: ${({ theme: t }) => t.palette.primary[800]};
+    }
+  }
+
+  &:active {
+    color: ${({ theme: t }) => t.palette.primary[900]};
+
+    ${e.root} {
+      color: ${({ theme: t }) => t.palette.primary[900]};
+    }
+  }
+
+  ${({ theme: t }) => t.breakpoints.down("sm")} {
+    min-height: 40px;
+    margin-top: ${({ theme: t, $isGroupTitleItem: r }) => r ? t.spacing(4) : 0};
+    padding: ${({ theme: t, $isGroupTitleItem: r }) => r ? t.spacing(0, 5) : t.spacing(3, 5)};
+
+    border-radius: 0;
+
+    &.Mui-selected {
+      &::before {
+        border-radius: 0;
+      }
+    }
+  }
+`, g = o(a)`
+  min-width: unset;
+`, $ = o(s)`
+  width: 'auto';
+  margin-left: ${({ theme: t }) => t.spacing(3)};
+
+  ${({ theme: t }) => t.breakpoints.down("sm")} {
+    width: auto;
+    margin-left: 0;
+  }
+`, b = o(i, {
+  shouldForwardProp: (t) => t !== "collapsedIn" && t !== "opened"
+})`
+  transform: ${({ opened: t }) => t ? "rotateZ(180deg)" : "rotateZ(0deg)"};
+
+  width: ${({ collapsedIn: t }) => t ? "1em" : "0px"};
+  margin-left: auto;
+
+  transition: ${({ theme: t }) => t.transitions.create("transform", {
+  easing: t.transitions.easing.sharp,
+  duration: t.transitions.duration.enteringScreen
+})};
+`;
+export {
+  b as NavMenuItemButtonChevron,
+  g as NavMenuItemButtonIcon,
+  $ as NavMenuItemButtonText,
+  u as StyledListItemButton
+};

package/lib/components/NavMenu/Item/List/List.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../_virtual/jsx-runtime.cjs"),c=require("@mui/material"),u=require("lucide-react"),l=require("../ItemButton/ItemButton.cjs"),a=i=>{const{collapsedIn:n,items:r}=i;return e.j.jsx(c.List,{disablePadding:!0,children:r.map(s=>{const[o,t]=s;return e.j.jsx("li",{children:e.j.jsx(l.ItemButton,{collapsedIn:n,selected:t.active,text:t.text,icon:e.j.jsx(u.Dot,{}),component:t.component})},o)})})};exports.List=a;

package/lib/components/NavMenu/Item/List/List.d.ts

@@ -0,0 +1,13 @@
+import { ElementType, ReactNode } from 'react';
+export type ListProps = {
+    collapsedIn: boolean;
+    items: Array<[
+        key: string,
+        value: {
+            text: ReactNode;
+            active: boolean;
+            component: ElementType;
+        }
+    ]>;
+};
+export declare const List: (props: ListProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/NavMenu/Item/List/List.mjs

@@ -0,0 +1,23 @@
+import { j as t } from "../../../../_virtual/jsx-runtime.mjs";
+import { List as m } from "@mui/material";
+import { Dot as c } from "lucide-react";
+import { ItemButton as p } from "../ItemButton/ItemButton.mjs";
+const j = (o) => {
+  const { collapsedIn: s, items: r } = o;
+  return /* @__PURE__ */ t.jsx(m, { disablePadding: !0, children: r.map((i) => {
+    const [n, e] = i;
+    return /* @__PURE__ */ t.jsx("li", { children: /* @__PURE__ */ t.jsx(
+      p,
+      {
+        collapsedIn: s,
+        selected: e.active,
+        text: e.text,
+        icon: /* @__PURE__ */ t.jsx(c, {}),
+        component: e.component
+      }
+    ) }, n);
+  }) });
+};
+export {
+  j as List
+};

package/lib/components/NavMenu/NavMenu.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../_virtual/jsx-runtime.cjs"),i=require("@mui/material"),s=require("./Item/Item.cjs"),a=t=>{const{collapsedIn:n=!0,items:u}=t;return r.j.jsx(i.List,{disablePadding:!0,children:u.map(e=>r.j.jsx(s.Item,{collapsedIn:n,item:e},e[0]))})};exports.NavMenu=a;

package/lib/components/NavMenu/NavMenu.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps, ElementType } from 'react';
+import { ItemProps } from './Item';
+export type NavMenuProps<TComponent extends ElementType = ElementType> = {
+    /**
+     * Состояние свернуто/развернуто меню по горизонтали
+     */
+    collapsedIn?: boolean;
+    items: [
+        key: ItemProps['item'][0],
+        value: ItemProps['item'][1] & {
+            component?: TComponent;
+        } & Omit<ComponentProps<ElementType extends TComponent ? 'button' : TComponent>, ''>
+    ][];
+};
+export declare const NavMenu: <TComponent extends ElementType>(props: NavMenuProps<TComponent>) => import("react/jsx-runtime").JSX.Element;

package/lib/components/NavMenu/NavMenu.mjs

@@ -0,0 +1,10 @@
+import { j as t } from "../../_virtual/jsx-runtime.mjs";
+import { List as m } from "@mui/material";
+import { Item as n } from "./Item/Item.mjs";
+const u = (e) => {
+  const { collapsedIn: o = !0, items: s } = e;
+  return /* @__PURE__ */ t.jsx(m, { disablePadding: !0, children: s.map((r) => /* @__PURE__ */ t.jsx(n, { collapsedIn: o, item: r }, r[0])) });
+};
+export {
+  u as NavMenu
+};

package/lib/components/OutdatedReleasePlaceholder/OutdatedReleasePlaceholder.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.cjs"),o=require("react"),i=require("../Button/Button.cjs"),n=require("../ConfigProvider/ConfigProvider.cjs");require("../Placeholder/Image/Image.cjs");const l=require("../Placeholder/Placeholder.cjs"),c=require("../Typography/Typography.cjs"),a=()=>{const{imagesMap:r}=o.useContext(n.ConfigContext),t=()=>{location.reload()};return e.j.jsx(l.Placeholder,{title:"Обновление в сервисе",description:e.j.jsx(c.Typography,{component:"p",children:"Наши специалисты работают над улучшением качества продукта. Для загрузки обновлений, пожалуйста, обновите страницу."}),imgAlt:"Обновление в сервисе",imgSrc:r.outdatedReleaseErrorImgSrc,imgWidth:"324px",Actions:e.j.jsx(i.Button,{onClick:t,children:"Обновить страницу"})})};exports.OutdatedReleasePlaceholder=a;

package/lib/components/OutdatedReleasePlaceholder/OutdatedReleasePlaceholder.mjs

@@ -0,0 +1,26 @@
+import { j as o } from "../../_virtual/jsx-runtime.mjs";
+import { useContext as e } from "react";
+import { Button as i } from "../Button/Button.mjs";
+import { ConfigContext as m } from "../ConfigProvider/ConfigProvider.mjs";
+import "../Placeholder/Image/Image.mjs";
+import { Placeholder as n } from "../Placeholder/Placeholder.mjs";
+import { Typography as p } from "../Typography/Typography.mjs";
+const h = () => {
+  const { imagesMap: t } = e(m), r = () => {
+    location.reload();
+  };
+  return /* @__PURE__ */ o.jsx(
+    n,
+    {
+      title: "Обновление в сервисе",
+      description: /* @__PURE__ */ o.jsx(p, { component: "p", children: "Наши специалисты работают над улучшением качества продукта. Для загрузки обновлений, пожалуйста, обновите страницу." }),
+      imgAlt: "Обновление в сервисе",
+      imgSrc: t.outdatedReleaseErrorImgSrc,
+      imgWidth: "324px",
+      Actions: /* @__PURE__ */ o.jsx(i, { onClick: r, children: "Обновить страницу" })
+    }
+  );
+};
+export {
+  h as OutdatedReleasePlaceholder
+};

package/lib/components/OverflowTypography/OverflowTypography.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.cjs"),c=require("../Tooltip/Tooltip.cjs"),T=require("../Typography/Typography.cjs"),t=require("./styles.cjs"),g=require("./useLogic/useLogic.cjs"),s=1,f=i=>{const{ref:l,isOverflowed:u,secondPartLabel:d,firstPartLabel:h,isTruncatedStringVisible:j}=g.useLogic(i),{tooltipProps:n,children:r,rowsCount:p=s,visibleLastSymbolsCount:b,align:a="left",...o}=i,y={...o,ref:l,align:a,children:r,rowsCount:p,hasMultipleRows:p>s};return j?e.j.jsx(c.Tooltip,{title:r,disableInteractive:!0,...n,children:e.j.jsxs(t.Wrapper,{$align:a,children:[e.j.jsx(t.StyledTypography,{component:"span",ref:l,hasMultipleRows:!1,rowsCount:1,...o,children:h}),e.j.jsx(T.Typography,{...o,component:"span",children:d})]})}):r&&u?e.j.jsx(c.Tooltip,{title:r,disableInteractive:!0,...n,children:e.j.jsx(t.StyledTypography,{...y})}):e.j.jsx(t.StyledTypography,{...y})};exports.DEFAULT_ROWS_COUNT=s;exports.OverflowTypography=f;

package/lib/components/OverflowTypography/OverflowTypography.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode, PropsWithChildren } from 'react';
+import { TooltipProps as BasicTooltipProps } from '../Tooltip';
+import { TypographyProps } from '../Typography';
+type TooltipProps = Omit<BasicTooltipProps, 'ref'>;
+export type OverflowedProps = {
+    /**
+     * Максимальное количество отображаемых строк
+     * @example <OverflowTypography rowsCount={2} />
+     * @default 1
+     */
+    rowsCount?: number;
+};
+type TooltipCustomizable = {
+    /**
+     * Пропс для кастомизации тултипа
+     * @example <OverflowTypography tooltipProps={{placement: 'top-start'}} />
+     */
+    tooltipProps?: Omit<TooltipProps, 'children' | 'title'> & {
+        /**
+         * Кастомный контент внутри tooltip. Данный props перекрывает дефолтный текст,
+         * когда строка не вмещается в контейнер
+         */
+        title?: ReactNode;
+    };
+    /**
+     * Количество отображаемых после сокращения в конце символов
+     */
+    visibleLastSymbolsCount?: number;
+};
+export type OverflowedElementProps = OverflowedProps & TooltipCustomizable & TypographyProps;
+export type OverflowedTypographyProps = PropsWithChildren<OverflowedElementProps>;
+export declare const DEFAULT_ROWS_COUNT = 1;
+export declare const OverflowTypography: (props: OverflowedTypographyProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/OverflowTypography/OverflowTypography.mjs

@@ -0,0 +1,46 @@
+import { j as r } from "../../_virtual/jsx-runtime.mjs";
+import { Tooltip as c } from "../Tooltip/Tooltip.mjs";
+import { Typography as x } from "../Typography/Typography.mjs";
+import { Wrapper as y, StyledTypography as e } from "./styles.mjs";
+import { useLogic as j } from "./useLogic/useLogic.mjs";
+const m = 1, P = (s) => {
+  const {
+    ref: i,
+    isOverflowed: f,
+    secondPartLabel: u,
+    firstPartLabel: d,
+    isTruncatedStringVisible: h
+  } = j(s), {
+    tooltipProps: n,
+    children: t,
+    rowsCount: l = m,
+    visibleLastSymbolsCount: g,
+    align: p = "left",
+    ...o
+  } = s, a = {
+    ...o,
+    ref: i,
+    align: p,
+    children: t,
+    rowsCount: l,
+    hasMultipleRows: l > m
+  };
+  return h ? /* @__PURE__ */ r.jsx(c, { title: t, disableInteractive: !0, ...n, children: /* @__PURE__ */ r.jsxs(y, { $align: p, children: [
+    /* @__PURE__ */ r.jsx(
+      e,
+      {
+        component: "span",
+        ref: i,
+        hasMultipleRows: !1,
+        rowsCount: 1,
+        ...o,
+        children: d
+      }
+    ),
+    /* @__PURE__ */ r.jsx(x, { ...o, component: "span", children: u })
+  ] }) }) : t && f ? /* @__PURE__ */ r.jsx(c, { title: t, disableInteractive: !0, ...n, children: /* @__PURE__ */ r.jsx(e, { ...a }) }) : /* @__PURE__ */ r.jsx(e, { ...a });
+};
+export {
+  m as DEFAULT_ROWS_COUNT,
+  P as OverflowTypography
+};

package/lib/components/OverflowTypography/hooks/useOverflowed/useOverflowed.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("@mui/material"),n=require("react"),h=require("react-use"),v=o=>{const c=n.useRef(null),t=o&&typeof o!="function"?o:c,[u,l]=n.useState(!1),f=h.useFirstMountState(),i=([{target:e,contentRect:r}])=>{const s=Math.round(r.height)<e.scrollHeight,g=e.scrollWidth>Math.round(r.width);l(s||g)};return n.useLayoutEffect(()=>{if(t?.current){const e=t.current,r={target:e,contentRect:e.getBoundingClientRect()};if(!f){const s=new ResizeObserver(a.debounce(i,500));return s.observe(e),()=>s.unobserve(e)}i([r])}},[t.current]),{isOverflowed:u,ref:t}};exports.useOverflowed=v;

package/lib/components/OverflowTypography/hooks/useOverflowed/useOverflowed.d.ts

@@ -0,0 +1,5 @@
+import { Ref } from 'react';
+export declare const useOverflowed: (forwardedRef?: Ref<HTMLElement>) => {
+    isOverflowed: boolean;
+    ref: import('react').RefObject<HTMLElement | null>;
+};

package/lib/components/OverflowTypography/hooks/useOverflowed/useOverflowed.mjs

@@ -0,0 +1,27 @@
+import { debounce as h } from "@mui/material";
+import { useRef as g, useState as v, useLayoutEffect as d } from "react";
+import { useFirstMountState as m } from "react-use";
+const p = (s) => {
+  const c = g(null), t = s && typeof s != "function" ? s : c, [i, u] = v(!1), l = m(), n = ([
+    { target: e, contentRect: r }
+  ]) => {
+    const o = Math.round(r.height) < e.scrollHeight, f = e.scrollWidth > Math.round(r.width);
+    u(o || f);
+  };
+  return d(() => {
+    if (t?.current) {
+      const e = t.current, r = {
+        target: e,
+        contentRect: e.getBoundingClientRect()
+      };
+      if (!l) {
+        const o = new ResizeObserver(h(n, 500));
+        return o.observe(e), () => o.unobserve(e);
+      }
+      n([r]);
+    }
+  }, [t.current]), { isOverflowed: i, ref: t };
+};
+export {
+  p as useOverflowed
+};

package/lib/components/OverflowTypography/styles.cjs

@@ -0,0 +1,20 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@mui/material"),i=require("../Typography/Typography.cjs"),l=t.styled(i.Typography,{shouldForwardProp:e=>e!=="rowsCount"&&e!=="hasMultipleRows"})`
+  /* stylelint-disable-next-line */
+  overflow: hidden;
+  /* stylelint-disable-next-line */
+  display: ${({hasMultipleRows:e})=>e?"-webkit-box":""};
+
+  max-width: 100%;
+
+  text-overflow: ellipsis;
+  white-space: ${({hasMultipleRows:e})=>e?"initial":"nowrap"};
+  -webkit-box-orient: ${({hasMultipleRows:e})=>e?"vertical":""};
+  -webkit-line-clamp: ${({rowsCount:e})=>e};
+`,o=t.styled(i.Typography,{shouldForwardProp:e=>!["$align"].includes(e.toString())})`
+  display: flex;
+  justify-content: ${({$align:e})=>e};
+
+  width: 100%;
+
+  white-space: nowrap;
+`;exports.StyledTypography=l;exports.Wrapper=o;

package/lib/components/OverflowTypography/styles.d.ts

@@ -0,0 +1,35 @@
+type OverflowTypographyWrapperProps = {
+    hasMultipleRows: boolean;
+    rowsCount: number;
+};
+export declare const StyledTypography: import('@emotion/styled').StyledComponent<{
+    ref?: import('react').Ref<HTMLSpanElement> | undefined;
+    children?: import('react').ReactNode;
+    align?: "inherit" | "left" | "center" | "right" | "justify" | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+} & {
+    color?: import('../Typography').TypographyColor;
+    variant?: import('../Typography').TypographyVariant;
+    colorIntensity?: import('../Typography').Intensity;
+    component?: "symbol" | "object" | "style" | "clipPath" | "filter" | "mask" | "path" | import('react').ComponentType<any> | "map" | "search" | "big" | "link" | "small" | "sub" | "sup" | "marker" | "svg" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view";
+    isUpperCase?: boolean;
+} & import('react').HTMLAttributes<HTMLParagraphElement> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & OverflowTypographyWrapperProps, {}, {}>;
+export declare const Wrapper: import('@emotion/styled').StyledComponent<{
+    ref?: import('react').Ref<HTMLSpanElement> | undefined;
+    children?: import('react').ReactNode;
+    align?: "inherit" | "left" | "center" | "right" | "justify" | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+} & {
+    color?: import('../Typography').TypographyColor;
+    variant?: import('../Typography').TypographyVariant;
+    colorIntensity?: import('../Typography').Intensity;
+    component?: "symbol" | "object" | "style" | "clipPath" | "filter" | "mask" | "path" | import('react').ComponentType<any> | "map" | "search" | "big" | "link" | "small" | "sub" | "sup" | "marker" | "svg" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view";
+    isUpperCase?: boolean;
+} & import('react').HTMLAttributes<HTMLParagraphElement> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    $align: string;
+}, {}, {}>;
+export {};

package/lib/components/OverflowTypography/styles.mjs

@@ -0,0 +1,30 @@
+import { styled as i } from "@mui/material";
+import { Typography as e } from "../Typography/Typography.mjs";
+const r = i(e, {
+  shouldForwardProp: (t) => t !== "rowsCount" && t !== "hasMultipleRows"
+})`
+  /* stylelint-disable-next-line */
+  overflow: hidden;
+  /* stylelint-disable-next-line */
+  display: ${({ hasMultipleRows: t }) => t ? "-webkit-box" : ""};
+
+  max-width: 100%;
+
+  text-overflow: ellipsis;
+  white-space: ${({ hasMultipleRows: t }) => t ? "initial" : "nowrap"};
+  -webkit-box-orient: ${({ hasMultipleRows: t }) => t ? "vertical" : ""};
+  -webkit-line-clamp: ${({ rowsCount: t }) => t};
+`, p = i(e, {
+  shouldForwardProp: (t) => !["$align"].includes(t.toString())
+})`
+  display: flex;
+  justify-content: ${({ $align: t }) => t};
+
+  width: 100%;
+
+  white-space: nowrap;
+`;
+export {
+  r as StyledTypography,
+  p as Wrapper
+};

package/lib/components/OverflowTypography/useLogic/useLogic.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../hooks/useOverflowed/useOverflowed.cjs"),u=require("../utils/truncateString/truncateString.cjs"),f=({children:e,visibleLastSymbolsCount:r,ref:c})=>{const{ref:i,isOverflowed:t}=a.useOverflowed(c),n=e&&typeof e=="string",{firstPartLabel:o,secondPartLabel:s}=n&&t&&r?u.truncateString(r,e):{firstPartLabel:"",secondPartLabel:""};return{isTruncatedStringVisible:n&&t&&!!r,isOverflowed:t,ref:i,firstPartLabel:o,secondPartLabel:s}};exports.useLogic=f;

package/lib/components/OverflowTypography/useLogic/useLogic.d.ts

@@ -0,0 +1,8 @@
+import { OverflowedTypographyProps } from '../OverflowTypography';
+export declare const useLogic: ({ children, visibleLastSymbolsCount, ref: forwardedRef, }: OverflowedTypographyProps) => {
+    isTruncatedStringVisible: boolean | "" | 0 | 0n | null | undefined;
+    isOverflowed: boolean;
+    ref: import('react').RefObject<HTMLElement | null>;
+    firstPartLabel: string;
+    secondPartLabel: string;
+};

package/lib/components/OverflowTypography/useLogic/useLogic.mjs

@@ -0,0 +1,19 @@
+import { useOverflowed as s } from "../hooks/useOverflowed/useOverflowed.mjs";
+import { truncateString as f } from "../utils/truncateString/truncateString.mjs";
+const p = ({
+  children: r,
+  visibleLastSymbolsCount: e,
+  ref: n
+}) => {
+  const { ref: a, isOverflowed: t } = s(n), o = r && typeof r == "string", { firstPartLabel: c, secondPartLabel: i } = o && t && e ? f(e, r) : { firstPartLabel: "", secondPartLabel: "" };
+  return {
+    isTruncatedStringVisible: o && t && !!e,
+    isOverflowed: t,
+    ref: a,
+    firstPartLabel: c,
+    secondPartLabel: i
+  };
+};
+export {
+  p as useLogic
+};

package/lib/components/OverflowTypography/utils/truncateString/truncateString.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=(t,e)=>{const r=e.slice(0,-t),c=e.slice(-t);return{firstPartLabel:r,secondPartLabel:c}};exports.truncateString=n;

package/lib/components/OverflowTypography/utils/truncateString/truncateString.mjs

@@ -0,0 +1,7 @@
+const n = (t, r) => {
+  const c = r.slice(0, -t), e = r.slice(-t);
+  return { firstPartLabel: c, secondPartLabel: e };
+};
+export {
+  n as truncateString
+};

package/lib/components/Pagination/Pagination.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../_virtual/jsx-runtime.cjs"),i=require("@mui/material"),n=({...e})=>t.j.jsx(i.Pagination,{shape:"rounded",...e});exports.Pagination=n;

package/lib/components/Pagination/Pagination.d.ts

@@ -0,0 +1,2 @@
+import { PaginationProps } from './types';
+export declare const Pagination: ({ ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Pagination/Pagination.mjs

@@ -0,0 +1,6 @@
+import { j as n } from "../../_virtual/jsx-runtime.mjs";
+import { Pagination as t } from "@mui/material";
+const r = ({ ...o }) => /* @__PURE__ */ n.jsx(t, { shape: "rounded", ...o });
+export {
+  r as Pagination
+};

package/lib/components/Pagination/types.d.ts

@@ -0,0 +1,3 @@
+import { PaginationProps as MuiPaginationProps } from '@mui/material';
+import { WithoutEmotionSpecific } from '../types';
+export type PaginationProps = Omit<WithoutEmotionSpecific<MuiPaginationProps>, 'shape' | 'showLastButton' | 'showFirstButton' | 'boundaryCount' | 'hidePrevButton' | 'hideNextButton'>;

package/lib/components/Paper/Paper.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../_virtual/jsx-runtime.cjs"),t=require("@mui/material"),a=e=>r.j.jsx(t.Paper,{...e});exports.Paper=a;

package/lib/components/Paper/Paper.d.ts

@@ -0,0 +1,14 @@
+import { PaperProps as MuiPaperProps } from '@mui/material';
+import { WithoutEmotionSpecific } from '../types';
+export type PaperProps = Omit<WithoutEmotionSpecific<MuiPaperProps>, 'elevation'> & {
+    /**
+     * Определяет, на какой высоте над поверхностью находится элемент. Чем больше значение, тем дальше элемент визуально.
+     * @default elevation={1} 'Тень [200]'
+     * @example
+     * <Paper elevation={0}> = Нет тени
+     * <Paper> | <Paper elevation={1}> = Тень [200]
+     * <Paper elevation={2}> = Тень [300]
+     */
+    elevation?: 0 | 1 | 2;
+};
+export declare const Paper: (props: PaperProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Paper/Paper.mjs

@@ -0,0 +1,6 @@
+import { j as o } from "../../_virtual/jsx-runtime.mjs";
+import { Paper as p } from "@mui/material";
+const s = (r) => /* @__PURE__ */ o.jsx(p, { ...r });
+export {
+  s as Paper
+};

package/lib/components/Placeholder/Image/Image.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./styles.cjs"),t=e.Wrapper,s=e.Wrapper.withComponent;exports.Image=t;exports.setDefaultImageStyles=s;

package/lib/components/Placeholder/Image/Image.d.ts

@@ -0,0 +1,21 @@
+import { AllHTMLAttributes } from 'react';
+import { PlaceholderSize } from '../types';
+export type ImageProps = Pick<AllHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'width' | 'height' | 'className'> & {
+    size?: PlaceholderSize;
+};
+export declare const Image: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    size?: PlaceholderSize;
+}, import('react').DetailedHTMLProps<import('react').ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const setDefaultImageStyles: {
+    <C extends import('react').ComponentClass<import('react').ComponentProps<C>, any>>(component: C): import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+        size?: PlaceholderSize;
+    } & import("react").JSX.LibraryManagedAttributes<C, import('react').ComponentProps<C>>, {}, {
+        ref?: import('react').Ref<InstanceType<C>> | undefined;
+    }>;
+    <C extends import('react').ComponentType<import('react').ComponentProps<C>>>(component: C): import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+        size?: PlaceholderSize;
+    } & import("react").JSX.LibraryManagedAttributes<C, import('react').ComponentProps<C>>, {}, {}>;
+    <Tag extends keyof import('@emotion/styled/dist/declarations/src/jsx-namespace').ReactJSXIntrinsicElements>(tag: Tag): import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+        size?: PlaceholderSize;
+    }, import("react").JSX.IntrinsicElements[Tag], {}>;
+};

package/lib/components/Placeholder/Image/Image.mjs

@@ -0,0 +1,6 @@
+import { Wrapper as t } from "./styles.mjs";
+const o = t, m = t.withComponent;
+export {
+  o as Image,
+  m as setDefaultImageStyles
+};

package/lib/components/Placeholder/Image/styles.cjs

@@ -0,0 +1,17 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@mui/material"),r=require("../constants.cjs"),e=o.styled("img",{shouldForwardProp:t=>t!=="size"})`
+  display: block;
+
+  width: ${({width:t})=>t||"auto"};
+  max-width: 100%;
+  height: ${({height:t})=>t||"auto"};
+  margin: auto auto
+    ${({theme:t,size:a})=>a===r.SIZE.Small?t.spacing(4):t.spacing(6)};
+
+  color: ${({theme:t})=>t.palette.grey[900]};
+
+  object-fit: contain;
+
+  ${({theme:t})=>t.breakpoints.down("sm")} {
+    margin: auto auto ${({theme:t})=>t.spacing(8)};
+  }
+`;exports.Wrapper=e;

package/lib/components/Placeholder/Image/styles.d.ts

@@ -0,0 +1,4 @@
+import { PlaceholderSize } from '../types';
+export declare const Wrapper: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    size?: PlaceholderSize;
+}, import('react').DetailedHTMLProps<import('react').ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;

package/lib/components/Placeholder/Image/styles.mjs

@@ -0,0 +1,24 @@
+import { styled as t } from "@mui/material";
+import { SIZE as i } from "../constants.mjs";
+const n = t("img", {
+  shouldForwardProp: (o) => o !== "size"
+})`
+  display: block;
+
+  width: ${({ width: o }) => o || "auto"};
+  max-width: 100%;
+  height: ${({ height: o }) => o || "auto"};
+  margin: auto auto
+    ${({ theme: o, size: a }) => a === i.Small ? o.spacing(4) : o.spacing(6)};
+
+  color: ${({ theme: o }) => o.palette.grey[900]};
+
+  object-fit: contain;
+
+  ${({ theme: o }) => o.breakpoints.down("sm")} {
+    margin: auto auto ${({ theme: o }) => o.spacing(8)};
+  }
+`;
+export {
+  n as Wrapper
+};