@sberbusiness/triplex-next 0.17.0 → 0.18.0

package/helpers/less/colors.less

@@ -0,0 +1,110 @@
+@triplex-next-ColorBrand-0: #1F3336;
+@triplex-next-ColorBrand-10: #0B3A3C;
+@triplex-next-ColorBrand-20: #006063;
+@triplex-next-ColorBrand-30: #007777;
+@triplex-next-ColorBrand-40: #008985;
+@triplex-next-ColorBrand-50: #21A19A;
+@triplex-next-ColorBrand-60: #19BDB0;
+@triplex-next-ColorBrand-70: #4BD9CF;
+@triplex-next-ColorBrand-80: #71ECDC;
+@triplex-next-ColorBrand-90: #A8F5E9;
+@triplex-next-ColorBrand-100: #E3FFFA;
+@triplex-next-ColorDarkNeutralAlpha-0: rgba(31, 31, 34, 1);
+@triplex-next-ColorDarkNeutralAlpha-10: rgba(31, 31, 34, .95);
+@triplex-next-ColorDarkNeutralAlpha-20: rgba(31, 31, 34, .85);
+@triplex-next-ColorDarkNeutralAlpha-30: rgba(31, 31, 34, .75);
+@triplex-next-ColorDarkNeutralAlpha-40: rgba(31, 31, 34, .65);
+@triplex-next-ColorDarkNeutralAlpha-50: rgba(31, 31, 34, .55);
+@triplex-next-ColorDarkNeutralAlpha-60: rgba(31, 31, 34, .45);
+@triplex-next-ColorDarkNeutralAlpha-70: rgba(31, 31, 34, .35);
+@triplex-next-ColorDarkNeutralAlpha-80: rgba(31, 31, 34, .25);
+@triplex-next-ColorDarkNeutralAlpha-90: rgba(31, 31, 34, .15);
+@triplex-next-ColorDarkNeutralAlpha-100: rgba(31, 31, 34, .05);
+@triplex-next-ColorDarkNeutral-0: #000000;
+@triplex-next-ColorDarkNeutral-10: #171719;
+@triplex-next-ColorDarkNeutral-20: #1B1B1D;
+@triplex-next-ColorDarkNeutral-30: #1F1F22;
+@triplex-next-ColorDarkNeutral-40: #262629;
+@triplex-next-ColorDarkNeutral-50: #2D2D30;
+@triplex-next-ColorDarkNeutral-60: #343437;
+@triplex-next-ColorDarkNeutral-70: #3B3B3E;
+@triplex-next-ColorDarkNeutral-80: #424245;
+@triplex-next-ColorDarkNeutral-90: #49494C;
+@triplex-next-ColorDarkNeutral-100: #4F4F52;
+@triplex-next-ColorError-0: #443139;
+@triplex-next-ColorError-10: #4E3741;
+@triplex-next-ColorError-20: #A90024;
+@triplex-next-ColorError-30: #BD002C;
+@triplex-next-ColorError-40: #D10032;
+@triplex-next-ColorError-50: #E60037;
+@triplex-next-ColorError-60: #F80C45;
+@triplex-next-ColorError-70: #FF5571;
+@triplex-next-ColorError-80: #FFB1C1;
+@triplex-next-ColorError-90: #FCE0E6;
+@triplex-next-ColorError-100: #FFF0F3;
+@triplex-next-ColorInfo-0: #313749;
+@triplex-next-ColorInfo-10: #2E3A52;
+@triplex-next-ColorInfo-20: #0A43B0;
+@triplex-next-ColorInfo-30: #124FC2;
+@triplex-next-ColorInfo-40: #0E57CC;
+@triplex-next-ColorInfo-50: #1371E4;
+@triplex-next-ColorInfo-60: #1297FE;
+@triplex-next-ColorInfo-70: #66BEFF;
+@triplex-next-ColorInfo-80: #8DD2FF;
+@triplex-next-ColorInfo-90: #B8E6FF;
+@triplex-next-ColorInfo-100: #E3F6FF;
+@triplex-next-ColorNeutralAlpha-0: rgba(255, 255, 255, 1);
+@triplex-next-ColorNeutralAlpha-10: rgba(255, 255, 255, .95);
+@triplex-next-ColorNeutralAlpha-20: rgba(255, 255, 255, .85);
+@triplex-next-ColorNeutralAlpha-30: rgba(255, 255, 255, .75);
+@triplex-next-ColorNeutralAlpha-40: rgba(255, 255, 255, .65);
+@triplex-next-ColorNeutralAlpha-50: rgba(255, 255, 255, .55);
+@triplex-next-ColorNeutralAlpha-60: rgba(255, 255, 255, .45);
+@triplex-next-ColorNeutralAlpha-70: rgba(255, 255, 255, .35);
+@triplex-next-ColorNeutralAlpha-80: rgba(255, 255, 255, .25);
+@triplex-next-ColorNeutralAlpha-90: rgba(255, 255, 255, .15);
+@triplex-next-ColorNeutralAlpha-100: rgba(255, 255, 255, .05);
+@triplex-next-ColorNeutral-0: #CBCFD7;
+@triplex-next-ColorNeutral-10: #D1D4DC;
+@triplex-next-ColorNeutral-20: #D6D9E0;
+@triplex-next-ColorNeutral-30: #DCDFE4;
+@triplex-next-ColorNeutral-40: #DFE2E7;
+@triplex-next-ColorNeutral-50: #E3E6EA;
+@triplex-next-ColorNeutral-60: #E7E9EE;
+@triplex-next-ColorNeutral-70: #EAEDF1;
+@triplex-next-ColorNeutral-80: #EEF0F4;
+@triplex-next-ColorNeutral-90: #F2F4F7;
+@triplex-next-ColorNeutral-100: #FFFFFF;
+@triplex-next-ColorSuccess-0: #28433E;
+@triplex-next-ColorSuccess-10: #2A4C45;
+@triplex-next-ColorSuccess-20: #00624C;
+@triplex-next-ColorSuccess-30: #007353;
+@triplex-next-ColorSuccess-40: #008B5C;
+@triplex-next-ColorSuccess-50: #00C075;
+@triplex-next-ColorSuccess-60: #00D67D;
+@triplex-next-ColorSuccess-70: #3AF299;
+@triplex-next-ColorSuccess-80: #8AFFB8;
+@triplex-next-ColorSuccess-90: #B8FFD4;
+@triplex-next-ColorSuccess-100: #E1FFEB;
+@triplex-next-ColorSystem-0: #373C49;
+@triplex-next-ColorSystem-10: #384156;
+@triplex-next-ColorSystem-20: #47526D;
+@triplex-next-ColorSystem-30: #57637F;
+@triplex-next-ColorSystem-40: #697591;
+@triplex-next-ColorSystem-50: #8291B3;
+@triplex-next-ColorSystem-60: #95A3C1;
+@triplex-next-ColorSystem-70: #A9B6D0;
+@triplex-next-ColorSystem-80: #BFCADF;
+@triplex-next-ColorSystem-90: #D6DEED;
+@triplex-next-ColorSystem-100: #EEF3FC;
+@triplex-next-ColorWarning-0: #463734;
+@triplex-next-ColorWarning-10: #4F3E3B;
+@triplex-next-ColorWarning-20: #E03400;
+@triplex-next-ColorWarning-30: #E63D00;
+@triplex-next-ColorWarning-40: #EF4C01;
+@triplex-next-ColorWarning-50: #FD6508;
+@triplex-next-ColorWarning-60: #FF7A17;
+@triplex-next-ColorWarning-70: #FFB13B;
+@triplex-next-ColorWarning-80: #FFD169;
+@triplex-next-ColorWarning-90: #FCEAC7;
+@triplex-next-ColorWarning-100: #FFF4DB;

