@alfalab/core-components 41.15.0 → 41.16.0

package/underlay/cssm/index.module.css

@@ -83,10 +83,13 @@
     --shadow-xl-hard-up: 0 0 32px rgba(0, 0, 0, 0.16), 0 -16px 32px rgba(0, 0, 0, 0.32),
         0 -16px 32px rgba(0, 0, 0, 0.16);
 } :root {
+    --border-radius-xs: 2px;
+    --border-radius-s: 4px;
     --border-radius-m: 8px;
     --border-radius-l: 12px;
     --border-radius-xl: 16px;
     --border-radius-xxl: 20px;
+    --border-radius-3xl: 24px;
 } :root {
     --gap-3xs: 2px;
     --gap-2xs: 4px;
@@ -98,11 +101,18 @@
     --gap-2xl: 32px;
     --gap-3xl: 40px;
     --gap-4xl: 48px;
+    --gap-5xl: 64px;
+    --gap-6xl: 72px;
 } :root {
 } :root {
 } .component {
     display: flex;
     box-sizing: border-box;
+} .content {
+    display: flex;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
 } .overflowHide {
     overflow: hidden;
 } .background-accent {
@@ -151,84 +161,156 @@
             background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
         } .padding-top-3xs {
         padding-top: var(--gap-3xs);
-    } .padding-top-2xs {
-        padding-top: var(--gap-2xs);
-    } .padding-top-xs {
-        padding-top: var(--gap-xs);
-    } .padding-top-s {
-        padding-top: var(--gap-s);
-    } .padding-top-m {
-        padding-top: var(--gap-m);
-    } .padding-top-l {
-        padding-top: var(--gap-l);
-    } .padding-top-xl {
-        padding-top: var(--gap-xl);
-    } .padding-top-2xl {
-        padding-top: var(--gap-2xl);
-    } .padding-top-3xl {
-        padding-top: var(--gap-3xl);
-    } .padding-top-4xl {
-        padding-top: var(--gap-4xl);
     } .padding-right-3xs {
         padding-right: var(--gap-3xs);
-    } .padding-right-2xs {
-        padding-right: var(--gap-2xs);
-    } .padding-right-xs {
-        padding-right: var(--gap-xs);
-    } .padding-right-s {
-        padding-right: var(--gap-s);
-    } .padding-right-m {
-        padding-right: var(--gap-m);
-    } .padding-right-l {
-        padding-right: var(--gap-l);
-    } .padding-right-xl {
-        padding-right: var(--gap-xl);
-    } .padding-right-2xl {
-        padding-right: var(--gap-2xl);
-    } .padding-right-3xl {
-        padding-right: var(--gap-3xl);
-    } .padding-right-4xl {
-        padding-right: var(--gap-4xl);
     } .padding-bottom-3xs {
         padding-bottom: var(--gap-3xs);
-    } .padding-bottom-2xs {
-        padding-bottom: var(--gap-2xs);
-    } .padding-bottom-xs {
-        padding-bottom: var(--gap-xs);
-    } .padding-bottom-s {
-        padding-bottom: var(--gap-s);
-    } .padding-bottom-m {
-        padding-bottom: var(--gap-m);
-    } .padding-bottom-l {
-        padding-bottom: var(--gap-l);
-    } .padding-bottom-xl {
-        padding-bottom: var(--gap-xl);
-    } .padding-bottom-2xl {
-        padding-bottom: var(--gap-2xl);
-    } .padding-bottom-3xl {
-        padding-bottom: var(--gap-3xl);
-    } .padding-bottom-4xl {
-        padding-bottom: var(--gap-4xl);
     } .padding-left-3xs {
         padding-left: var(--gap-3xs);
+    } .padding-top-2xs {
+        padding-top: var(--gap-2xs);
+    } .padding-right-2xs {
+        padding-right: var(--gap-2xs);
+    } .padding-bottom-2xs {
+        padding-bottom: var(--gap-2xs);
     } .padding-left-2xs {
         padding-left: var(--gap-2xs);
+    } .padding-top-xs {
+        padding-top: var(--gap-xs);
+    } .padding-right-xs {
+        padding-right: var(--gap-xs);
+    } .padding-bottom-xs {
+        padding-bottom: var(--gap-xs);
     } .padding-left-xs {
         padding-left: var(--gap-xs);
+    } .padding-top-s {
+        padding-top: var(--gap-s);
+    } .padding-right-s {
+        padding-right: var(--gap-s);
+    } .padding-bottom-s {
+        padding-bottom: var(--gap-s);
     } .padding-left-s {
         padding-left: var(--gap-s);
+    } .padding-top-m {
+        padding-top: var(--gap-m);
+    } .padding-right-m {
+        padding-right: var(--gap-m);
+    } .padding-bottom-m {
+        padding-bottom: var(--gap-m);
     } .padding-left-m {
         padding-left: var(--gap-m);
+    } .padding-top-l {
+        padding-top: var(--gap-l);
+    } .padding-right-l {
+        padding-right: var(--gap-l);
+    } .padding-bottom-l {
+        padding-bottom: var(--gap-l);
     } .padding-left-l {
         padding-left: var(--gap-l);
+    } .padding-top-xl {
+        padding-top: var(--gap-xl);
+    } .padding-right-xl {
+        padding-right: var(--gap-xl);
+    } .padding-bottom-xl {
+        padding-bottom: var(--gap-xl);
     } .padding-left-xl {
         padding-left: var(--gap-xl);
+    } .padding-top-2xl {
+        padding-top: var(--gap-2xl);
+    } .padding-right-2xl {
+        padding-right: var(--gap-2xl);
+    } .padding-bottom-2xl {
+        padding-bottom: var(--gap-2xl);
     } .padding-left-2xl {
         padding-left: var(--gap-2xl);
+    } .padding-top-3xl {
+        padding-top: var(--gap-3xl);
+    } .padding-right-3xl {
+        padding-right: var(--gap-3xl);
+    } .padding-bottom-3xl {
+        padding-bottom: var(--gap-3xl);
     } .padding-left-3xl {
         padding-left: var(--gap-3xl);
+    } .padding-top-4xl {
+        padding-top: var(--gap-4xl);
+    } .padding-right-4xl {
+        padding-right: var(--gap-4xl);
+    } .padding-bottom-4xl {
+        padding-bottom: var(--gap-4xl);
     } .padding-left-4xl {
         padding-left: var(--gap-4xl);
+    } .padding-top-5xl {
+        padding-top: var(--gap-5xl);
+    } .padding-right-5xl {
+        padding-right: var(--gap-5xl);
+    } .padding-bottom-5xl {
+        padding-bottom: var(--gap-5xl);
+    } .padding-left-5xl {
+        padding-left: var(--gap-5xl);
+    } .padding-top-6xl {
+        padding-top: var(--gap-6xl);
+    } .padding-right-6xl {
+        padding-right: var(--gap-6xl);
+    } .padding-bottom-6xl {
+        padding-bottom: var(--gap-6xl);
+    } .padding-left-6xl {
+        padding-left: var(--gap-6xl);
+    } .border-bottom-left-xs {
+        border-bottom-left-radius: var(--border-radius-xs);
+    } .border-bottom-right-xs {
+        border-bottom-right-radius: var(--border-radius-xs);
+    } .border-top-left-xs {
+        border-top-left-radius: var(--border-radius-xs);
+    } .border-top-right-xs {
+        border-top-right-radius: var(--border-radius-xs);
+    } .border-bottom-left-s {
+        border-bottom-left-radius: var(--border-radius-s);
+    } .border-bottom-right-s {
+        border-bottom-right-radius: var(--border-radius-s);
+    } .border-top-left-s {
+        border-top-left-radius: var(--border-radius-s);
+    } .border-top-right-s {
+        border-top-right-radius: var(--border-radius-s);
+    } .border-bottom-left-m {
+        border-bottom-left-radius: var(--border-radius-m);
+    } .border-bottom-right-m {
+        border-bottom-right-radius: var(--border-radius-m);
+    } .border-top-left-m {
+        border-top-left-radius: var(--border-radius-m);
+    } .border-top-right-m {
+        border-top-right-radius: var(--border-radius-m);
+    } .border-bottom-left-l {
+        border-bottom-left-radius: var(--border-radius-l);
+    } .border-bottom-right-l {
+        border-bottom-right-radius: var(--border-radius-l);
+    } .border-top-left-l {
+        border-top-left-radius: var(--border-radius-l);
+    } .border-top-right-l {
+        border-top-right-radius: var(--border-radius-l);
+    } .border-bottom-left-xl {
+        border-bottom-left-radius: var(--border-radius-xl);
+    } .border-bottom-right-xl {
+        border-bottom-right-radius: var(--border-radius-xl);
+    } .border-top-left-xl {
+        border-top-left-radius: var(--border-radius-xl);
+    } .border-top-right-xl {
+        border-top-right-radius: var(--border-radius-xl);
+    } .border-bottom-left-xxl {
+        border-bottom-left-radius: var(--border-radius-xxl);
+    } .border-bottom-right-xxl {
+        border-bottom-right-radius: var(--border-radius-xxl);
+    } .border-top-left-xxl {
+        border-top-left-radius: var(--border-radius-xxl);
+    } .border-top-right-xxl {
+        border-top-right-radius: var(--border-radius-xxl);
+    } .border-bottom-left-3xl {
+        border-bottom-left-radius: var(--border-radius-3xl);
+    } .border-bottom-right-3xl {
+        border-bottom-right-radius: var(--border-radius-3xl);
+    } .border-top-left-3xl {
+        border-top-left-radius: var(--border-radius-3xl);
+    } .border-top-right-3xl {
+        border-top-right-radius: var(--border-radius-3xl);
     } .shadow-xs {
         box-shadow: var(--shadow-xs);
     } .shadow-s {
@@ -309,6 +391,10 @@
         border-color: var(--color-light-specialbg-tertiary-transparent);
     } .border-color-specialbg-tertiary-transparent-inverted {
         border-color: var(--color-light-specialbg-tertiary-transparent-inverted);
+    } .border-radius-xs {
+        border-radius: var(--border-radius-xs);
+    } .border-radius-s {
+        border-radius: var(--border-radius-s);
     } .border-radius-m {
         border-radius: var(--border-radius-m);
     } .border-radius-l {
@@ -317,6 +403,8 @@
         border-radius: var(--border-radius-xl);
     } .border-radius-xxl {
         border-radius: var(--border-radius-xxl);
+    } .border-radius-3xl {
+        border-radius: var(--border-radius-3xl);
     } /* prettier-ignore */ .border-width-1 {
         border-width: 1px;
         border-style: solid;
@@ -326,4 +414,25 @@
     } .border-width-4 {
         border-width: 4px;
         border-style: solid;
-    }
+    } .direction-vertical {
+    flex-direction: column;
+} .direction-horizontal {
+    flex-direction: row;
+} .align-start {
+    align-items: flex-start;
+} .align-center {
+    align-items: center;
+} .align-end {
+    align-items: flex-end;
+} .align-fill {
+    align-items: stretch;
+} .justify-start {
+    justify-content: flex-start;
+} .justify-center {
+    justify-content: center;
+} .justify-end {
+    justify-content: flex-end;
+} .backgroundImage {
+    background-size: cover;
+    background-repeat: no-repeat;
+}

