@steroidsjs/bootstrap 3.0.0-beta.1 → 3.0.0-beta.100

package/index.d.ts

@@ -2,6 +2,12 @@ declare const _default: {
     'crud.CrudView': {
         lazy: () => any;
     };
+    'content.MenuView': {
+        lazy: () => any;
+    };
+    'content.MenuItemView': {
+        lazy: () => any;
+    };
     'content.DropDownView': {
         lazy: () => any;
     };
@@ -20,6 +26,21 @@ declare const _default: {
     'content.DetailView': {
         lazy: () => any;
     };
+    'content.IconView': {
+        lazy: () => any;
+    };
+    'content.BadgeView': {
+        lazy: () => any;
+    };
+    'content.CopyToClipboardView': {
+        lazy: () => any;
+    };
+    'content.ChartView': {
+        lazy: () => any;
+    };
+    'content.SliderView': {
+        lazy: () => any;
+    };
     'form.AutoCompleteFieldView': {
         lazy: () => any;
     };
@@ -29,10 +50,10 @@ declare const _default: {
     'content.CardView': {
         lazy: () => any;
     };
-    'content.CollapseView': {
+    'content.AccordionView': {
         lazy: () => any;
     };
-    'content.CollapseItemView': {
+    'content.AccordionItemView': {
         lazy: () => any;
     };
     'form.CheckboxFieldView': {
@@ -116,13 +137,13 @@ declare const _default: {
     'form.TimeFieldView': {
         lazy: () => any;
     };
-    'format.BooleanFormatterView': {
+    'form.TimeRangeFieldView': {
         lazy: () => any;
     };
-    'format.DefaultFormatterView': {
+    'format.BooleanFormatterView': {
         lazy: () => any;
     };
-    'icon.IconView': {
+    'format.DefaultFormatterView': {
         lazy: () => any;
     };
     'layout.HeaderView': {
@@ -149,6 +170,9 @@ declare const _default: {
     'layout.TooltipView': {
         lazy: () => any;
     };
+    'layout.SidebarView': {
+        lazy: () => any;
+    };
     'list.ControlsColumnView': {
         lazy: () => any;
     };
@@ -161,6 +185,15 @@ declare const _default: {
     'list.GridView': {
         lazy: () => any;
     };
+    'list.FlexGridView': {
+        lazy: () => any;
+    };
+    'list.ContentColumnView': {
+        lazy: () => any;
+    };
+    'list.DiagramColumnView': {
+        lazy: () => any;
+    };
     'list.ListView': {
         lazy: () => any;
     };
@@ -215,5 +248,14 @@ declare const _default: {
     'nav.TreeView': {
         lazy: () => any;
     };
+    'nav.ButtonGroupView': {
+        lazy: () => any;
+    };
+    'typography.TextView': {
+        lazy: () => any;
+    };
+    'typography.TitleView': {
+        lazy: () => any;
+    };
 };
 export default _default;

package/index.js

@@ -5,6 +5,12 @@ exports["default"] = {
     'crud.CrudView': {
         lazy: function () { return require('./crud/Crud/CrudView')["default"]; }
     },
+    'content.MenuView': {
+        lazy: function () { return require('./content/Menu/MenuView')["default"]; }
+    },
+    'content.MenuItemView': {
+        lazy: function () { return require('./content/Menu/MenuItemView')["default"]; }
+    },
     'content.DropDownView': {
         lazy: function () { return require('./content/DropDown/DropDownView')["default"]; }
     },
@@ -23,6 +29,21 @@ exports["default"] = {
     'content.DetailView': {
         lazy: function () { return require('./content/Detail/DetailView')["default"]; }
     },
+    'content.IconView': {
+        lazy: function () { return require('./content/Icon/IconView')["default"]; }
+    },
+    'content.BadgeView': {
+        lazy: function () { return require('./content/Badge/BadgeView')["default"]; }
+    },
+    'content.CopyToClipboardView': {
+        lazy: function () { return require('./content/CopyToClipboard/CopyToClipboardView')["default"]; }
+    },
+    'content.ChartView': {
+        lazy: function () { return require('./content/Chart/ChartView')["default"]; }
+    },
+    'content.SliderView': {
+        lazy: function () { return require('./content/Slider/SliderView')["default"]; }
+    },
     'form.AutoCompleteFieldView': {
         lazy: function () { return require('./form/AutoCompleteField/AutoCompleteFieldView')["default"]; }
     },
@@ -32,11 +53,11 @@ exports["default"] = {
     'content.CardView': {
         lazy: function () { return require('./content/Card/CardView')["default"]; }
     },
-    'content.CollapseView': {
-        lazy: function () { return require('./content/Collapse/CollapseView')["default"]; }
+    'content.AccordionView': {
+        lazy: function () { return require('./content/Accordion/AccordionView')["default"]; }
     },
-    'content.CollapseItemView': {
-        lazy: function () { return require('./content/Collapse/CollapseItemView')["default"]; }
+    'content.AccordionItemView': {
+        lazy: function () { return require('./content/Accordion/AccordionItemView')["default"]; }
     },
     'form.CheckboxFieldView': {
         lazy: function () { return require('./form/CheckboxField/CheckboxFieldView')["default"]; }
@@ -119,15 +140,15 @@ exports["default"] = {
     'form.TimeFieldView': {
         lazy: function () { return require('./form/TimeField/TimeFieldView')["default"]; }
     },
+    'form.TimeRangeFieldView': {
+        lazy: function () { return require('./form/TimeRangeField/TimeRangeFieldView')["default"]; }
+    },
     'format.BooleanFormatterView': {
         lazy: function () { return require('./format/BooleanFormatter/BooleanFormatterView')["default"]; }
     },
     'format.DefaultFormatterView': {
         lazy: function () { return require('./format/DefaultFormatter/DefaultFormatterView')["default"]; }
     },
-    'icon.IconView': {
-        lazy: function () { return require('./icon/Icon/IconView')["default"]; }
-    },
     'layout.HeaderView': {
         lazy: function () { return require('./layout/Header/HeaderView')["default"]; }
     },
@@ -152,6 +173,9 @@ exports["default"] = {
     'layout.TooltipView': {
         lazy: function () { return require('./layout/Tooltip/TooltipView')["default"]; }
     },
+    'layout.SidebarView': {
+        lazy: function () { return require('./layout/Sidebar/SidebarView')["default"]; }
+    },
     'list.ControlsColumnView': {
         lazy: function () { return require('./list/ControlsColumnView/ControlsColumnView')["default"]; }
     },
@@ -164,6 +188,15 @@ exports["default"] = {
     'list.GridView': {
         lazy: function () { return require('./list/Grid/GridView')["default"]; }
     },
+    'list.FlexGridView': {
+        lazy: function () { return require('./list/FlexGrid/FlexGridView')["default"]; }
+    },
+    'list.ContentColumnView': {
+        lazy: function () { return require('./list/Grid/views/ContentColumnView/ContentColumnView')["default"]; }
+    },
+    'list.DiagramColumnView': {
+        lazy: function () { return require('./list/Grid/views/DiagramColumnView/DiagramColumnView')["default"]; }
+    },
     'list.ListView': {
         lazy: function () { return require('./list/List/ListView')["default"]; }
     },
@@ -217,5 +250,14 @@ exports["default"] = {
     },
     'nav.TreeView': {
         lazy: function () { return require('./nav/Tree/TreeView')["default"]; }
+    },
+    'nav.ButtonGroupView': {
+        lazy: function () { return require('./nav/ButtonGroup/ButtonGroupView')["default"]; }
+    },
+    'typography.TextView': {
+        lazy: function () { return require('./typography/Text/TextView')["default"]; }
+    },
+    'typography.TitleView': {
+        lazy: function () { return require('./typography/Title/TitleView')["default"]; }
     }
 };

package/index.scss

@@ -1,69 +1,91 @@
-@import './scss/mixins';
-@import './scss/variables';
+@use "sass:meta";
 
-@import './crud/Crud/CrudView';
-@import './content/Alert/AlertView';
-@import './content/Avatar/AvatarView';
-@import './content/Avatar/AvatarGroupView';
-@import './content/Calendar/CalendarView';
-@import './content/Calendar/CaptionElement';
-@import './content/Card/CardView';
-@import './content/Collapse/CollapseView';
-@import './content/Collapse/CollapseItemView';
-@import './content/Detail/DetailView';
-@import './form/AutoCompleteField/AutoCompleteFieldView';
-@import './form/Button/ButtonView';
-@import './form/CheckboxField/CheckboxFieldView';
-@import './form/CheckboxListField/CheckboxListFieldView';
-@import './form/DateField/DateFieldView';
-@import './form/DateRangeField/DateRangeFieldView';
-@import './form/DateTimeField/DateTimeFieldView';
-@import './form/DateTimeRangeField/DateTimeRangeFieldView';
-@import './form/DropDownField/DropDownFieldView';
-@import './form/FieldLayout/FieldLayoutView';
-@import './form/FieldList/FieldListView';
-@import './form/FieldList/FieldListItemView';
-@import './form/FileField/FileFieldView';
-@import './form/FileField/FileFieldItemView';
-@import './form/Form/FormView';
-@import './form/HtmlField/HtmlFieldView';
-@import './form/InputField/InputFieldView';
-@import './form/NumberField/NumberFieldView';
-@import './form/PasswordField/PasswordFieldView';
-@import './form/RateField/RateFieldView';
-@import './form/RadioListField/RadioListFieldView';
-@import './form/ReCaptchaField/ReCaptchaFieldView';
-@import './form/SliderField/SliderFieldView';
-@import './form/SwitcherField/SwitcherFieldView';
-@import './form/TextField/TextFieldView';
-@import './form/TimeField/TimeFieldView';
-@import './form/TimeField/TimePanelView';
-@import './icon/Icon/IconView';
-@import './layout/Header/HeaderView';
-@import './layout/Tooltip/TooltipView';
-@import './layout/Notifications/NotificationsView';
-@import './layout/Notifications/NotificationsItemView';
-@import './layout/Loader/LoaderView';
-@import './layout/ProgressBar/LineProgressBarView';
-@import './layout/ProgressBar/CircleProgressBarView';
-@import './layout/Skeleton/SkeletonView';
-@import './list/ControlsColumnView/ControlsColumnView';
-@import './list/CheckboxColumn/CheckboxColumnView';
-@import './list/Empty/EmptyView';
-@import './list/Grid/GridView';
-@import './list/List/ListView';
-@import './list/Pagination/PaginationButtonView';
-@import './list/Pagination/PaginationMoreView';
-@import './list/PaginationSize/PaginationSizeView';
-@import './list/Steps/StepsView';
-@import './list/Steps/StepItemView';
-@import './modal/Modal/ModalView';
-@import './nav/Breadcrubms/BreadcrumbsView';
-@import './nav/Controls/ControlsView';
-@import './nav/Nav/NavBarView';
-@import './nav/Nav/NavButtonView';
-@import './nav/Nav/NavIconView';
-@import './nav/Nav/NavLinkView';
-@import './nav/Nav/NavListView';
-@import './nav/Nav/NavTabsView';
-@import './nav/Tree/TreeView';
+@include meta.load-css('scss/normalize');
+@include meta.load-css('scss/animations');
+@include meta.load-css('scss/variables');
+@include meta.load-css('scss/mixins');
+@include meta.load-css('scss/fonts');
+
+@include meta.load-css('content/Accordion/AccordionView');
+@include meta.load-css('content/Accordion/AccordionItemView');
+@include meta.load-css('content/Alert/AlertView');
+@include meta.load-css('content/Avatar/AvatarView');
+@include meta.load-css('content/Avatar/AvatarGroupView');
+@include meta.load-css('content/Badge/BadgeView');
+@include meta.load-css('content/Calendar/CalendarView');
+@include meta.load-css('content/Calendar/CaptionElement');
+@include meta.load-css('content/Card/CardView');
+@include meta.load-css('content/Detail/DetailView');
+@include meta.load-css('content/DropDown/DropDownView');
+@include meta.load-css('content/Menu/MenuItemView');
+@include meta.load-css('content/Menu/MenuView');
+@include meta.load-css('content/Icon/IconView');
+@include meta.load-css('content/Slider/SliderView');
+@include meta.load-css('content/CopyToClipboard/CopyToClipboardView');
+@include meta.load-css('crud/Crud/CrudView');
+@include meta.load-css('form/AutoCompleteField/AutoCompleteFieldView');
+@include meta.load-css('form/Button/ButtonView');
+@include meta.load-css('form/CheckboxField/CheckboxFieldView');
+@include meta.load-css('form/CheckboxListField/CheckboxListFieldView');
+@include meta.load-css('form/DateField/DateFieldView');
+@include meta.load-css('form/DateRangeField/DateRangeFieldView');
+@include meta.load-css('form/DateTimeField/DateTimeFieldView');
+@include meta.load-css('form/DateTimeRangeField/DateTimeRangeFieldView');
+@include meta.load-css('form/TimeRangeField/TimeRangeFieldView');
+@include meta.load-css('form/DropDownFieldItem/DropDownFieldItemView');
+@include meta.load-css('form/DropDownField/DropDownFieldView');
+@include meta.load-css('form/FieldLayout/FieldLayoutView');
+@include meta.load-css('form/FieldList/FieldListView');
+@include meta.load-css('form/FieldList/FieldListItemView');
+@include meta.load-css('form/FileField/FileFieldView');
+@include meta.load-css('form/ImageField/ImageFieldView');
+@include meta.load-css('form/FileField/FileFieldItemView');
+@include meta.load-css('form/FieldSet/FieldSetView');
+@include meta.load-css('form/Form/FormView');
+@include meta.load-css('form/HtmlField/HtmlFieldView');
+@include meta.load-css('form/InputField/InputFieldView');
+@include meta.load-css('form/NumberField/NumberFieldView');
+@include meta.load-css('form/PasswordField/PasswordFieldView');
+@include meta.load-css('form/RateField/RateFieldView');
+@include meta.load-css('form/RadioField/RadioFieldView');
+@include meta.load-css('form/RadioListField/RadioListFieldView');
+@include meta.load-css('form/ReCaptchaField/ReCaptchaFieldView');
+@include meta.load-css('form/SliderField/SliderFieldView');
+@include meta.load-css('form/SwitcherField/SwitcherFieldView');
+@include meta.load-css('form/TextField/TextFieldView');
+@include meta.load-css('form/TimeField/TimeFieldView');
+@include meta.load-css('form/TimeField/TimePanelView');
+@include meta.load-css('layout/Header/HeaderView');
+@include meta.load-css('layout/Tooltip/TooltipView');
+@include meta.load-css('layout/Notifications/NotificationsView');
+@include meta.load-css('layout/Notifications/NotificationsItemView');
+@include meta.load-css('layout/Loader/LoaderView');
+@include meta.load-css('layout/ProgressBar/LineProgressBarView');
+@include meta.load-css('layout/ProgressBar/CircleProgressBarView');
+@include meta.load-css('layout/Skeleton/SkeletonView');
+@include meta.load-css('layout/Sidebar/SidebarView');
+@include meta.load-css('list/ControlsColumnView/ControlsColumnView');
+@include meta.load-css('list/CheckboxColumn/CheckboxColumnView');
+@include meta.load-css('list/Empty/EmptyView');
+@include meta.load-css('list/Grid/GridView');
+@include meta.load-css('list/FlexGrid/FlexGridView');
+@include meta.load-css('list/List/ListView');
+@include meta.load-css('list/Grid/views/ContentColumnView/ContentColumnView');
+@include meta.load-css('list/Pagination/PaginationButtonView');
+@include meta.load-css('list/Pagination/PaginationMoreView');
+@include meta.load-css('list/PaginationSize/PaginationSizeView');
+@include meta.load-css('list/Steps/StepsView');
+@include meta.load-css('list/Steps/StepItemView');
+@include meta.load-css('modal/Modal/ModalView');
+@include meta.load-css('nav/Breadcrubms/BreadcrumbsView');
+@include meta.load-css('nav/Controls/ControlsView');
+@include meta.load-css('nav/Nav/NavBarView');
+@include meta.load-css('nav/Nav/NavButtonView');
+@include meta.load-css('nav/Nav/NavIconView');
+@include meta.load-css('nav/Nav/NavLinkView');
+@include meta.load-css('nav/Nav/NavListView');
+@include meta.load-css('nav/Nav/NavTabsView');
+@include meta.load-css('nav/Tree/TreeView');
+@include meta.load-css('nav/ButtonGroup/ButtonGroupView');
+@include meta.load-css('typography/Text/TextView');
+@include meta.load-css('typography/Title/TitleView');

package/layout/Header/HeaderView.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IHeaderViewProps } from '@steroidsjs/core/ui/layout/Header/Header';
 export default function HeaderView(props: IHeaderViewProps): JSX.Element;

package/layout/Header/HeaderView.js

@@ -37,18 +37,55 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+/* eslint-disable consistent-return */
 var React = __importStar(require("react"));
 var nav_1 = require("@steroidsjs/core/ui/nav");
 var Nav_1 = __importDefault(require("@steroidsjs/core/ui/nav/Nav"));
-var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var form_1 = require("@steroidsjs/core/ui/form");
+var modal_1 = require("@steroidsjs/core/actions/modal");
+var Text_1 = __importDefault(require("@steroidsjs/core/ui/typography/Text/Text"));
+var content_1 = require("@steroidsjs/core/ui/content");
+var renderIcon_1 = __importDefault(require("../../utils/renderIcon"));
 function HeaderView(props) {
+    var _a, _b, _c, _d, _e;
     var bem = (0, hooks_1.useBem)('HeaderView');
-    return (React.createElement("nav", { className: bem('navbar navbar-expand-lg', props.dark ? 'navbar-dark' : 'navbar-light', props.dark ? 'bg-dark' : 'bg-light', bem.block(), props.className) },
-        props.logo && (React.createElement(nav_1.Link, __assign({ className: bem('navbar-brand', bem.element('logo')), toRoute: 'root' }, props.logo.linkProps),
-            props.logo.icon && (React.createElement(Icon_1["default"], { className: bem.element('logo-image'), name: props.logo.icon, title: props.logo.title })),
-            props.logo.title || '')),
-        props.nav && (React.createElement(Nav_1["default"], __assign({ layout: 'navbar' }, props.nav))),
+    var dispatch = (0, hooks_1.useDispatch)();
+    var renderAuthBlock = React.useCallback(function () {
+        var _a, _b;
+        return (React.createElement(form_1.Button, __assign({ outline: true, color: 'basic', toRoute: (_a = props.authParams) === null || _a === void 0 ? void 0 : _a.toRoute, className: bem.element('auth-btn'), size: props.size }, (_b = props.authParams) === null || _b === void 0 ? void 0 : _b.buttonProps, { onClick: function () { var _a; return dispatch((0, modal_1.openModal)((_a = props.authParams) === null || _a === void 0 ? void 0 : _a.modal)); } }), __('Войти')));
+    }, [bem, dispatch, (_a = props.authParams) === null || _a === void 0 ? void 0 : _a.buttonProps, (_b = props.authParams) === null || _b === void 0 ? void 0 : _b.modal, (_c = props.authParams) === null || _c === void 0 ? void 0 : _c.toRoute, props.size]);
+    var renderUserBlock = React.useCallback(function () {
+        var _a, _b, _c;
+        if (!props.user) {
+            return;
+        }
+        return (React.createElement("div", { className: bem.element('menu') },
+            React.createElement(Text_1["default"], { className: bem.element('menu-name') }, (_a = props.user) === null || _a === void 0 ? void 0 : _a.name),
+            React.createElement(content_1.Menu, __assign({ icon: (React.createElement(content_1.Avatar, __assign({ size: props.size, className: bem.element('menu-avatar') }, (_b = props.user) === null || _b === void 0 ? void 0 : _b.avatar))) }, (_c = props.user) === null || _c === void 0 ? void 0 : _c.menu))));
+    }, [bem, props.size, props.user]);
+    var renderBurger = React.useCallback(function () {
+        var _a;
+        return (React.createElement("div", { className: bem.element('burger') },
+            React.createElement(content_1.Icon, { name: !props.isBurgerOpened ? 'sort' : 'cross_12x12', className: bem.element('burger-icon'), onClick: props.toggleBurger }),
+            React.createElement("div", { className: bem.element('burger-menu', {
+                    isVisible: props.isBurgerOpened
+                }) },
+                React.createElement("ul", { className: bem.element('burger-list') }, (_a = props.burgerMenu.links) === null || _a === void 0 ? void 0 : _a.map(function (linkProps, linkIndex) { return (React.createElement("li", { key: linkIndex, className: "burger-item" },
+                    React.createElement(nav_1.Link, __assign({}, linkProps)))); })))));
+    }, [bem, (_d = props.burgerMenu) === null || _d === void 0 ? void 0 : _d.links, props.isBurgerOpened, props.toggleBurger]);
+    return (React.createElement("header", { className: bem(bem.block({
+            size: props.size
+        }), props.className), style: props.style },
+        props.logo && (React.createElement(nav_1.Link, __assign({ className: bem.element('logo'), toRoute: 'root', size: props.size }, props.logo.linkProps),
+            props.logo.icon && ((0, renderIcon_1["default"])(props.logo.icon, {
+                className: bem.element('logo-image')
+            })),
+            React.createElement("span", { className: bem.element('logo-title') }, props.logo.title || ''))),
+        props.nav && (React.createElement(Nav_1["default"], __assign({ size: props.size, layout: 'navbar', className: bem.element('nav') }, props.nav))),
+        (props.burgerMenu || props.authParams || props.user) && (React.createElement("div", { className: bem.element('interaction') },
+            ((_e = props === null || props === void 0 ? void 0 : props.authParams) === null || _e === void 0 ? void 0 : _e.isAuth) ? renderAuthBlock() : renderUserBlock(),
+            props.burgerMenu && renderBurger())),
         props.children));
 }
 exports["default"] = HeaderView;

package/layout/Header/HeaderView.scss

@@ -1,25 +1,139 @@
+@use "../../scss/variables";
+
 .HeaderView {
-  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
-  background-color: $body-bg;
-  &, a {
-    color: $body-color;
-  }
-  a:hover {
-    opacity: .7;
-  }
-
-  &__logo {
-  }
-  &__logo-image {
-    margin-right: 12px;
-    display: inline-block;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: variables.$element-background-color;
+    border-bottom: 1px solid variables.$element-placeholder-color-disabled;
     position: relative;
-    top: -2px;
-    width: 24px;
-    height: 24px;
-  }
-  &__logo-svg {
-    margin-right: 12px;
-  }
-
-}
+
+    &_size {
+        &_sm {
+            padding: 6px 16px;
+        }
+        &_md {
+            padding: 14px 16px;
+        }
+        &_lg {
+            padding: 22px 16px;
+        }
+    }
+
+    &__logo {
+
+        .ButtonView__text {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            column-gap: 9px;
+        }
+
+        &-image {
+            width: 36px;
+            height: 36px;
+        }
+
+        &-title {
+            color: variables.$text-color;
+            font-weight: variables.$font-weight-lg;
+            font-size: variables.$font-size-base;
+            line-height: variables.$line-height-base;
+        }
+    }
+
+    &__logo-svg {
+        margin-right: 12px;
+    }
+
+    .NavBarView__list {
+        flex-flow: row nowrap;
+        column-gap: 8px;
+    }
+
+    &__nav {
+        @media (max-width: 361px) {
+            display: none;
+        }
+    }
+
+    &__menu {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        column-gap: 8px;
+
+        &-name.TextView_type_body {
+            margin: 0;
+            font-weight: variables.$font-weight-lg;
+            font-size: variables.$font-size-base;
+            line-height: variables.$line-height-base;
+
+            @media (max-width: 360px) {
+                display: none;
+            }
+        }
+    }
+
+    &__auth-btn {
+        margin-left: auto;
+    }
+
+    &__burger {
+        cursor: pointer;
+        margin-left: auto;
+        display: block;
+
+        width: 24px;
+        height: 24px;
+
+        @media (max-width: 360px) {
+            display: block;
+        }
+
+        &-menu {
+            z-index: 999;
+            width: 100%;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            background-color: variables.$white;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 150ms ease-in-out;
+
+            &_isVisible {
+                opacity: 1;
+                pointer-events: all;
+            }
+            .ButtonView__text {
+                color: variables.$element-placeholder-color;
+            }
+        }
+
+        &-icon {
+            width: 24px;
+            height: 24px;
+            svg path {
+                stroke: variables.$icon-color;
+            }
+        }
+
+        &-list {
+            padding: 32px 16px;
+            flex-flow: column nowrap;
+            display: flex;
+            row-gap: 16px;
+            align-items: flex-start;
+            background-color: variables.$element-background-color;
+        }
+    }
+
+    &__interaction {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        column-gap: 16px;
+    }
+}

package/layout/Loader/LoaderView.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
-export default function LoaderView(props: IBemHocOutput): JSX.Element;
+import { ILoaderViewProps } from '@steroidsjs/core/ui/layout/Loader/Loader';
+export default function LoaderView(props: ILoaderViewProps): JSX.Element;

package/layout/Loader/LoaderView.js

@@ -25,9 +25,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var content_1 = require("@steroidsjs/core/ui/content");
 function LoaderView(props) {
     var bem = (0, hooks_1.useBem)('LoaderView');
-    return (React.createElement("div", { className: bem.block() },
-        React.createElement("div", { className: bem.element('loader') })));
+    return (React.createElement("div", { className: bem.block({
+            color: props.color,
+            size: props.size
+        }) },
+        React.createElement(content_1.Icon, { className: bem.element('icon'), name: 'loading_purple' })));
 }
 exports["default"] = LoaderView;