@steroidsjs/bootstrap 3.0.0-beta.66 → 3.0.0-beta.68

package/content/Alert/AlertView.scss

@@ -108,7 +108,7 @@ $alert-themes: map-merge(
     }
 
     &__wrapper {
-        width: 508px;
+        max-width: 508px;
         display: flex;
         flex-flow: column;
         justify-content: space-between;

package/form/Button/ButtonView.scss

@@ -114,6 +114,16 @@ $btn-letter-spacing: 0.1em;
     &__link { 
         display: inline-flex;
         align-items: center;
+
+        #{$root}__text {
+            color: $link-color;
+        }
+
+        &:hover { 
+            #{$root}__text { 
+                color: $link-color-hover;
+            }
+        }
     }
 
     &__icon {
@@ -123,10 +133,6 @@ $btn-letter-spacing: 0.1em;
         &_without-label {
             margin: 0;
         }
-
-        svg path {
-            transition: stroke 0.15s ease-in-out;
-        }
     }
 
     &_failed {

package/form/ImageField/ImageFieldView.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -29,12 +40,13 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
+var form_1 = require("@steroidsjs/core/ui/form");
 function ImageFieldView(props) {
     var bem = (0, hooks_1.useBem)('ImageFieldView');
     var item = props.item;
-    return (React.createElement("div", { className: bem.block() }, !item || !item.image ? (React.createElement("button", { className: bem.element('button', {
+    return (React.createElement("div", { className: bem.block() }, !item || !item.image ? (React.createElement(form_1.Button, __assign({ className: bem.element('button', {
             loading: item ? item.progress : false
-        }), onClick: props.onClick },
+        }), onClick: props.onClick }, props.buttonProps),
         !item || !item.progress ? (React.createElement(Icon_1["default"], { className: bem.element('button-icon'), name: 'add' })) : (React.createElement("div", { className: bem.element('progress-bar') },
             React.createElement("div", { className: bem.element('progress-slider'), style: {
                     width: "".concat(item ? item.progress.percent : 0, "%")

package/form/ImageField/ImageFieldView.scss

@@ -1,43 +1,26 @@
+@import '../../scss/variables';
+
 .ImageFieldView {
   $root: &;
 
-  width: 128px;
-  height: 128px;
-
   &__button {
     display: flex;
     align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    background: #ebebeb;
-    border: 1px dashed #b0b0b0;
-    border-radius: 10px;
+    min-width: 200px;
 
     &_loading {
       pointer-events: none;
     }
   }
 
-  &__button-icon {
+  .ButtonView__text {
     display: flex;
-
-    svg {
-      width: 12px;
-      height: 12px;
-    }
-
-    path {
-      fill: #152536
-    }
+    column-gap: 6px;
   }
 
   &__button-label {
-    margin-top: 18px;
-    font-size: 14px;
-    line-height: 140%;
-    color: #152536;
+    font-size: 16px;
+    color: $text-color;
   }
 
   &__progress-bar {

package/form/RateField/RateFieldView.scss

@@ -1,3 +1,5 @@
+@import '../../scss/variables';
+
 .RateFieldView {
 
   $root: &;
@@ -47,7 +49,7 @@
       width: $icon-size;
 
       path {
-        fill: $back-disabled;
+        fill: $gray-dark;
       }
     }
   }

package/form/TimeField/TimeFieldView.js

@@ -45,19 +45,21 @@ var DropDown_1 = __importDefault(require("@steroidsjs/core/ui/content/DropDown")
 var TimePanelView_1 = __importDefault(require("./TimePanelView"));
 function TimeFieldView(props) {
     var bem = (0, hooks_1.useBem)('TimeFieldView');
-    var renderContent = (0, react_1.useCallback)(function () { return (React.createElement(TimePanelView_1["default"], __assign({}, props.timePanelViewProps))); }, [props.timePanelViewProps]);
-    var renderBody = function () { return (React.createElement("div", { className: bem(bem.block({
-            disabled: props.disabled,
-            'no-border': props.noBorder
-        }), props.className) },
-        React.createElement("div", { className: bem.element('body') },
-            React.createElement("input", __assign({}, props.inputProps, { className: bem(bem.element('input'), !!props.errors && 'is-invalid'), onChange: function (e) { return props.inputProps.onChange(e.target.value); } })),
-            React.createElement("div", { className: bem.element('icon-container') },
-                React.createElement(Icon_1["default"], { className: bem.element('icon'), name: 'clock' }),
-                props.showRemove && props.inputProps.value && props.icon !== false && (React.createElement(Icon_1["default"], { className: bem.element('icon', 'close'), onClick: function (e) {
-                        e.preventDefault();
-                        props.onClear();
-                    }, name: typeof props.icon === 'string' ? props.icon : 'times-circle' })))))); };
-    return (React.createElement(DropDown_1["default"], { position: 'bottomLeft', content: renderContent, visible: props.isOpened, onClose: props.onClose }, renderBody()));
+    var renderContent = (0, react_1.useCallback)(function () { return (React.createElement("div", { className: bem.element('panel-container') },
+        React.createElement(TimePanelView_1["default"], __assign({}, props.timePanelViewProps)))); }, [bem, props.timePanelViewProps]);
+    return (React.createElement(DropDown_1["default"], { position: 'bottomLeft', content: renderContent, visible: props.isOpened, onClose: props.onClose, className: bem.element('dropdown'), hasArrow: false },
+        React.createElement("div", { className: bem(bem.block({
+                size: props.size,
+                disabled: props.disabled,
+                'is-invalid': !!props.errors
+            }), props.className), style: props.style },
+            React.createElement("div", { className: bem.element('body') },
+                React.createElement("input", __assign({}, props.inputProps, { className: bem(bem.element('input'), props.inputProps.className), onChange: function (e) { return props.inputProps.onChange(e.target.value); } })),
+                React.createElement("div", { className: bem.element('icon-container') },
+                    !props.inputProps.value && props.icon && (React.createElement(Icon_1["default"], { className: bem.element('date-icon'), name: typeof props.icon === 'string' ? props.icon : 'calendar_range', tabIndex: -1 })),
+                    props.showRemove && props.inputProps.value && props.icon !== false && (React.createElement(Icon_1["default"], { className: bem.element('close-icon'), onClick: function (e) {
+                            e.preventDefault();
+                            props.onClear();
+                        }, name: 'cross_8x8' })))))));
 }
 exports["default"] = TimeFieldView;

package/form/TimeField/TimeFieldView.scss

@@ -1,83 +1,34 @@
 .TimeFieldView {
+    $root: &;
+    position: relative;
 
-  $root : &;
-
-  padding: 0 8px;
-  position: relative;
-
-  background-color: $white;
-  border: 1px solid $border-default;
-  border-radius: 4px;
-
-  &:focus-within{
-    outline: 0;
-    border-color: $border-action;
-    box-shadow: 0 0 0 1px $border-typing;
-  }
-  *:focus {
-    outline: none;
-  }
-
-  &_disabled {
-    color: rgba(0, 0, 0, .25);
-    background-color: $back-disabled;
-    cursor: not-allowed;
-    input {
-      cursor: inherit;
-    }
-  }
-  &_no-border {
-    border: unset;
-  }
+    @include date-default-input();
 
-  &__body {
-    height: 100%;
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
+    @include date-default-body();
 
-    &:hover #{$root}__icon_close {
-      opacity: 1;
-    }
-  }
+    @include icon-container($root);
 
-  &__input {
-    width: 100%;
-    flex-grow: 1;
-    border: none;
-    outline: none;
-    background-color: transparent;
+    @include date-default-sizes($root);
 
-    padding: 10px 5px;
-  }
+    @include date-default-effects($root);
 
-  &__icon-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  &__icon {
-    display: flex;
+    &__dropdown { 
+        background: $element-background-color;
 
-    path {
-      fill: $border-default;
-      transition: fill .1s ease-in;
+        @include calendar-border();
     }
 
-    &_close{
-      position: absolute;
-      background-color: $white;
+    @include date-time-panel($root);
 
-      opacity: 0;
-      transition: opacity .2s ease-in;
+    &__panel-container {
 
-      &:hover {
-        path {
-          fill: $border-default;
+        .TimePanelView__footer { 
+            padding: 0;
+            padding-top: 10px;
+            display: flex;
+            flex-flow: row nowrap;
+            column-gap: 10px;
         }
-      }
     }
-  }
-
 }
+

package/form/TimeField/TimePanelView.scss

@@ -1,85 +1,79 @@
 .TimePanelView {
+    font-weight: 500;
+    user-select: none;
 
-  font-weight: 500;
-  user-select: none;
+    &__header {
+        height: 45px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
-  &__header {
-    height: 45px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    border-left: 1px solid $border-default;
-    border-bottom: 1px solid $border-default;
-  }
-
-  &__body {
-    display: flex;
-    flex-flow: row nowrap;
-    border-radius: $input-border-radius;
-  }
-
-  &__column {
-    height: 220px;
-    overflow-y: auto;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-
-    border-bottom: 1px solid $border-default;
-    &:not(:last-child) {
-      border-right: 1px solid $border-default;
+        border-left: 1px solid $border-default;
+        border-bottom: 1px solid $border-default;
     }
-  }
-
-  &__cell {
-    padding: 5px 20px;
-    cursor: pointer;
 
-    &_selected {
-      background-color: $primary-light;
+    &__body {
+        display: flex;
+        flex-flow: row nowrap;
+        border-radius: $input-border-radius;
     }
 
-    transition: background-color .1s ease-in;
-    &:hover {
-      background-color: $back-disabled;
+    &__column {
+        height: 220px;
+        overflow-y: auto;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        @include scrollWrapper(298px, 0, $scroll-thumb-color, $scroll-track-color);
     }
-  }
 
-  &__footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px;
+    &__cell {
+        padding: 5px 20px;
+        cursor: pointer;
 
-    &_to-end {
-      justify-content: flex-end;
-    }
-  }
-
-  &__button {
-    border: none;
+        &_selected {
+            background-color: $primary-light;
+        }
 
-    &_now {
-      color: $primary;
-      background-color: unset;
-
-      transition: color .1s ease-in;
-      &:hover {
-        color: $primary-dark;
-      }
+        transition: background-color 0.1s ease-in;
+        &:hover {
+            background-color: $back-disabled;
+        }
     }
 
-    &_ok {
-      color: #fff;
-      border-radius: 4px;
-      background-color: $primary;
+    &__footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px;
 
-      transition: background-color .1s ease-in;
-      &:hover {
-        background-color: $primary-dark;
-      }
+        &_to-end {
+            justify-content: flex-end;
+        }
     }
-  }
 
+    &__button {
+        border: none;
+
+        &_now {
+            color: $primary;
+            background-color: unset;
+
+            transition: color 0.1s ease-in;
+            &:hover {
+                color: $primary-dark;
+            }
+        }
+
+        &_ok {
+            color: #fff;
+            border-radius: 4px;
+            background-color: $primary;
+
+            transition: background-color 0.1s ease-in;
+            &:hover {
+                background-color: $primary-dark;
+            }
+        }
+    }
 }

package/icons/svgs/star.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.1443 6.62753C10.931 4.66653 11.3243 3.68604 12.0006 3.68604C12.6769 3.68604 13.0702 4.66653 13.8568 6.62753L13.8934 6.71885C14.3378 7.82672 14.56 8.38065 15.0129 8.71734C15.4657 9.05403 16.0602 9.10727 17.2491 9.21374L17.464 9.23299C19.4099 9.40726 20.3828 9.49439 20.5909 10.1134C20.7991 10.7324 20.0766 11.3897 18.6316 12.7044L18.1493 13.1432C17.4178 13.8087 17.052 14.1414 16.8815 14.5776C16.8497 14.6589 16.8233 14.7423 16.8024 14.8271C16.6903 15.2817 16.7975 15.7645 17.0117 16.7299L17.0783 17.0305C17.472 18.8048 17.6688 19.692 17.3252 20.0746C17.1967 20.2176 17.0298 20.3206 16.8444 20.3712C16.3482 20.5066 15.6437 19.9325 14.2348 18.7844C13.3096 18.0305 12.847 17.6536 12.3159 17.5688C12.107 17.5354 11.8941 17.5354 11.6852 17.5688C11.1541 17.6536 10.6915 18.0305 9.76638 18.7844C8.35742 19.9325 7.65295 20.5066 7.15675 20.3712C6.97133 20.3206 6.80442 20.2176 6.676 20.0746C6.33232 19.692 6.52915 18.8048 6.92283 17.0305L6.9895 16.7299C7.20371 15.7645 7.31082 15.2817 7.19876 14.8271C7.17786 14.7423 7.15142 14.6589 7.11962 14.5776C6.94915 14.1414 6.5834 13.8087 5.85189 13.1432L5.36961 12.7044C3.92456 11.3897 3.20204 10.7324 3.41022 10.1134C3.6184 9.49439 4.59131 9.40726 6.53712 9.23299L6.75206 9.21374C7.94097 9.10727 8.53543 9.05403 8.98828 8.71734C9.44113 8.38065 9.66333 7.82672 10.1077 6.71885L10.1443 6.62753Z" stroke="#323232" stroke-width="1.1"/>
+<svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0547 0.396973L15.5814 7.54287L23.4674 8.68877L17.761 14.2511L19.1081 22.1052L12.0547 18.397L5.00126 22.1052L6.34835 14.2511L0.64201 8.68877L8.52798 7.54287L12.0547 0.396973Z" fill="#cbd5db"/>
 </svg>

package/index.scss

@@ -33,6 +33,7 @@
 @import './form/FieldList/FieldListView';
 @import './form/FieldList/FieldListItemView';
 @import './form/FileField/FileFieldView';
+@import './form/ImageField/ImageFieldView';
 @import './form/FileField/FileFieldItemView';
 @import './form/FieldSet/FieldSetView';
 @import './form/Form/FormView';

package/layout/Header/HeaderView.js

@@ -44,7 +44,7 @@ var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function HeaderView(props) {
     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) },
+    return (React.createElement("header", { className: bem(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 || '')),

package/layout/Header/HeaderView.scss

@@ -1,15 +1,22 @@
-$body-bg: transparent;
+@import '../../scss/variables';
 
 .HeaderView {
-  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
-  background-color: $body-bg;
+  display: flex;
+  justify-content: space-between;
+  padding: 15px 20px;
+  width: 100%;
+  background-color: $gray;
 
   a:hover {
     opacity: .7;
   }
 
   &__logo {
+    .ButtonView__text {
+      color: $text-color;
+    }
   }
+  
   &__logo-image {
     margin-right: 12px;
     display: inline-block;

package/layout/Notifications/NotificationsItemView.js

@@ -22,11 +22,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var react_1 = require("react");
 var react_transition_group_1 = require("react-transition-group");
 var hooks_1 = require("@steroidsjs/core/hooks");
+var AlertView_1 = __importDefault(require("../../content/Alert/AlertView"));
 function NotificationsItemView(props) {
     var _a, _b;
     var _c = (0, react_1.useState)(false), isShow = _c[0], setIsShow = _c[1];
@@ -34,15 +38,12 @@ function NotificationsItemView(props) {
         setIsShow(!props.isClosing);
     }, [props.isClosing]);
     var bem = (0, hooks_1.useBem)('NotificationsItemView');
-    return (React.createElement(react_transition_group_1.CSSTransition, { "in": isShow, timeout: 1000, classNames: bem(bem.block((_a = {},
+    return (React.createElement(react_transition_group_1.CSSTransition, { "in": isShow, timeout: 1000, classNames: bem.block((_a = {},
             _a[props.position] = true,
-            _a))), unmountOnExit: true },
-        React.createElement("div", { className: bem(bem.block((_b = {},
-                _b[props.level] = true,
+            _a)), unmountOnExit: true },
+        React.createElement("div", { className: bem.block((_b = {},
                 _b[props.position] = true,
-                _b)), 'alert', 'alert-' + props.level) },
-            React.createElement("div", { className: bem.element('body') },
-                React.createElement("div", { className: bem.element('message') }, props.message),
-                React.createElement("button", { className: bem.element('close'), onClick: props.onClose })))));
+                _b)) },
+            React.createElement(AlertView_1["default"], { onClose: props.onClose, message: props.message, type: props.level, showClose: true, isExist: true, isVisible: true, showIcon: true }))));
 }
 exports["default"] = NotificationsItemView;

package/layout/Notifications/NotificationsItemView.scss

@@ -1,51 +1,13 @@
 .NotificationsItemView {
+
   overflow: hidden;
   max-height: 120px;
   padding: 0;
 
   border-width: 0;
-  box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.1);
 
   transition: opacity .6s, transform .4s,
   max-height .6s .4s, margin .6s .6s;
-
-  &__body{
-    width: 100%;
-    height: 100%;
-
-    padding: 0.75rem 1.8rem 0.75rem 1.25rem;
-    border: 1px solid transparent;
-    border-color: inherit;
-  }
-
-  &__close{
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 25px;
-    height: 25px;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .IconView{
-      svg{
-        width: 10px;
-      }
-    }
-
-    svg{
-      opacity: 0.4;
-      transition: opacity .1s ease-in;
-    }
-    &:hover svg{
-      opacity: 1;
-    }
-  }
-
-
   // Styles for React-Transition-Groups
   ////////////////////////////////////////
 

package/layout/Notifications/NotificationsView.scss

@@ -1,6 +1,9 @@
 .NotificationsView {
   z-index: 9999;
   position: fixed;
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
   width: 400px;
 
   margin: 0;

package/list/ControlsColumnView/ControlsColumnView.scss

@@ -1,2 +1,8 @@
 .ControlsColumnView {
-}
+    display: flex;
+    align-items: center;
+
+    .ButtonView {
+        border: none;
+    }
+}

package/list/Empty/EmptyView.js

@@ -27,6 +27,6 @@ var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function EmptyView(props) {
     var bem = (0, hooks_1.useBem)('EmptyView');
-    return (React.createElement("div", { className: bem(bem.block(), 'text-center p-5', props.className) }, props.text));
+    return (React.createElement("div", { className: bem(bem.block(), props.className), style: props.style }, props.text));
 }
 exports["default"] = EmptyView;

package/list/Empty/EmptyView.scss

@@ -1,3 +1,7 @@
-.EmptyView {
+@import '../../scss/variables';
 
+.EmptyView {
+  text-align: center;
+  padding: 20px;
+  color: $text-color;
 }

package/list/List/ListView.scss

@@ -15,16 +15,12 @@
         margin-bottom: 3px;
 
         &-sizes {
-            width: fit-content;
-
-            .PaginationSizeView__sizes {
-                display: flex;
-                flex-flow: row nowrap;
-            }
+            margin-bottom: 10px;
+            width: 100%;
         }
 
         &-button {
-            margin: 0 auto;
+            margin: 16px auto 0;
         }
     }
 

package/list/PaginationSize/PaginationSizeView.js

@@ -22,16 +22,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var ButtonGroup_1 = __importDefault(require("@steroidsjs/core/ui/nav/ButtonGroup"));
 function PaginationSizeView(props) {
     var bem = (0, hooks_1.useBem)('PaginationSizeView');
     return (React.createElement("div", { className: bem(props.className, bem.block()) },
-        React.createElement("ul", { className: bem(bem.element('sizes'), 'pagination', "pagination-".concat(props.size)) }, props.items.map(function (item, index) { return (React.createElement("li", { key: index, className: bem(bem.element('sizes-item', { active: item.isActive }), 'page-item', item.isActive && 'active') },
-            React.createElement("button", { className: bem(bem.element('link'), 'page-link'), onClick: function (e) {
-                    e.preventDefault();
-                    props.onSelect(item.size);
-                } }, item.label))); }))));
+        React.createElement(ButtonGroup_1["default"], { items: props.items, onClick: props.onSelect, activeButton: props.defaultValue, buttonProps: props.buttonProps })));
 }
 exports["default"] = PaginationSizeView;

package/list/PaginationSize/PaginationSizeView.scss

@@ -2,12 +2,4 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-
-  &__label {
-    margin-right: 5px;
-  }
-
-  &__sizes {
-    margin-bottom: 0;
-  }
 }

package/nav/ButtonGroup/ButtonGroupView.js

@@ -19,14 +19,15 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 var form_1 = require("@steroidsjs/core/ui/form");
 function ButtonGroupView(props) {
     var bem = (0, hooks_1.useBem)('ButtonGroupView');
-    return (react_1["default"].createElement("div", { className: bem(bem.block({
+    return (react_1["default"].createElement("ul", { className: bem(bem.block({
             size: props.size
         }), props.className), style: props.style }, props.items.map(function (item, index) {
         var isActive = props.activeButton === item.id;
-        return (react_1["default"].createElement(form_1.Button, __assign({ key: index, className: bem.element('button', {
-                "default": !isActive,
-                active: isActive
-            }), label: item.label, onClick: function () { return props.onClick(item.id); } }, props.buttonProps)));
+        return (react_1["default"].createElement("li", { key: index },
+            react_1["default"].createElement(form_1.Button, __assign({ className: bem.element('button', {
+                    "default": !isActive,
+                    active: isActive
+                }), label: item.label, onClick: function () { return props.onClick(item.id); } }, props.buttonProps))));
     })));
 }
 exports["default"] = ButtonGroupView;

package/nav/Controls/ControlsView.scss

@@ -1,8 +1,16 @@
 .ControlsView {
-    display: flex;
+    display: inline-flex;
     flex-flow: row;
     justify-content: space-between;
 
+    .ButtonView__icon { 
+         svg {
+            path, circle, rect { 
+                stroke: inherit;
+            }
+        }
+    }
+
     a {
         display: inline-block;
         width: 100%;

package/nav/Nav/NavBarView.js

@@ -42,9 +42,14 @@ var Button_1 = __importDefault(require("@steroidsjs/core/ui/form/Button"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function NavBarView(props) {
     var bem = (0, hooks_1.useBem)('NavBarView');
-    return (React.createElement("div", { className: bem('navbar-expand-lg navbar-nav', props.dark && 'navbar-dark bg-dark', bem.block(), props.className) },
-        React.createElement("div", { className: 'navbar-nav px-3' }, props.items.map(function (item, index) { return (React.createElement("li", { key: item.id || index, className: bem('nav-item text-nowrap', item.isActive && 'active') },
-            React.createElement(Button_1["default"], __assign({ link: true, className: bem('nav-link', item.isActive && 'active'), onClick: function () { return props.onClick(item, index); } }, item)))); })),
-        props.children));
+    return (React.createElement("div", { className: bem(bem.block({
+            size: props.size
+        }), props.className) },
+        React.createElement("ul", { className: bem.element('list') }, props.items.map(function (item, index) { return (React.createElement("li", { key: item.id || index, className: bem(bem.element('list-item', {
+                active: item.isActive,
+                disabled: item.disabled
+            }), props.navClassName) },
+            React.createElement(Button_1["default"], __assign({ size: props.size, link: !item.isActive, onClick: function () { return props.onClick(item, index); } }, item)))); })),
+        React.createElement("div", { className: bem.element('content') }, props.children)));
 }
 exports["default"] = NavBarView;

package/nav/Nav/NavBarView.scss

@@ -1,2 +1,33 @@
 .NavBarView {
-}
+    $root: &;
+
+    color: $text-color;
+
+    &__list {
+        display: flex;
+        flex-flow: column nowrap;
+        row-gap: 8px;
+
+        &-item {
+            .ButtonView__text {
+                color: $element-placeholder-color;
+            }
+
+
+            &_active { 
+                .ButtonView__text { 
+                    color: $white;
+                }
+            }
+
+            &_disabled {
+                cursor: not-allowed;
+                .ButtonView {
+                    pointer-events: none;
+                }
+            }
+        }
+    }
+
+    @include navs-sizes($root);
+}

package/nav/Nav/NavButtonView.js

@@ -42,8 +42,14 @@ var Button_1 = __importDefault(require("@steroidsjs/core/ui/form/Button"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function NavButtonView(props) {
     var bem = (0, hooks_1.useBem)('NavButtonView');
-    return (React.createElement("div", { className: bem(bem.block(), props.className) },
-        React.createElement("div", { className: bem(props.children && 'mb-3', bem.element('nav')) }, props.items.map(function (item, index) { return (React.createElement(Button_1["default"], __assign({ key: item.id || index, color: 'secondary', outline: !item.isActive, disabled: props.disabled, onClick: function () { return props.onClick(item, index); }, className: bem.element('nav-item') }, item))); })),
+    return (React.createElement("div", { className: bem(bem.block({
+            size: props.size
+        }), props.className) },
+        React.createElement("ul", { className: bem.element('list') }, props.items.map(function (item, index) { return (React.createElement("li", { key: item.id || index, className: bem(bem.element('list-item', {
+                active: item.isActive,
+                disabled: item.disabled
+            }), props.navClassName) },
+            React.createElement(Button_1["default"], __assign({ size: props.size, color: 'secondary', outline: !item.isActive, disabled: item.disabled, onClick: function () { return props.onClick(item, index); } }, item)))); })),
         React.createElement("div", { className: bem.element('content') }, props.children)));
 }
 exports["default"] = NavButtonView;

package/nav/Nav/NavButtonView.scss

@@ -1,7 +1,8 @@
 .NavButtonView {
-  &__nav-item {
-    &:not(:last-child) {
-      margin-right: 5px;
+  
+    &__list { 
+        display: flex;
+        flex-flow: column nowrap;
+        row-gap: 8px;
     }
-  }
-}
+}

package/nav/Nav/NavIconView.js

@@ -40,10 +40,15 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var Button_1 = __importDefault(require("@steroidsjs/core/ui/form/Button"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var DEFAULT_ICON = 'add';
 function NavIconView(props) {
     var bem = (0, hooks_1.useBem)('NavIconView');
     return (React.createElement("div", { className: bem(bem.block(), props.className) },
-        props.items.map(function (item, index) { return (React.createElement(Button_1["default"], __assign({ icon: props.icon ? props.icon : 'add', key: item.id || index, link: true, onClick: function () { return props.onClick(item, index); } }, item, { label: null, hint: item.hint || item.label || null }))); }),
-        props.children));
+        React.createElement("ul", { className: bem.element('list') }, props.items.map(function (item, index) { return (React.createElement("li", { key: item.id || index, className: bem(bem.element('list-item', {
+                active: item.isActive,
+                disabled: item.disabled
+            }), props.navClassName) },
+            React.createElement(Button_1["default"], __assign({ icon: props.icon ? props.icon : DEFAULT_ICON, link: true, onClick: function () { return props.onClick(item, index); } }, item, { label: null, hint: item.hint || item.label || null })))); })),
+        React.createElement("div", { className: bem.element('content') }, props.children)));
 }
 exports["default"] = NavIconView;

package/nav/Nav/NavIconView.scss

@@ -1,9 +1,8 @@
 .NavIconView {
-  > a {
-    margin-right: 5px;
-
-    &:last-child {
-      margin-right: 0;
+    &__list {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        column-gap: 24px;
     }
-  }
-}
+}

package/nav/Nav/NavLinkView.js

@@ -42,8 +42,14 @@ var Button_1 = __importDefault(require("@steroidsjs/core/ui/form/Button"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function NavLinkView(props) {
     var bem = (0, hooks_1.useBem)('NavLinkView');
-    return (React.createElement("div", { className: bem(bem.block(), props.className) },
-        React.createElement("div", { className: bem.element('nav mb-3') }, props.items.map(function (item, index) { return (React.createElement(Button_1["default"], __assign({ key: item.id || index, link: true, onClick: function () { return props.onClick(item, index); }, className: bem.element('nav-item', { active: item.isActive }) }, item))); })),
+    return (React.createElement("div", { className: bem(bem.block({
+            size: props.size
+        }), props.className) },
+        React.createElement("ul", { className: bem.element('list') }, props.items.map(function (item, index) { return (React.createElement("li", { key: item.id || index, className: bem(bem.element('list-item', {
+                active: item.isActive,
+                disabled: item.disabled
+            }), props.navClassName) },
+            React.createElement(Button_1["default"], __assign({ link: true, onClick: function () { return props.onClick(item, index); } }, item)))); })),
         React.createElement("div", { className: bem.element('content') }, props.children)));
 }
 exports["default"] = NavLinkView;

package/nav/Nav/NavLinkView.scss

@@ -1,7 +1,16 @@
 .NavLinkView {
-  &__nav-item {
-    &:not(:last-child) {
-      margin-right: 10px;
+    &__list {
+        display: flex;
+        flex-flow: row nowrap;
+        column-gap: 24px;
+
+        &-item {
+            &_disabled {
+                cursor: not-allowed;
+                .ButtonView {
+                    pointer-events: none;
+                }
+            }
+        }
     }
-  }
-}
+}

package/nav/Nav/NavListView.js

@@ -42,16 +42,20 @@ var Link_1 = __importDefault(require("@steroidsjs/core/ui/nav/Link"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function NavListView(props) {
     var bem = (0, hooks_1.useBem)('NavListView');
-    var renderItems = function (items) {
+    var renderItems = function (items, parentItemProps) {
+        if (parentItemProps === void 0) { parentItemProps = null; }
         if (!items || items.length === 0) {
             return null;
         }
-        return items.map(function (item, index) { return (React.createElement("li", { key: index, className: bem('nav-item', bem.element('item'), props.navClassName) },
-            React.createElement(Link_1["default"], __assign({ onClick: function () { return props.onClick(item, index); } }, item, { key: item.id || index, className: bem(item.isActive && 'active', bem.element('item-link'), item.className) })),
-            item.items && item.items.length > 0 && (React.createElement("ul", { className: bem('nav flex-column', bem.element('sub-list')) }, renderItems(item.items))))); });
+        return items.map(function (item, index) { return (React.createElement("li", { key: item.id || index, className: bem(bem.element('list-item', {
+                active: item.isActive,
+                disabled: item.disabled
+            }), props.navClassName) },
+            React.createElement(Link_1["default"], __assign({ onClick: function () { return props.onClick(item, index); } }, item, { disabled: (parentItemProps === null || parentItemProps === void 0 ? void 0 : parentItemProps.disabled) || item.disabled })),
+            item.items && item.items.length > 0 && (React.createElement("ul", { className: bem.element('sub-list') }, renderItems(item.items, item))))); });
     };
-    return (React.createElement("ul", { className: bem('nav flex-column', bem.block(), props.className) },
-        renderItems(props.items),
-        props.children));
+    return (React.createElement("div", { className: bem(bem.block(), props.className) },
+        React.createElement("ul", { className: bem.element('list') }, renderItems(props.items)),
+        React.createElement("div", { className: bem.element('content') }, props.children)));
 }
 exports["default"] = NavListView;

package/nav/Nav/NavListView.scss

@@ -1,12 +1,13 @@
 .NavListView {
-  &__item {
+    
+    &__list{ 
+        display: flex;
+        flex-flow: column nowrap;
+    }
 
-  }
-  &__item-link {
-    padding: 5px 10px;
-    display: inline-block;
-  }
-  &__sub-list {
-    margin-left: 15px;
-  }
-}
+    &__sub-list { 
+        display: flex;
+        flex-flow: column;
+        padding: 5px;
+    }    
+}

package/nav/Nav/NavTabsView.js

@@ -42,9 +42,14 @@ var Button_1 = __importDefault(require("@steroidsjs/core/ui/form/Button"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function NavTabsView(props) {
     var bem = (0, hooks_1.useBem)('NavTabsView');
-    return (React.createElement("div", { className: bem(bem.block(), props.className) },
-        React.createElement("div", { className: bem('nav nav-tabs', !props.children && 'mb-3') }, props.items.map(function (item, index) { return (React.createElement("li", { key: item.id || index, className: 'nav-item' },
-            React.createElement(Button_1["default"], __assign({ link: true, onClick: function () { return props.onClick(item, index); } }, item, { className: bem('nav-link', item.isActive && 'active', item.className) })))); })),
-        props.children));
+    return (React.createElement("div", { className: bem(bem.block({
+            size: props.size
+        }), props.className) },
+        React.createElement("ul", { className: bem.element('list') }, props.items.map(function (item, index) { return (React.createElement("li", { key: item.id || index, className: bem(bem.element('list-item', {
+                active: item.isActive,
+                disabled: item.disabled
+            }), props.navClassName) },
+            React.createElement(Button_1["default"], __assign({ size: props.size, link: !item.isActive, onClick: function () { return props.onClick(item, index); } }, item)))); })),
+        React.createElement("div", { className: bem.element('content') }, props.children)));
 }
 exports["default"] = NavTabsView;

package/nav/Nav/NavTabsView.scss

@@ -1,2 +1,48 @@
 .NavTabsView {
-}
+    $root: &;
+
+    color: $text-color;
+
+    &__list {
+        display: inline-flex;
+        flex-flow: row nowrap;
+        align-items: center;
+
+        border-bottom: 1px solid $element-border-color;
+
+        &-item {
+            .ButtonView__text {
+                color: $element-placeholder-color;
+            }
+
+            &_active {
+                .ButtonView__text {
+                    color: $white;
+                }
+
+                .ButtonView {
+                    &_size {
+                        &_sm {
+                            border-radius: $radius-small $radius-small 0 0;
+                        }
+                        &_md {
+                            border-radius: $radius-large $radius-large 0 0;
+                        }
+                        &_lg {
+                            border-radius: $radius-large $radius-large 0 0;
+                        }
+                    }
+                }
+            }
+
+            &_disabled {
+                cursor: not-allowed;
+                .ButtonView {
+                    pointer-events: none;
+                }
+            }
+        }
+    }
+
+    @include navs-sizes($root);
+}

package/nav/Tree/TreeView.scss

@@ -1,65 +1,69 @@
 .TreeView {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-
-  &__item {
+    list-style: none;
+    margin: 0;
     padding: 0;
-    cursor: pointer;
 
-    > .ButtonView {
-      margin: 2px 0;
+    &__item {
+        padding: 0;
+        cursor: pointer;
+
+        > .ButtonView {
+            margin: 2px 0;
+        }
     }
-  }
 
-  &__item-label {
-    position: relative;
-    padding: 5px 10px;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    background-color: $background-color;
+    &__item-label {
+        position: relative;
+        padding: 5px 10px;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        background-color: $background-color;
 
-    .ButtonView__link {
-      color: $text-color;
-    }
+        .ButtonView__link {
+            .ButtonView__text {
+                color: $text-color;
+            }
+        }
 
-    // &:hover {
-    //   color: $list-group-action-hover-color;
-    //   background-color: $list-group-hover-bg;
-    // }
+        // &:hover {
+        //   color: $list-group-action-hover-color;
+        //   background-color: $list-group-hover-bg;
+        // }
 
-    &, &:hover {
-      text-decoration: none !important;
+        &,
+        &:hover {
+            text-decoration: none !important;
+        }
     }
-  }
-  &__item_selected &__item-label {
-    background-color: $secondary;
-    &, &::before {
-      color: $text-color;
+    &__item_selected &__item-label {
+        background-color: $secondary;
+        &,
+        &::before {
+            color: $text-color;
+        }
+    }
+    &__item-label::before {
+        display: inline-block;
+        content: "";
+        transform: rotate(0);
+        width: 21px;
+        height: 20px;
+        font-size: 12px;
+        font-weight: bold;
+        margin-left: 10px;
+        color: $text-color;
+        position: relative;
+        top: 1px;
+        left: 3px;
+    }
+    &__item_has-items &__item-label::before {
+        content: ">";
     }
-  }
-  &__item-label::before {
-    display: inline-block;
-    content: '';
-    transform: rotate(0);
-    width: 21px;
-    height: 20px;
-    font-size: 12px;
-    font-weight: bold;
-    margin-left: 10px;
-    color: $text-color;
-    position: relative;
-    top: 1px;
-    left: 3px;
-  }
-  &__item_has-items &__item-label::before {
-    content: '>';
-  }
 
-  &__item_opened &__item-label::before {
-    top: 7px;
-    left: -4px;
-    transform: rotate(90deg);
-  }
+    &__item_opened &__item-label::before {
+        top: 7px;
+        left: -4px;
+        transform: rotate(90deg);
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.66",
+    "version": "3.0.0-beta.68",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -35,7 +35,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.45",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.46",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",
@@ -53,6 +53,6 @@
         "typescript": "^4.9.5"
     },
     "peerDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.45"
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.46"
     }
 }

package/scss/mixins/date.scss

@@ -401,6 +401,10 @@ $date-sizes: map-merge(
             }
         }
 
+        .TimePanelView__button_now {
+            @include calendar-button();
+        }
+
         .TimePanelView__button_ok {
             @include calendar-button();
         }

package/scss/mixins/index.scss

@@ -2,4 +2,5 @@
 @import "typography";
 @import "scroll";
 @import "customMixins";
-@import "date";
+@import "date";
+@import "navs";

package/scss/mixins/navs.scss

@@ -0,0 +1,39 @@
+@mixin navs-sizes($root) {
+    &_size {
+        &_lg {
+            .ButtonView__link {
+                padding: 16px;
+            }
+
+            #{$root}__list-item_active {
+                .ButtonView {
+                    padding: 16px;
+                }
+            }
+        }
+
+        &_md {
+            .ButtonView__link {
+                padding: 12px;
+            }
+
+            #{$root}__list-item_active {
+                .ButtonView {
+                    padding: 12px;
+                }
+            }
+        }
+
+        &_sm {
+            .ButtonView__link {
+                padding: 8px;
+            }
+
+            #{$root}__list-item_active {
+                .ButtonView {
+                    padding: 8px;
+                }
+            }
+        }
+    }
+}

package/scss/variables/common/colors.scss

@@ -194,6 +194,12 @@ $color-themes: map-merge(
             "color-light": $danger-light,
             "text-color": $white,
         ),
+        "error": (
+            "color": $danger,
+            "color-dark": $danger-dark,
+            "color-light": $danger-light,
+            "text-color": $white,
+        ),
         "warning": (
             "color": $warning,
             "color-dark": $warning-dark,