package/underlay/cssm/types.d.ts

@@ -1,34 +1,88 @@
 /// <reference types="react" />
 import React from 'react';
-type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
-type BorderColorType = "accent" | "key" | "key-inverted" | "link" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "underline" | "underline-inverted" | "graphic-attention" | "graphic-link" | "graphic-negative" | "graphic-positive" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
-type ShadowType = "shadow-xs" | "shadow-s" | "shadow-m" | "shadow-l" | "shadow-xl" | "shadow-xs-hard" | "shadow-s-hard" | "shadow-m-hard" | "shadow-l-hard" | "shadow-xl-hard" | "shadow-xs-up" | "shadow-s-up" | "shadow-m-up" | "shadow-l-up" | "shadow-xl-up" | "shadow-xs-hard-up" | "shadow-s-hard-up" | "shadow-m-hard-up" | "shadow-l-hard-up" | "shadow-xl-hard-up";
-type GapType = "3xs" | "2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl";
-type PaddingSize = Omit<GapType, '5xl' | '6xl' | '7xl' | '8xl'>;
+import { BorderColorType, GapType, ShadowType } from "./index-425c8522";
+type UnderlayPaddingSize = Exclude<GapType, '7xl' | '8xl'>;
+type UnderlayBorderRadius = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | '3xl';
+type BorderSizeType = 1 | 2 | 4;
 type PaddingType = {
-    top?: PaddingSize;
-    right?: PaddingSize;
-    bottom?: PaddingSize;
-    left?: PaddingSize;
+    top?: UnderlayPaddingSize;
+    right?: UnderlayPaddingSize;
+    bottom?: UnderlayPaddingSize;
+    left?: UnderlayPaddingSize;
+};
+type CornersRadiusType = {
+    bottomRight?: UnderlayBorderRadius;
+    bottomLeft?: UnderlayBorderRadius;
+    topRight?: UnderlayBorderRadius;
+    topLeft?: UnderlayBorderRadius;
+};
+type DimensionsType = {
+    width?: number | string;
+    height?: number | string;
+};
+type ContentPropsType = {
+    /**
+     * Ширина бордера у контента
+     */
+    borderSize?: BorderSizeType;
+    /**
+     * Цвет бордера у контента
+     */
+    borderColor?: BorderColorType;
+    /**
+     * Радиус бордера у контента
+     */
+    borderRadius?: UnderlayBorderRadius | CornersRadiusType;
+    /**
+     * Цвет фона у контента
+     */
+    backgroundColor?: string;
+    /**
+     * Ссылка на изображение для фона
+     */
+    backgroundImageURL?: string;
+    /**
+     * Тень у контента
+     */
+    shadow?: ShadowType;
+    /**
+     * Выравнивание контента внутри основного слота.
+     */
+    axis?: 'vertical' | 'horizontal';
+    /**
+     * Выравнивание объектов относительно друг-друга
+     */
+    alignment?: 'start' | 'end' | 'fill' | 'center';
+    /**
+     * Выравнивание контента
+     */
+    justifyContent?: 'start' | 'end' | 'center';
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
 };
