@max-ts/components 0.1.1 → 0.2.0

package/lib/components/Placeholder/Placeholder.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../_virtual/jsx-runtime.cjs"),d=require("react"),f=require("../ConfigProvider/ConfigProvider.cjs"),s=require("./Image/Image.cjs"),l=require("./constants.cjs"),t=require("./styles.cjs"),m=({className:j,title:g,imgSrc:a,imgAlt:I,description:i,Actions:c,size:e="small",imgWidth:u,renderImage:n})=>{const o=d.useContext(f.ConfigContext).components?.placeholder?.defaultProps?.renderImage,h=d.useMemo(()=>n&&s.setDefaultImageStyles(n)||o&&s.setDefaultImageStyles(o)||s.Image,[n,o]);return r.j.jsxs(t.Wrapper,{$size:e,className:j,children:[r.j.jsxs(t.InnerContainer,{$size:e,children:[a&&r.j.jsx(h,{src:a,alt:I,width:u||l.IMAGE_WIDTH[e],height:u?"auto":l.IMAGE_HEIGHT[e],size:e}),r.j.jsx(t.Title,{$size:e,variant:l.TITLE_HEADER_LEVEL[e],children:g}),i&&r.j.jsx(t.Description,{$size:e,component:"div",variant:"body1",children:i})]}),c&&r.j.jsx(t.Footer,{children:c})]})};exports.Placeholder=m;

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

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import { ImageProps } from './Image';
+import { PlaceholderSize } from './types';
+export type PlaceholderProps = {
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+    /**
+     * Ссылка на изображение
+     */
+    imgSrc?: string;
+    /**
+     * Описание изображения (атрибут alt)
+     */
+    imgAlt?: string;
+    /**
+     * @deprecated
+     * Ширина изображения. Причина отказа от поддержки: ширина теперь высчитывается на основе prop size
+     */
+    imgWidth?: string;
+    /**
+     * Заголовок
+     */
+    title: ReactNode | ReactNode[] | string;
+    /**
+     * Описание
+     */
+    description?: ReactNode | ReactNode[] | string;
+    /**
+     * Действия
+     */
+    Actions?: ReactNode;
+    /**
+     * Задает общий размер компонента
+     */
+    size?: PlaceholderSize;
+    /**
+     * Пропс для кастомизации компонента рендера основного изображения
+     * По умолчанию рендерится обычный img тег
+     * @example <Placeholder renderImage={(props) => <img {...props}/>} />
+     */
+    renderImage?: (props: ImageProps) => ReactNode;
+};
+export declare const Placeholder: ({ className, title, imgSrc, imgAlt, description, Actions, size, imgWidth, renderImage, }: PlaceholderProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Placeholder/Placeholder.mjs

@@ -0,0 +1,42 @@
+import { j as e } from "../../_virtual/jsx-runtime.mjs";
+import { useContext as x, useMemo as d } from "react";
+import { ConfigContext as h } from "../ConfigProvider/ConfigProvider.mjs";
+import { setDefaultImageStyles as i, Image as E } from "./Image/Image.mjs";
+import { IMAGE_HEIGHT as I, IMAGE_WIDTH as j, TITLE_HEADER_LEVEL as u } from "./constants.mjs";
+import { Wrapper as g, InnerContainer as T, Title as C, Description as D, Footer as H } from "./styles.mjs";
+const y = ({
+  className: l,
+  title: c,
+  imgSrc: n,
+  imgAlt: p,
+  description: s,
+  Actions: m,
+  size: o = "small",
+  imgWidth: a,
+  renderImage: r
+}) => {
+  const t = x(h).components?.placeholder?.defaultProps?.renderImage, f = d(
+    () => r && i(r) || t && i(t) || E,
+    [r, t]
+  );
+  return /* @__PURE__ */ e.jsxs(g, { $size: o, className: l, children: [
+    /* @__PURE__ */ e.jsxs(T, { $size: o, children: [
+      n && /* @__PURE__ */ e.jsx(
+        f,
+        {
+          src: n,
+          alt: p,
+          width: a || j[o],
+          height: a ? "auto" : I[o],
+          size: o
+        }
+      ),
+      /* @__PURE__ */ e.jsx(C, { $size: o, variant: u[o], children: c }),
+      s && /* @__PURE__ */ e.jsx(D, { $size: o, component: "div", variant: "body1", children: s })
+    ] }),
+    m && /* @__PURE__ */ e.jsx(H, { children: m })
+  ] });
+};
+export {
+  y as Placeholder
+};

package/lib/components/Placeholder/constants.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E={Small:"small",Medium:"medium",Large:"large"},e={[E.Small]:"239px",[E.Medium]:"323px",[E.Large]:"458px"},l={[E.Small]:"119px",[E.Medium]:"161px",[E.Large]:"229px"},I={[E.Small]:"384px",[E.Medium]:"400px",[E.Large]:"460px"},a={[E.Small]:"h5",[E.Medium]:"h4",[E.Large]:"h3"};exports.IMAGE_HEIGHT=l;exports.IMAGE_WIDTH=e;exports.MAX_INNER_WIDTH=I;exports.SIZE=E;exports.TITLE_HEADER_LEVEL=a;

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

@@ -0,0 +1,14 @@
+import { PlaceholderSize } from './types';
+export declare const SIZE: Record<Capitalize<PlaceholderSize>, PlaceholderSize>;
+export declare const IMAGE_WIDTH: {
+    [x: string]: string;
+};
+export declare const IMAGE_HEIGHT: {
+    [x: string]: string;
+};
+export declare const MAX_INNER_WIDTH: {
+    [x: string]: string;
+};
+export declare const TITLE_HEADER_LEVEL: {
+    readonly [x: string]: "h3" | "h4" | "h5";
+};

package/lib/components/Placeholder/constants.mjs

@@ -0,0 +1,28 @@
+const e = {
+  Small: "small",
+  Medium: "medium",
+  Large: "large"
+}, l = {
+  [e.Small]: "239px",
+  [e.Medium]: "323px",
+  [e.Large]: "458px"
+}, m = {
+  [e.Small]: "119px",
+  [e.Medium]: "161px",
+  [e.Large]: "229px"
+}, a = {
+  [e.Small]: "384px",
+  [e.Medium]: "400px",
+  [e.Large]: "460px"
+}, p = {
+  [e.Small]: "h5",
+  [e.Medium]: "h4",
+  [e.Large]: "h3"
+};
+export {
+  m as IMAGE_HEIGHT,
+  l as IMAGE_WIDTH,
+  a as MAX_INNER_WIDTH,
+  e as SIZE,
+  p as TITLE_HEADER_LEVEL
+};

package/lib/components/Placeholder/styles.cjs

@@ -0,0 +1,59 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@mui/material"),a=require("../Typography/Typography.cjs"),n=require("./constants.cjs"),r=t=>t!=="$size",i=o.styled("div",{shouldForwardProp:r})`
+  display: flex;
+  flex-direction: column;
+  gap: ${({theme:t,$size:e})=>e===n.SIZE.Small?t.spacing(4):t.spacing(6)};
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+  padding: ${({theme:t})=>t.spacing(4)};
+
+  background-color: ${({theme:t})=>t.palette.background.paper};
+
+  ${({theme:t})=>t.breakpoints.down("sm")} {
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 1fr max-content;
+    gap: ${({theme:t})=>t.spacing(4)};
+  }
+`,p=o.styled("div",{shouldForwardProp:r})`
+  max-width: ${({$size:t})=>n.MAX_INNER_WIDTH[t]};
+  margin: 0 auto;
+`,s=o.styled(a.Typography,{shouldForwardProp:r})`
+  margin-bottom: ${({theme:t,$size:e})=>e===n.SIZE.Small?t.spacing(2):t.spacing(4)};
+
+  text-align: center;
+
+  ${({theme:t})=>t.breakpoints.down("sm")} {
+    margin-bottom: ${({theme:t})=>t.spacing(4)};
+
+    font-size: ${({theme:t})=>t.typography.pxToRem(20)};
+    font-weight: ${({theme:t})=>t.typography.fontWeightMedium};
+    color: ${({theme:t})=>t.palette.text.secondary};
+  }
+`,c=o.styled(a.Typography,{shouldForwardProp:r})`
+  display: block;
+
+  font-size: ${({$size:t,theme:e})=>t===n.SIZE.Large?e.typography.pxToRem(16):e.typography.body1.fontSize};
+  text-align: center;
+
+  ${({theme:t})=>t.breakpoints.down("sm")} {
+    font-size: ${({theme:t})=>t.typography.body1.fontSize};
+    color: ${({theme:t})=>t.palette.text.secondary};
+  }
+`,l=o.styled("footer")`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({theme:t})=>t.spacing(2)};
+  justify-content: center;
+
+  color: ${({theme:t})=>t.palette.grey[900]};
+
+  ${({theme:t})=>t.breakpoints.down("sm")} {
+    flex-direction: column;
+    gap: ${({theme:t})=>t.spacing(3)};
+
+    margin-top: auto;
+  }
+`;exports.Description=c;exports.Footer=l;exports.InnerContainer=p;exports.Title=s;exports.Wrapper=i;

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

@@ -0,0 +1,35 @@
+import { PlaceholderSize } from './types';
+export type WithSize = {
+    $size: PlaceholderSize;
+};
+export declare const Wrapper: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & WithSize, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const InnerContainer: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & WithSize, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Title: 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> & WithSize, {}, {}>;
+export declare const Description: 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> & WithSize, {}, {}>;
+export declare const Footer: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/lib/components/Placeholder/styles.mjs

@@ -0,0 +1,77 @@
+import { styled as n } from "@mui/material";
+import { Typography as r } from "../Typography/Typography.mjs";
+import { SIZE as a, MAX_INNER_WIDTH as i } from "./constants.mjs";
+const e = (t) => t !== "$size", g = n("div", {
+  shouldForwardProp: e
+})`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: t, $size: o }) => o === a.Small ? t.spacing(4) : t.spacing(6)};
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+  padding: ${({ theme: t }) => t.spacing(4)};
+
+  background-color: ${({ theme: t }) => t.palette.background.paper};
+
+  ${({ theme: t }) => t.breakpoints.down("sm")} {
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 1fr max-content;
+    gap: ${({ theme: t }) => t.spacing(4)};
+  }
+`, l = n("div", {
+  shouldForwardProp: e
+})`
+  max-width: ${({ $size: t }) => i[t]};
+  margin: 0 auto;
+`, d = n(r, {
+  shouldForwardProp: e
+})`
+  margin-bottom: ${({ theme: t, $size: o }) => o === a.Small ? t.spacing(2) : t.spacing(4)};
+
+  text-align: center;
+
+  ${({ theme: t }) => t.breakpoints.down("sm")} {
+    margin-bottom: ${({ theme: t }) => t.spacing(4)};
+
+    font-size: ${({ theme: t }) => t.typography.pxToRem(20)};
+    font-weight: ${({ theme: t }) => t.typography.fontWeightMedium};
+    color: ${({ theme: t }) => t.palette.text.secondary};
+  }
+`, m = n(r, {
+  shouldForwardProp: e
+})`
+  display: block;
+
+  font-size: ${({ $size: t, theme: o }) => t === a.Large ? o.typography.pxToRem(16) : o.typography.body1.fontSize};
+  text-align: center;
+
+  ${({ theme: t }) => t.breakpoints.down("sm")} {
+    font-size: ${({ theme: t }) => t.typography.body1.fontSize};
+    color: ${({ theme: t }) => t.palette.text.secondary};
+  }
+`, y = n("footer")`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ theme: t }) => t.spacing(2)};
+  justify-content: center;
+
+  color: ${({ theme: t }) => t.palette.grey[900]};
+
+  ${({ theme: t }) => t.breakpoints.down("sm")} {
+    flex-direction: column;
+    gap: ${({ theme: t }) => t.spacing(3)};
+
+    margin-top: auto;
+  }
+`;
+export {
+  m as Description,
+  y as Footer,
+  l as InnerContainer,
+  d as Title,
+  g as Wrapper
+};

package/lib/components/Popover/Popover.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../_virtual/jsx-runtime.cjs"),p=require("@mui/material"),a=require("../../hooks/useViewportType/useViewportType.cjs");require("react");const j=require("../BottomDrawer/BottomDrawer.cjs"),n=({children:e,onClose:r,open:t,title:i,...u})=>{const{isMobile:s}=a.useViewportType();return s?o.j.jsx(j.BottomDrawer,{title:i,onClose:r,open:t,children:e}):o.j.jsx(p.Popover,{open:t,onClose:r,...u,children:e})};exports.Popover=n;

package/lib/components/Popover/Popover.d.ts

@@ -0,0 +1,9 @@
+import { PopoverProps as MuiPopoverProps } from '@mui/material';
+import { WithoutEmotionSpecific } from '../types';
+export type PopoverProps = WithoutEmotionSpecific<MuiPopoverProps> & {
+    /**
+     * Заголовок для отображения в мобильной версии
+     */
+    title?: string;
+};
+export declare const Popover: ({ children, onClose, open, title, ...restProps }: PopoverProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Popover/Popover.mjs

@@ -0,0 +1,18 @@
+import { j as m } from "../../_virtual/jsx-runtime.mjs";
+import { Popover as s } from "@mui/material";
+import { useViewportType as f } from "../../hooks/useViewportType/useViewportType.mjs";
+import "react";
+import { BottomDrawer as x } from "../BottomDrawer/BottomDrawer.mjs";
+const n = ({
+  children: o,
+  onClose: r,
+  open: t,
+  title: p,
+  ...e
+}) => {
+  const { isMobile: i } = f();
+  return i ? /* @__PURE__ */ m.jsx(x, { title: p, onClose: r, open: t, children: o }) : /* @__PURE__ */ m.jsx(s, { open: t, onClose: r, ...e, children: o });
+};
+export {
+  n as Popover
+};

package/lib/components/ProgressBar/ProgressBar.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../../_virtual/jsx-runtime.cjs"),s=require("@mui/material"),i=({className:e,value:r})=>{const t=Math.max(0,Math.min(r,100));return a.j.jsx(s.LinearProgress,{className:e,variant:"determinate",value:t})};exports.ProgressBar=i;

package/lib/components/ProgressBar/ProgressBar.mjs

@@ -0,0 +1,16 @@
+import { j as e } from "../../_virtual/jsx-runtime.mjs";
+import { LinearProgress as o } from "@mui/material";
+const n = ({ className: r, value: t }) => {
+  const a = Math.max(0, Math.min(t, 100));
+  return /* @__PURE__ */ e.jsx(
+    o,
+    {
+      className: r,
+      variant: "determinate",
+      value: a
+    }
+  );
+};
+export {
+  n as ProgressBar
+};

package/lib/components/Radio/Icon/Icon.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../_virtual/jsx-runtime.cjs"),i=require("@mui/material"),c=require("../constants.cjs"),s=({...r})=>e.j.jsxs(i.SvgIcon,{viewBox:"0 0 24 24",...r,children:[e.j.jsx("circle",{cx:"12",cy:"12",r:"10",className:c.DEFAULT_ICON_CLASSES.outerCircle}),e.j.jsx("circle",{cx:"12",cy:"12",r:"8",className:c.DEFAULT_ICON_CLASSES.innerCircle})]}),l=({...r})=>e.j.jsxs(i.SvgIcon,{viewBox:"0 0 24 24",...r,children:[e.j.jsx("circle",{cx:"12",cy:"12",r:"10",className:c.CHECKED_ICON_CLASSES.outerCircle}),e.j.jsx("circle",{cx:"12",cy:"12",r:"4",className:c.CHECKED_ICON_CLASSES.innerCircle})]});exports.CheckedCircleIcon=l;exports.DefaultIcon=s;

package/lib/components/Radio/Icon/Icon.mjs

@@ -0,0 +1,46 @@
+import { j as c } from "../../../_virtual/jsx-runtime.mjs";
+import { SvgIcon as i } from "@mui/material";
+import { DEFAULT_ICON_CLASSES as e, CHECKED_ICON_CLASSES as s } from "../constants.mjs";
+const n = ({ ...r }) => /* @__PURE__ */ c.jsxs(i, { viewBox: "0 0 24 24", ...r, children: [
+  /* @__PURE__ */ c.jsx(
+    "circle",
+    {
+      cx: "12",
+      cy: "12",
+      r: "10",
+      className: e.outerCircle
+    }
+  ),
+  /* @__PURE__ */ c.jsx(
+    "circle",
+    {
+      cx: "12",
+      cy: "12",
+      r: "8",
+      className: e.innerCircle
+    }
+  )
+] }), C = ({ ...r }) => /* @__PURE__ */ c.jsxs(i, { viewBox: "0 0 24 24", ...r, children: [
+  /* @__PURE__ */ c.jsx(
+    "circle",
+    {
+      cx: "12",
+      cy: "12",
+      r: "10",
+      className: s.outerCircle
+    }
+  ),
+  /* @__PURE__ */ c.jsx(
+    "circle",
+    {
+      cx: "12",
+      cy: "12",
+      r: "4",
+      className: s.innerCircle
+    }
+  )
+] });
+export {
+  C as CheckedCircleIcon,
+  n as DefaultIcon
+};

package/lib/components/Radio/Radio.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.cjs"),r=require("./Icon/Icon.cjs"),s=require("./styles.cjs"),c=({icon:t=e.j.jsx(r.DefaultIcon,{}),checkedIcon:o=e.j.jsx(r.CheckedCircleIcon,{}),...i})=>e.j.jsx(s.StyledRadio,{icon:t,checkedIcon:o,...i});exports.Radio=c;

package/lib/components/Radio/Radio.d.ts

@@ -0,0 +1,9 @@
+import { RadioProps as MuiRadioProps } from '@mui/material';
+import { WithoutEmotionSpecific } from '../types';
+export type RadioProps = Omit<WithoutEmotionSpecific<MuiRadioProps>, 'size' | 'color'> & {
+    /**
+     * Флаг для применения error стилей.
+     */
+    isError?: boolean;
+};
+export declare const Radio: ({ icon, checkedIcon, ...props }: RadioProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Radio/Radio.mjs

@@ -0,0 +1,11 @@
+import { j as o } from "../../_virtual/jsx-runtime.mjs";
+import { DefaultIcon as i, CheckedCircleIcon as m } from "./Icon/Icon.mjs";
+import { StyledRadio as s } from "./styles.mjs";
+const n = ({
+  icon: r = /* @__PURE__ */ o.jsx(i, {}),
+  checkedIcon: t = /* @__PURE__ */ o.jsx(m, {}),
+  ...e
+}) => /* @__PURE__ */ o.jsx(s, { icon: r, checkedIcon: t, ...e });
+export {
+  n as Radio
+};

package/lib/components/Radio/constants.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={innerCircle:"RadioIcon-innerCircle",outerCircle:"RadioIcon-outerCircle"},C={innerCircle:"RadioCheckedIcon-innerCircle",outerCircle:"RadioCheckedIcon-outerCircle"};exports.CHECKED_ICON_CLASSES=C;exports.DEFAULT_ICON_CLASSES=e;

package/lib/components/Radio/constants.mjs

@@ -0,0 +1,11 @@
+const e = {
+  innerCircle: "RadioIcon-innerCircle",
+  outerCircle: "RadioIcon-outerCircle"
+}, r = {
+  innerCircle: "RadioCheckedIcon-innerCircle",
+  outerCircle: "RadioCheckedIcon-outerCircle"
+};
+export {
+  r as CHECKED_ICON_CLASSES,
+  e as DEFAULT_ICON_CLASSES
+};

package/lib/components/Radio/styles.cjs

@@ -0,0 +1,57 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@mui/material"),r=require("./constants.cjs"),l=e=>o.css`
+  &.MuiRadio-root:not(.Mui-disabled) {
+    color: ${e.palette.red[800]};
+
+    &:hover {
+      & > svg {
+        color: ${e.palette.red[700]};
+      }
+    }
+  }
+`,i=o.styled(o.Radio,{shouldForwardProp:e=>e!=="isError"})`
+  padding: 5px;
+
+  color: ${({theme:e})=>e.palette.grey[300]};
+
+  border-radius: unset;
+
+  & > svg > .${r.DEFAULT_ICON_CLASSES.innerCircle} {
+    fill: ${({theme:e})=>e.palette.common.white};
+  }
+
+  &:hover {
+    background: none;
+
+    & > svg > .${r.DEFAULT_ICON_CLASSES.innerCircle} {
+      fill: ${({theme:e})=>e.palette.grey[100]};
+    }
+  }
+
+  &.Mui-disabled:not(.Mui-checked) {
+    color: ${({theme:e})=>e.palette.grey[200]};
+
+    & > svg > .${r.DEFAULT_ICON_CLASSES.innerCircle} {
+      fill: ${({theme:e})=>e.palette.grey[200]};
+    }
+  }
+
+  &.Mui-checked {
+    color: ${({theme:e})=>e.palette.primary.main};
+
+    &:hover {
+      & > svg {
+        color: ${({theme:e})=>e.palette.primary[700]};
+      }
+    }
+
+    &.Mui-disabled {
+      color: ${({theme:e})=>e.palette.grey[400]};
+    }
+
+    & > svg > .${r.CHECKED_ICON_CLASSES.innerCircle} {
+      fill: ${({theme:e})=>e.palette.common.white};
+    }
+  }
+
+  ${({isError:e,theme:t})=>e&&l(t)}
+`;exports.StyledRadio=i;

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

@@ -0,0 +1,5 @@
+type StyledRadioProps = {
+    isError?: boolean;
+};
+export declare const StyledRadio: import('@emotion/styled').StyledComponent<import('@mui/material').RadioProps & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & StyledRadioProps, {}, {}>;
+export {};

package/lib/components/Radio/styles.mjs

@@ -0,0 +1,64 @@
+import { styled as l, Radio as t, css as i } from "@mui/material";
+import { DEFAULT_ICON_CLASSES as r, CHECKED_ICON_CLASSES as a } from "./constants.mjs";
+const d = (e) => i`
+  &.MuiRadio-root:not(.Mui-disabled) {
+    color: ${e.palette.red[800]};
+
+    &:hover {
+      & > svg {
+        color: ${e.palette.red[700]};
+      }
+    }
+  }
+`, p = l(t, {
+  shouldForwardProp: (e) => e !== "isError"
+})`
+  padding: 5px;
+
+  color: ${({ theme: e }) => e.palette.grey[300]};
+
+  border-radius: unset;
+
+  & > svg > .${r.innerCircle} {
+    fill: ${({ theme: e }) => e.palette.common.white};
+  }
+
+  &:hover {
+    background: none;
+
+    & > svg > .${r.innerCircle} {
+      fill: ${({ theme: e }) => e.palette.grey[100]};
+    }
+  }
+
+  &.Mui-disabled:not(.Mui-checked) {
+    color: ${({ theme: e }) => e.palette.grey[200]};
+
+    & > svg > .${r.innerCircle} {
+      fill: ${({ theme: e }) => e.palette.grey[200]};
+    }
+  }
+
+  &.Mui-checked {
+    color: ${({ theme: e }) => e.palette.primary.main};
+
+    &:hover {
+      & > svg {
+        color: ${({ theme: e }) => e.palette.primary[700]};
+      }
+    }
+
+    &.Mui-disabled {
+      color: ${({ theme: e }) => e.palette.grey[400]};
+    }
+
+    & > svg > .${a.innerCircle} {
+      fill: ${({ theme: e }) => e.palette.common.white};
+    }
+  }
+
+  ${({ isError: e, theme: o }) => e && d(o)}
+`;
+export {
+  p as StyledRadio
+};

package/lib/components/RadioField/RadioField.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.cjs"),a=require("../Radio/Radio.cjs"),u=require("../Tooltip/Tooltip.cjs"),d=require("./styles.cjs"),j=({id:o,disabled:t,label:r,isError:i,disabledReason:l,formControlLabelProps:n,...s})=>e.j.jsx(u.Tooltip,{title:t&&l,placement:"bottom-start",withoutContainer:!1,children:e.j.jsx(d.StyledFormControlLabel,{...n,label:r,control:e.j.jsx(a.Radio,{...s,isError:i}),disabled:t})},o);exports.RadioField=j;

package/lib/components/RadioField/RadioField.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { FormControlLabelProps } from '../FormControlLabel';
+import { RadioProps } from '../Radio';
+export type RadioFieldProps = Omit<RadioProps, 'title' | 'LinkComponent'> & {
+    /**
+     * Радио лейбл
+     */
+    label: ReactNode;
+    /**
+     * Пропсы для FormControlLabel. Дают возможность конфигурации лейбла
+     */
+    formControlLabelProps?: Omit<FormControlLabelProps, 'control' | 'label'>;
+    /**
+     * Флаг состояния ошибки
+     */
+    isError?: boolean;
+    /**
+     * Причина дизейбла поля. Переданный текст будет отображаться в тултипе при наведении на задизейбленный radio-элемент
+     */
+    disabledReason?: ReactNode;
+};
+/**
+ * Составной компонент radio. Содержит label, tooltip и т.п.
+ */
+export declare const RadioField: ({ id, disabled, label, isError, disabledReason, formControlLabelProps, ...restFieldProps }: RadioFieldProps) => import("react/jsx-runtime").JSX.Element;