@sima-land/ui-nucleons 44.2.9 → 45.0.0-alpha.0

package/bottom-bar/bottom-bar-util.scss

@@ -0,0 +1,20 @@
+@use '../clean-buttons/clean-buttons-util';
+
+$size-s-height: 64px;
+$size-m-height: 72px;
+$size-l-height: 80px;
+
+@mixin size-s {
+  --bottom-bar-height: #{$size-s-height};
+  @include clean-buttons-util.size-s;
+}
+
+@mixin size-m {
+  --bottom-bar-height: #{$size-m-height};
+  @include clean-buttons-util.size-m;
+}
+
+@mixin size-l {
+  --bottom-bar-height: #{$size-l-height};
+  @include clean-buttons-util.size-l;
+}

package/bottom-bar/bottom-bar.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { BottomBarProps, BottomBarSize } from './types';
+export declare const BOTTOM_BAR_HEIGHT: Record<BottomBarSize, number>;
+export declare const BOTTOM_BAR_DEFAULTS: {
+    readonly size: "m";
+};
+/**
+ * Боттом бар.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function BottomBar({ size, divided, children, className, 'data-testid': testId, ...rest }: BottomBarProps): JSX.Element;

package/bottom-bar/bottom-bar.js

@@ -0,0 +1,47 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BottomBar = exports.BOTTOM_BAR_DEFAULTS = exports.BOTTOM_BAR_HEIGHT = void 0;
+const react_1 = __importDefault(require("react"));
+const shapes_1 = require("../styling/shapes");
+const utils_1 = require("../clean-buttons/utils");
+const bind_1 = __importDefault(require("classnames/bind"));
+const bottom_bar_module_scss_1 = __importDefault(require("./bottom-bar.module.scss"));
+const cx = bind_1.default.bind(bottom_bar_module_scss_1.default);
+// некоторым компонентам нужно знать конкретную высоту, делаем единый источник
+exports.BOTTOM_BAR_HEIGHT = {
+    s: 64,
+    m: 72,
+    l: 80,
+};
+// некоторым компонентам нужно знать значения по умолчанию, делаем единый источник
+exports.BOTTOM_BAR_DEFAULTS = {
+    size: 'm',
+};
+/**
+ * Боттом бар.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function BottomBar(_a) {
+    var { size = exports.BOTTOM_BAR_DEFAULTS.size, divided, children, className, 'data-testid': testId = 'bottom-bar' } = _a, rest = __rest(_a, ["size", "divided", "children", "className", 'data-testid']);
+    const rooClassName = cx('root', size !== 'unset' && `size-${size}`, { divided }, shapes_1.MediumRounds.bottom, className);
+    return (
+    // чтобы CleanButton автоматически брали размер, соответствующий размеру BottomBar
+    react_1.default.createElement(utils_1.CleanGroupSizeContext.Provider, { value: size },
+        react_1.default.createElement("div", Object.assign({}, rest, { className: rooClassName, "data-testid": testId }), children)));
+}
+exports.BottomBar = BottomBar;

package/bottom-bar/bottom-bar.module.scss

@@ -1,3 +1,4 @@
+@use './bottom-bar-util';
 @import '../styling/borders.module';
 
 .root {
@@ -6,6 +7,7 @@
   position: relative;
   background: #fff;
   overflow: hidden;
+  height: var(--bottom-bar-height);
 
   // чтобы разделитель был над контентом делаем через pseudo-элемент
   &.divided::after {
@@ -19,3 +21,15 @@
     @extend .inner-border-top;
   }
 }
+
+.size-s {
+  @include bottom-bar-util.size-s;
+}
+
+.size-m {
+  @include bottom-bar-util.size-m;
+}
+
+.size-l {
+  @include bottom-bar-util.size-l;
+}

package/bottom-bar/index.d.ts

@@ -1,21 +1,2 @@
-import React from 'react';
-declare type BottomBarSize = 's' | 'm' | 'l';
-export interface BottomBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'size'> {
-    /** Размер (высота). */
-    size?: BottomBarSize;
-    /** Нужна ли разделительная черта сверху. */
-    divided?: boolean;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-}
-export declare const BOTTOM_BAR_HEIGHT: Record<BottomBarSize, number>;
-export declare const BOTTOM_BAR_DEFAULTS: {
-    readonly size: "m";
-};
-/**
- * Боттом бар.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const BottomBar: ({ size, divided, children, className, style, "data-testid": testId, ...rest }: BottomBarProps) => JSX.Element;
-export {};
+export { BottomBar, BOTTOM_BAR_DEFAULTS, BOTTOM_BAR_HEIGHT } from './bottom-bar';
+export { BottomBarSize, BottomBarProps } from './types';

package/bottom-bar/index.js

@@ -1,46 +1,7 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BottomBar = exports.BOTTOM_BAR_DEFAULTS = exports.BOTTOM_BAR_HEIGHT = void 0;
-const react_1 = __importDefault(require("react"));
-const bind_1 = __importDefault(require("classnames/bind"));
-const bottom_bar_module_scss_1 = __importDefault(require("./bottom-bar.module.scss"));
-const shapes_1 = require("../styling/shapes");
-const utils_1 = require("../clean-buttons/utils");
-const cx = bind_1.default.bind(bottom_bar_module_scss_1.default);
-// некоторым компонентам нужно знать конкретную высоту, делаем единый источник
-exports.BOTTOM_BAR_HEIGHT = {
-    s: 64,
-    m: 72,
-    l: 80,
-};
-// некоторым компонентам нужно знать значения по умолчанию, делаем единый источник
-exports.BOTTOM_BAR_DEFAULTS = {
-    size: 'm',
-};
-/**
- * Боттом бар.
- * @param props Свойства.
- * @return Элемент.
- */
-const BottomBar = (_a) => {
-    var { size = exports.BOTTOM_BAR_DEFAULTS.size, divided, children, className, style, 'data-testid': testId = 'bottom-bar' } = _a, rest = __rest(_a, ["size", "divided", "children", "className", "style", 'data-testid']);
-    return (
-    // чтобы Clean.Button автоматически брали размер, соответствующий размер BottomBar
-    react_1.default.createElement(utils_1.CleanGroupSizeContext.Provider, { value: size },
-        react_1.default.createElement("div", Object.assign({ className: cx('root', { divided }, shapes_1.MediumRounds.bottom, className), style: Object.assign(Object.assign({}, style), { height: `${exports.BOTTOM_BAR_HEIGHT[size]}px` }) }, rest, { "data-testid": testId }), children)));
-};
-exports.BottomBar = BottomBar;
+exports.BOTTOM_BAR_HEIGHT = exports.BOTTOM_BAR_DEFAULTS = exports.BottomBar = void 0;
+var bottom_bar_1 = require("./bottom-bar");
+Object.defineProperty(exports, "BottomBar", { enumerable: true, get: function () { return bottom_bar_1.BottomBar; } });
+Object.defineProperty(exports, "BOTTOM_BAR_DEFAULTS", { enumerable: true, get: function () { return bottom_bar_1.BOTTOM_BAR_DEFAULTS; } });
+Object.defineProperty(exports, "BOTTOM_BAR_HEIGHT", { enumerable: true, get: function () { return bottom_bar_1.BOTTOM_BAR_HEIGHT; } });