-type BorderRadiusType = 'm' | 'l' | 'xl' | 'xxl';
 type UnderlayProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Размеры подложки
+     */
+    dimensions?: DimensionsType;
     /**
      * Внутренние отступы
      */
     padding?: PaddingType | string;
     /**
-     * Радиус
+     * Радиус бордера
      */
-    borderRadius?: BorderRadiusType;
+    borderRadius?: UnderlayBorderRadius | CornersRadiusType;
     /**
      * Цвет фона
      */
-    backgroundColor?: BackgroundColorType;
+    backgroundColor?: string;
     /**
      * Ширина бордера
      */
-    borderSize?: 1 | 2 | 4;
+    borderSize?: BorderSizeType;
     /**
      * Цвет бордера
      */
@@ -50,9 +104,13 @@ type UnderlayProps = React.HTMLAttributes<HTMLDivElement> & {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Пропсы для стилизации контента подложки
+     */
+    contentProps?: ContentPropsType;
     /**
      *  Содержимое подложки
      */
     children?: React.ReactNode;
 };
-export { UnderlayProps };
+export { UnderlayPaddingSize, UnderlayBorderRadius, BorderSizeType, CornersRadiusType, ContentPropsType, UnderlayProps };

package/underlay/cssm/utils/getBorderCorners.d.ts