package/index.d.ts

@@ -800,7 +800,7 @@ export declare enum EOrderDirection {
     DESC = "desc"
 }
 
-declare enum EOverlayDirection {
+export declare enum EOverlayDirection {
     BOTTOM = "bottom",
     LEFT = "left",
     RIGHT = "right",
@@ -3219,7 +3219,7 @@ export declare interface IOrderedListItemProps extends default_2.LiHTMLAttribute
 export declare interface IOrderedListProps extends default_2.OlHTMLAttributes<HTMLOListElement> {
 }
 
-declare interface IOverlayBaseProps {
+export declare interface IOverlayBaseProps {
     children: (props: IOverlayChildrenProvideProps) => default_2.ReactElement;
     /**
      * Расположение панели с контентом.
@@ -3254,7 +3254,7 @@ declare interface IOverlayBaseProps {
 /**
  * Свойства, передаваемые в render-фцнкцию панели оверлея.
  */
-declare interface IOverlayChildrenProvideProps extends Pick<IOverlayBaseProps, 'direction' | 'opened' | 'setOpened'> {
+export declare interface IOverlayChildrenProvideProps extends Pick<IOverlayBaseProps, "direction" | "opened" | "setOpened"> {
     /**
      * Оверлей закрывается в текущий момент.
      */
@@ -3273,7 +3273,19 @@ declare interface IOverlayChildrenProvideProps extends Pick<IOverlayBaseProps, '
     setOpening: (opening: boolean) => void;
 }
 
-declare interface IOverlayProps extends IOverlayBaseProps, Omit<default_2.HTMLAttributes<HTMLDivElement>, 'children'> {
+export declare interface IOverlayFC extends default_2.FC<IOverlayProps> {
+    Mask: typeof OverlayMask;
+    Panel: typeof OverlayPanel;
+}
+
+export declare interface IOverlayMaskProps extends Pick<IOverlayChildrenProvideProps, "opened">, default_2.HTMLAttributes<HTMLDivElement> {
+}
+
+/** Свойства компонента OverlayPanel. */
+export declare interface IOverlayPanelProps extends default_2.HTMLAttributes<HTMLDivElement>, IOverlayChildrenProvideProps {
+}
+
+export declare interface IOverlayProps extends IOverlayBaseProps, Omit<default_2.HTMLAttributes<HTMLDivElement>, 'children'> {
     /**
      * Оврелей с фиксированным позиционированием на всю страницу, иначе с абсолютным поверх родителя.
      */
@@ -4845,6 +4857,24 @@ export declare const OrderedList: default_2.ForwardRefExoticComponent<IOrderedLi
 /** Элемент нумерованного списка. */
 export declare const OrderedListItem: default_2.ForwardRefExoticComponent<IOrderedListItemProps & default_2.RefAttributes<HTMLLIElement>>;
 
+/**
+ * Оверлей элемента/страницы с выезжающей панелью.
+ */
+export declare const Overlay: IOverlayFC;
+
+/**
+ * Базовый функциональный компонент оверлея.
+ */
+export declare const OverlayBase: default_2.FC<IOverlayBaseProps>;
+
+/**
+ * Область с полупрозрачным фоном между контейнером оверлея и OverlayPanel.
+ */
+export declare const OverlayMask: default_2.ForwardRefExoticComponent<IOverlayMaskProps & default_2.RefAttributes<HTMLDivElement>>;
+
+/** Выезжающая с контентом панель оверлея. */
+export declare const OverlayPanel: default_2.ForwardRefExoticComponent<IOverlayPanelProps & default_2.RefAttributes<HTMLDivElement>>;
+
 /** Страница. Может содержать только Body, Header и Footer. */
 export declare const Page: default_2.ForwardRefExoticComponent<IPageProps & default_2.RefAttributes<HTMLDivElement>> & {
     Body: default_2.ForwardRefExoticComponent<(IBodyPageTypeFirstProps | IBodyPageTypeSecondProps) & default_2.RefAttributes<HTMLDivElement>>;