package/bottom-bar/types.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export type BottomBarSize = 's' | 'm' | 'l';
+export interface BottomBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'size'> {
+    /** Размер (высота). */
+    size?: BottomBarSize | 'unset';
+    /** Нужна ли разделительная черта сверху. */
+    divided?: boolean;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}

package/bottom-bar/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/box/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Token } from '../colors';
-declare type CustomElement = {
+type CustomElement = {
     className: string;
     children?: React.ReactNode;
     style?: React.CSSProperties;

package/breakpoints.scss

@@ -22,7 +22,7 @@ $map: (
 
 @mixin down($breakpoint) {
   @if map-has-key($map, $breakpoint) {
-    @media (max-width: map-get($map, $breakpoint) - 1px) {
+    @media (max-width: (map-get($map, $breakpoint) - 1px)) {
       @content;
     }
   } @else {

package/button/button.module.scss

@@ -1,98 +1,115 @@
 @use '../colors';
 
-.button-base {
+.root {
+  position: relative;
   white-space: nowrap;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-wrap: nowrap;
   border-radius: 4px;
-  font: inherit;
-  font-size: 16px;
+  font-family: inherit;
   font-weight: 600;
   box-sizing: border-box;
+  padding: 0;
+  padding-left: var(--button-left-gutter, var(--button-gutter));
+  padding-right: var(--button-right-gutter, var(--button-gutter));
   border: 0;
   outline: 0;
   text-decoration: none;
   overflow: hidden;
+  font-size: var(--button-font-size);
+  background: var(--button-background);
+  color: var(--button-color);
+  min-width: var(--button-min-size);
+  height: var(--button-min-size);
+  --button-icon-gutter: 12px;
   &::-moz-focus-inner {
     border: 0;
   }
-  &:disabled {
+  // @todo disabled для ссылок?
+  &:disabled,
+  &.disabled {
+    pointer-events: none;
     color: colors.$basic-gray24;
     background-color: colors.$basic-gray8;
   }
+  &.loading {
+    color: transparent;
+    > :not(.spinner) {
+      opacity: 0;
+      pointer-events: 0;
+    }
+  }
 }
 
-.icon {
-  fill: currentColor;
-}
-
-// small
-.button-s {
-  padding: 0 8px;
-  min-width: 40px;
-  height: 40px;
-}
-
-.text-button-s {
-  padding-left: 20px;
-  padding-right: 20px;
-}
-
-.button-s-with-start-icon {
-  padding-left: 12px;
-  padding-right: 20px;
-}
-
-.button-s-with-end-icon {
-  padding-left: 20px;
-  padding-right: 12px;
-}
-
-// medium
-.button-m {
-  padding: 0 12px;
-  min-width: 48px;
-  height: 48px;
+// sizes
+.size-xs {
+  --button-min-size: 32px;
+  --button-font-size: 14px;
+  --button-line-height: 20px;
+  --button-gutter: 12px;
 }
 
-.text-button-m {
-  padding-left: 24px;
-  padding-right: 24px;
+.size-s {
+  --button-min-size: 40px;
+  --button-font-size: 16px;
+  --button-line-height: 24px;
+  --button-gutter: 20px;
 }
 
-.button-m-with-start-icon {
-  padding-right: 24px;
+.size-m {
+  --button-min-size: 48px;
+  --button-font-size: 16px;
+  --button-line-height: 24px;
+  --button-gutter: 24px;
 }
 
-.button-m-with-end-icon {
-  padding-left: 24px;
+// content
+.icon-only {
+  --button-left-gutter: 0;
+  --button-right-gutter: 0;
+  --button-icon-gutter: 0;
 }
 
 .icon-start {
-  margin: 0 12px 0 0;
+  --button-left-gutter: 0;
 }
 
 .icon-end {
-  margin: 0 0 0 12px;
+  --button-right-gutter: 0;
 }
 
-// action types
-.button-primary {
-  background-color: colors.$basic-blue;
-  color: #fff;
+// view variants
+.view-primary {
+  --button-background: #{colors.$basic-blue};
+  --button-color: #fff;
   &:hover:not(:disabled) {
     cursor: pointer;
-    background-color: #1b74c1;
+    --button-background: #1b74c1;
   }
 }
 
-.button-secondary {
-  background-color: colors.$basic-gray8;
-  color: colors.$basic-gray87;
+.view-secondary {
+  --button-background: #{colors.$basic-gray8};
+  --button-color: #{colors.$basic-gray87};
   &:hover:not(:disabled) {
     cursor: pointer;
-    background-color: colors.$basic-gray12;
+    --button-background: #{colors.$basic-gray12};
   }
 }
+
+// icons
+.icon {
+  margin: 0 var(--button-icon-gutter);
+  flex-shrink: 0;
+  fill: currentColor;
+}
+
+// spinner
+.spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

package/button/index.d.ts

@@ -1,55 +1,40 @@
-import React from 'react';
-declare type Size = 's' | 'm';
-declare type ViewType = 'primary' | 'secondary';
-declare type IconPosition = 'start' | 'end';
-declare type Appearance = 'button' | 'link' | 'container';
-interface CustomProps<T extends Appearance = Appearance> {
+import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentType, HTMLAttributes, SVGAttributes } from 'react';
+export type ButtonSize = 'xs' | 's' | 'm';
+export type ButtonViewType = 'primary' | 'secondary';
+export type ButtonAppearance = 'button' | 'link' | 'container';
+export type ButtonIconPosition = 'start' | 'end';
+interface CommonProps<T extends ButtonAppearance = ButtonAppearance> {
     /** Определяет внешний вид кнопки. */
-    viewType?: ViewType;
+    viewType?: ButtonViewType;
     /** Определяет тип корневого элемента. */
     appearance?: T;
     /** Иконка. */
-    icon?: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;
-    /** Позиция иконки. */
-    iconPosition?: IconPosition;
+    icon?: ComponentType<SVGAttributes<SVGSVGElement>>;
+    /** Позиция иконки относительно текста. */
+    iconPosition?: ButtonIconPosition;
     /** Размер. */
-    size?: Size;
+    size?: ButtonSize;
+    /** Нужно ли отображать состояние загрузки. */
+    loading?: boolean;
+    /** Отключенное состояние. */
+    disabled?: boolean;
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
 }
-declare type ExcludeKeys<T> = Omit<T, 'ref' | keyof CustomProps>;
-export declare type Props = (CustomProps<'button'> & ExcludeKeys<JSX.IntrinsicElements['button']>) | (CustomProps<'link'> & ExcludeKeys<JSX.IntrinsicElements['a']>) | (CustomProps<'container'> & ExcludeKeys<JSX.IntrinsicElements['div']>);
+type AsButtonProps = CommonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps> & {
+    appearance?: 'button';
+};
+type AsAnchorProps = CommonProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps> & {
+    appearance: 'link';
+};
+type AsContainerProps = CommonProps & Omit<HTMLAttributes<HTMLDivElement>, keyof CommonProps> & {
+    appearance: 'container';
+};
+export type ButtonProps = AsButtonProps | AsAnchorProps | AsContainerProps;
 /**
  * Компонент кнопки, стилизованной по дизайн-гайдам.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const Button: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
-/**
- * Возвращает строку с классами для стилизации кнопки.
- * @param props Опции.
- * @param props.actionType Определяет внешний вид кнопки.
- * @param props.size Определяет размер.
- * @param props.iconPosition Положение иконки.
- * @param props.withIcon Показывать ли иконку.
- * @param props.withContent Есть ли контент.
- * @param props.className Дополнительный класс.
- * @return Строка с классами.
- */
-export declare const computeClassName: ({ size, viewType, iconPosition, withIcon, withContent, className, }: {
-    size: Size;
-    viewType: ViewType;
-    iconPosition: IconPosition;
-    withIcon: boolean;
-    withContent: boolean;
-    className?: string | undefined;
-}) => string;
-/**
- * Возвращает кортеж с именем элемента и свойствами компонента по ключу.
- * @param appearance Ключ.
- * @return Кортеж с именем элемента и свойствами.
- */
-export declare const resolveAppearance: (Target: "link" | "button" | "container") => ["a" | "button" | "div", {
-    role: 'button';
-} | null];
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<any>>;
 export {};

package/button/index.js

@@ -37,9 +37,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveAppearance = exports.computeClassName = exports.Button = void 0;
+exports.Button = void 0;
 const react_1 = __importStar(require("react"));
-const fp_1 = require("lodash/fp");
+const spinner_1 = require("../spinner");
 const bind_1 = __importDefault(require("classnames/bind"));
 const button_module_scss_1 = __importDefault(require("./button.module.scss"));
 const cx = bind_1.default.bind(button_module_scss_1.default);
@@ -49,48 +49,24 @@ const cx = bind_1.default.bind(button_module_scss_1.default);
  * @return Элемент.
  */
 exports.Button = (0, react_1.forwardRef)(function Button(_a, ref) {
-    var { children, className, viewType = 'primary', appearance = 'button', size = 'm', icon: Icon, iconPosition = 'start', 'data-testid': testId = 'button' } = _a, restProps = __rest(_a, ["children", "className", "viewType", "appearance", "size", "icon", "iconPosition", 'data-testid']);
-    const [Element, moreProps] = (0, exports.resolveAppearance)(appearance);
-    const readyClassName = (0, exports.computeClassName)({
-        className,
-        size,
-        viewType,
-        withIcon: Boolean(Icon),
-        withContent: Boolean(children) && children !== 0,
-        iconPosition,
-    });
-    return (react_1.default.createElement(Element, Object.assign({}, restProps, moreProps, { "data-testid": testId, ref: ref, className: readyClassName, children: react_1.default.createElement(react_1.default.Fragment, null,
-            Icon && iconPosition === 'start' && (react_1.default.createElement(Icon, { width: 24, height: 24, className: cx('icon', children && 'icon-start') })),
-            children,
-            Icon && iconPosition === 'end' && (react_1.default.createElement(Icon, { width: 24, height: 24, className: cx('icon', children && 'icon-end') }))) })));
+    var { viewType = 'primary', icon: Icon, iconPosition = 'start', size = 'm', loading, disabled, className, children, 'data-testid': testId = 'button' } = _a, restProps = __rest(_a, ["viewType", "icon", "iconPosition", "size", "loading", "disabled", "className", "children", 'data-testid']);
+    const hasIcon = Boolean(Icon);
+    const hasText = Boolean(children);
+    const rootClassName = cx('root', `size-${size}`, `view-${viewType}`, loading && 'loading', disabled && 'disabled', hasIcon && !hasText && 'icon-only', hasText && hasIcon && iconPosition === 'start' && 'icon-start', hasText && hasIcon && iconPosition === 'end' && 'icon-end', className);
+    const content = (react_1.default.createElement(react_1.default.Fragment, null,
+        Icon && iconPosition === 'start' && react_1.default.createElement(Icon, { className: cx('icon') }),
+        children,
+        Icon && iconPosition === 'end' && react_1.default.createElement(Icon, { className: cx('icon') }),
+        loading && (react_1.default.createElement(spinner_1.SpinnerSVG, { size: 's', color: disabled || viewType === 'secondary' ? 'basic-gray38' : 'basic-white', className: cx('spinner') }))));
+    let result = null;
+    if (restProps.appearance === 'container') {
+        result = (react_1.default.createElement("div", Object.assign({}, restProps, { ref: ref, className: rootClassName, role: 'button', "data-testid": testId }), content));
+    }
+    else if (restProps.appearance === 'link') {
+        result = (react_1.default.createElement("a", Object.assign({}, restProps, { ref: ref, className: rootClassName, "data-testid": testId }), content));
+    }
+    else {
+        result = (react_1.default.createElement("button", Object.assign({}, restProps, { ref: ref, className: rootClassName, disabled: disabled, "data-testid": testId }), content));
+    }
+    return result;
 });
-/**
- * Возвращает строку с классами для стилизации кнопки.
- * @param props Опции.
- * @param props.actionType Определяет внешний вид кнопки.
- * @param props.size Определяет размер.
- * @param props.iconPosition Положение иконки.
- * @param props.withIcon Показывать ли иконку.
- * @param props.withContent Есть ли контент.
- * @param props.className Дополнительный класс.
- * @return Строка с классами.
- */
-const computeClassName = ({ size, viewType, iconPosition, withIcon, withContent, className, }) => cx([
-    className,
-    'button-base',
-    viewType === 'secondary' ? 'button-secondary' : 'button-primary',
-    `button-${size}`,
-    withContent && !withIcon && `text-button-${size}`,
-    withContent && withIcon && `button-${size}-with-${iconPosition}-icon`,
-]);
-exports.computeClassName = computeClassName;
-/**
- * Возвращает кортеж с именем элемента и свойствами компонента по ключу.
- * @param appearance Ключ.
- * @return Кортеж с именем элемента и свойствами.
- */
-exports.resolveAppearance = (0, fp_1.cond)([
-    [(0, fp_1.eq)('link'), (0, fp_1.always)(['a', null])],
-    [(0, fp_1.eq)('container'), (0, fp_1.always)(['div', { role: 'button' }])],
-    [fp_1.stubTrue, (0, fp_1.always)(['button', null])],
-]);

package/card/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { PlateProps } from '../plate';
 import { CardContent, CardFooter, CardHeader } from './slots';
-export declare type CardProps = PlateProps;
+export type CardProps = PlateProps;
 export interface CardComponent {
     (props: CardProps): JSX.Element;
     Header: typeof CardHeader;
@@ -14,3 +14,4 @@ export interface CardComponent {
  * @return Элемент.
  */
 export declare const Card: CardComponent;
+export { CardContent };

package/card/index.js

@@ -14,14 +14,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Card = void 0;
+exports.CardContent = exports.Card = void 0;
 const react_1 = __importDefault(require("react"));
 const plate_1 = require("../plate");
 const slots_1 = require("./slots");
+Object.defineProperty(exports, "CardContent", { enumerable: true, get: function () { return slots_1.CardContent; } });
 const utils_1 = require("./utils");
+const define_slots_1 = require("../helpers/define-slots");
+const top_bar_1 = require("../top-bar");
+const bottom_bar_1 = require("../bottom-bar");
+const shapes_1 = require("../styling/shapes");
 const classnames_1 = __importDefault(require("classnames"));
 const card_module_scss_1 = __importDefault(require("./card.module.scss"));
-const define_slots_1 = require("../helpers/define-slots");
 /**
  * Компонент карточки - это расширенный Plate с возможностью определять слоты: шапку, тело и футер.
  * @param props Свойства.
@@ -29,18 +33,31 @@ const define_slots_1 = require("../helpers/define-slots");
  */
 const Card = (_a) => {
     var { children, className, rounds } = _a, restProps = __rest(_a, ["children", "className", "rounds"]);
-    const { header, content, footer } = (0, define_slots_1.defineSlots)(children, {
-        header: slots_1.CardHeader,
+    const { header, content, footer, topBar, bottomBar } = (0, define_slots_1.defineSlots)(children, {
+        topBar: top_bar_1.TopBar,
         content: slots_1.CardContent,
+        bottomBar: bottom_bar_1.BottomBar,
+        header: slots_1.CardHeader,
         footer: slots_1.CardFooter,
     });
     return (react_1.default.createElement(utils_1.CardContext.Provider, { value: { rounds } },
         react_1.default.createElement(plate_1.Plate, Object.assign({}, restProps, { rounds: rounds, className: (0, classnames_1.default)(card_module_scss_1.default.root, className) }),
-            header,
+            !topBar && header,
+            topBar && (react_1.default.createElement(top_bar_1.TopBar, Object.assign({}, topBar.props, { className: (0, classnames_1.default)(topBar.props.className, rounds === 's' && shapes_1.SmallRounds.top, rounds === 'm' && shapes_1.MediumRounds.top) }))),
             content,
-            footer)));
+            bottomBar && react_1.default.createElement(bottom_bar_1.BottomBar, Object.assign({}, bottomBar.props)),
+            !bottomBar && footer)));
 };
 exports.Card = Card;
+/**
+ * @deprecated Нужно использовать TopBar.
+ */
 exports.Card.Header = slots_1.CardHeader;
+/**
+ * @deprecated Нужно использовать `import { CardContent }`.
+ */
 exports.Card.Content = slots_1.CardContent;
+/**
+ * @deprecated Нужно использовать BottomBar.
+ */
 exports.Card.Footer = slots_1.CardFooter;