@@ -0,0 +1,5 @@
+import { CornersRadiusType, UnderlayBorderRadius } from "../types";
+declare const getBorderCorners: (borderRadius: UnderlayBorderRadius | CornersRadiusType | undefined) => {
+    [x: string]: UnderlayBorderRadius | undefined;
+} | undefined;
+export { getBorderCorners };

package/underlay/cssm/utils/getBorderCorners.js

@@ -0,0 +1,27 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = require('../index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var getBorderCorners = function (borderRadius) {
+    var _a;
+    var bordersSize = typeof borderRadius === 'string'
+        ? {
+            bottomRight: borderRadius,
+            bottomLeft: borderRadius,
+            topRight: borderRadius,
+            topLeft: borderRadius,
+        }
+        : borderRadius;
+    return (bordersSize && (_a = {},
+        _a[styles__default.default["border-bottom-right-".concat(bordersSize.bottomRight)]] = bordersSize.bottomRight,
+        _a[styles__default.default["border-bottom-left-".concat(bordersSize.bottomLeft)]] = bordersSize.bottomLeft,
+        _a[styles__default.default["border-top-right-".concat(bordersSize.topRight)]] = bordersSize.topRight,
+        _a[styles__default.default["border-top-left-".concat(bordersSize.topLeft)]] = bordersSize.topLeft,
+        _a));
+};
+
+exports.getBorderCorners = getBorderCorners;

package/underlay/cssm/utils/getClasses.d.ts

@@ -0,0 +1,7 @@
+import { BorderColorType, ShadowType } from "../index-425c8522";
+import { BorderSizeType } from "../types";
+declare const isBackgroundToken: (token: string | undefined) => boolean | "" | undefined;
+declare const getClasses: (backgroundColor: string | undefined, borderColor: BorderColorType | undefined, borderSize: BorderSizeType | undefined, shadow: ShadowType | undefined) => {
+    [x: string]: boolean | "" | BorderColorType | ShadowType | BorderSizeType | undefined;
+};
+export { isBackgroundToken, getClasses };

package/underlay/cssm/utils/getClasses.js

@@ -0,0 +1,22 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var constants = require('../constants.js');
+var styles = require('../index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var isBackgroundToken = function (token) { return token && constants.BACKGROUND.includes(token); };
+var getClasses = function (backgroundColor, borderColor, borderSize, shadow) {
+    var _a;
+    return (_a = {},
+        _a[styles__default.default["background-".concat(backgroundColor)]] = isBackgroundToken(backgroundColor),
+        _a[styles__default.default["border-color-".concat(borderColor)]] = borderColor,
+        _a[styles__default.default["border-width-".concat(borderSize)]] = borderSize,
+        _a[styles__default.default["".concat(shadow)]] = shadow,
+        _a);
+};
+
+exports.getClasses = getClasses;
+exports.isBackgroundToken = isBackgroundToken;