@steroidsjs/bootstrap 3.0.0-beta.49 → 3.0.0-beta.50

package/content/Accordion/AccordionItemView.js

@@ -30,6 +30,7 @@ var React = __importStar(require("react"));
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var renderIcon_1 = __importDefault(require("../../utils/renderIcon"));
+var ICON_SIZE = '_24x24';
 function AccordionItemView(props) {
     var _a;
     var bem = (0, hooks_1.useBem)('AccordionItemView');

package/content/Calendar/CalendarView.scss

@@ -1,198 +1,231 @@
+:root {
+    --day-background-color-hover: rgba(0, 0, 0, 0.1);
+    --calendar-border-color: #f1f5f7;
+}
+
+html[data-theme="dark"] {
+    --day-background-color-hover: rgba(255, 255, 255, 0.1);
+    --calendar-border-color: #5b5c6b;
+}
+
+$day-background-color-hover: var(--day-background-color-hover);
+$calendar-border-color: var(--calendar-border-color);
+
 .CalendarView {
-  $root: &;
-
-  position: relative;
-  color: $calendar-text-color;
-  font-weight: $calendar-font-weight;
-  user-select: none;
-
-  .DayPicker-wrapper {
-    padding-bottom: 0;
-  }
-  .DayPicker-Months {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-  .DayPicker-Month {
-    display: table;
-    border-collapse: separate;
-    border-spacing: 10px;
-    margin: 0;
-  }
-
-  // Body
-
-  .DayPicker-Weekdays {
-    display: table-header-group;
-    margin-top: 1em;
-  }
-  .DayPicker-WeekdaysRow {
-    display: table-row;
-  }
-  .DayPicker-Weekday {
-    display: table-cell;
-    width: 30px;
-    height: 30px;
-    padding: 0;
-    color: inherit;
-    text-align: center;
-    font-size: 0.875em;
-  }
-  .DayPicker-Weekday abbr[title] {
-    border-bottom: none;
-    text-decoration: none;
-  }
-
-  .DayPicker-Body {
-    display: table-row-group;
-  }
-  .DayPicker-Week {
-    display: table-row;
-
-    &--disabled {
-      pointer-events: none;
-      opacity: .5;
-    }
-  }
-  .DayPicker-Day {
-    position: relative;
-    display: table-cell;
-
-    padding: 0;
-    border-radius: $calendar-day-border-radius;
-
-    vertical-align: middle;
-    text-align: center;
-    cursor: pointer;
-
-    transition-property: background-color, box-shadow, color;
-    transition-duration: .1s;
-
-    &::before {
-      content: '';
-      height: 30px;
-      left: 0;
-      position: absolute;
-      right: 0;
-      top: 50%;
-      transform: translate(-5px, -50%);
-      width: 40px;
-      z-index: 1;
-    }
-
-    &--outside {
-      color: $calendar-secondary-color;
-    }
-
-    &--today {
-      #{$root}__day {
-        box-shadow: $calendar-today-shadow;
-      }
-    }
-
-    &--disabled {
-      pointer-events: none;
-      opacity: .5;
-    }
-  }
-
-  // Footer
-
-  .DayPicker-Footer {
-    height: 50px;
-
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    justify-content: center;
-    padding: 0 10px;
-
-    border-top: 1px solid $calendar-secondary-color;
-  }
-  .DayPicker-TodayButton {
-    border: none;
-    background-color: transparent;
-    background-image: none;
-    box-shadow: none;
-    font-size: 0.875em;
-    cursor: pointer;
-    color: $calendar-primary-color;
-    font-weight: $calendar-font-weight;
-  }
-
-  // Days selection
-
-  // Selected day
-  .DayPicker-Day--selected:not(.DayPicker-Day--inRange) {
-    color: $calendar-selected-text-color;
-    border-radius: $calendar-day-border-radius;
-    background-color: $calendar-primary-color;
-    box-shadow: $calendar-selected-shadow;
-  }
-
-  // Hover
-  .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
-    background-color: $calendar-secondary-light-color !important;
-    box-shadow: $calendar-hover-shadow;
-  }
-
-  &__day {
+    $root: &;
     position: relative;
-    z-index: 1;
-    width: 30px;
-    height: 30px;
-    line-height: 30px;
-    border-radius: $calendar-day-border-radius;
-  }
+    color: $text-color;
+    font-weight: $font-weight-md;
+    user-select: none;
+    padding: 12px;
 
-  &_ranged {
+    .DayPicker-wrapper {
+        padding-bottom: 0;
+    }
 
-    .DayPicker-Day {
-      &--start {
-        color: $white;
+    .DayPicker-Months {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        row-gap: 12px;
+    }
+
+    .DayPicker-Month {
+        margin: 0;
+    }
 
-        #{$root}__day {
-          background-color: $calendar-primary-color;
-          box-shadow: $calendar-selected-shadow;
+    // Body
+    .DayPicker-Weekdays {
+        margin-top: 0;
+    }
+
+    .DayPicker-WeekdaysRow {
+        display: inline-flex;
+        column-gap: 16px;
+    }
+
+    .DayPicker-Weekday {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        width: 34px;
+        height: 34px;
+        padding: 0;
+        color: inherit;
+        text-align: center;
+        vertical-align: middle;
+        font-size: $font-size-base;
+        line-height: $line-height-base;
+        font-weight: $font-weight-lg;
+        text-transform: capitalize;
+    }
+
+    .DayPicker-Weekday abbr[title] {
+        border-bottom: none;
+        text-decoration: none;
+    }
+
+    .DayPicker-Body {
+        display: flex;
+        flex-flow: column nowrap;
+        row-gap: 12px;
+    }
+
+    .DayPicker-Week {
+        display: flex;
+        width: 100%;
+        column-gap: 16px;
+
+        &--disabled {
+            pointer-events: none;
+            opacity: 0.5;
         }
+    }
+
+    .DayPicker-Day {
+        position: relative;
+        padding: 0;
+        border-radius: $radius-large;
+
+        vertical-align: middle;
+        text-align: center;
+        cursor: pointer;
+
+        transition-property: background-color, box-shadow, color;
+        transition-duration: 0.1s;
 
         &::before {
-          background-color: $calendar-primary-light-color;
-          width: 10px;
-          transform: translate(25px, -50%);
+            content: "";
+            height: 30px;
+            left: 0;
+            position: absolute;
+            right: 0;
+            top: 50%;
+            transform: translate(-5px, -50%);
+            width: 40px;
+            z-index: 1;
         }
-      }
 
-      &--end {
-        color: #fff;
+        &--outside {
+            color: $placeholder-color;
+        }
 
-        #{$root}__day {
-          background-color: $calendar-primary-color;
-          box-shadow: $calendar-selected-shadow;
+        &--today {
+            #{$root}__day {
+                border: 1px solid $primary;
+                color: $primary;
+            }
         }
 
-        &::before {
-          background-color: $calendar-primary-light-color;
-          width: 10px;
+        &--disabled {
+            pointer-events: none;
+            opacity: 0.5;
         }
-      }
+    }
 
+    // Footer
+    .DayPicker-Footer {
+        margin-top: 8px;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        justify-content: flex-start;
+    }
 
-      &--inRange {
-        &::before {
-          background-color: $calendar-primary-light-color;
-        }
-      }
+    .DayPicker-TodayButton {
+        padding: 5px 12.5px;
+        border-radius: $radius-small;
+        border: 1px solid $gray;
+        background-color: transparent;
+        background-image: none;
+        box-shadow: none;
+        cursor: pointer;
+        color: $text-color;
+        font-size: $font-size-sm;
+        line-height: $line-height-lg;
+    }
 
-      &--outRange {
-        pointer-events: none;
-        &::before {
-          background-color: $calendar-primary-light-color;
+    // Days selection
+    // Selected day
+    .DayPicker-Day--selected:not(.DayPicker-Day--inRange) {
+        color: $white;
+        background-color: $primary;
+    }
+
+    .DayPicker-Day--selected.DayPicker-Day--today .CalendarView__day {
+        color: $white;
+    }
+
+    // Hover
+    .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):not(
+            .DayPicker-Day--today
+        ):hover {
+        background-color: $day-background-color-hover;
+    }
+
+    .DayPicker-Day--today:hover {
+        background-color: transparent;
+
+        .CalendarView__day {
+            color: $text-color;
         }
-      }
+    }
 
+    &__day {
+        position: relative;
+        z-index: 1;
+        width: 34px;
+        height: 34px;
+        line-height: 30px;
+        border-radius: $radius-large;
+        display: flex;
+        justify-content: center;
+        align-items: center;
     }
 
-  }
+    &_ranged {
+        .DayPicker-Day {
+            &--start {
+                color: $white;
+
+                #{$root}__day {
+                    background-color: $calendar-primary-color;
+                    box-shadow: $calendar-selected-shadow;
+                }
+
+                &::before {
+                    background-color: $calendar-primary-light-color;
+                    width: 10px;
+                    transform: translate(25px, -50%);
+                }
+            }
+
+            &--end {
+                color: #fff;
+
+                #{$root}__day {
+                    background-color: $calendar-primary-color;
+                    box-shadow: $calendar-selected-shadow;
+                }
+
+                &::before {
+                    background-color: $calendar-primary-light-color;
+                    width: 10px;
+                }
+            }
+
+            &--inRange {
+                &::before {
+                    background-color: $calendar-primary-light-color;
+                }
+            }
+
+            &--outRange {
+                pointer-events: none;
+                &::before {
+                    background-color: $calendar-primary-light-color;
+                }
+            }
+        }
+    }
 }

package/content/Calendar/CaptionElement.js

@@ -57,16 +57,28 @@ function CaptionElement(props) {
         }
         return result;
     }, [fromYear, toYear]);
+    var icons = (0, react_1.useMemo)(function () { return [
+        {
+            name: 'double_arrow_left',
+            onClick: function () { return handleYearChange(currentYear - 1); }
+        },
+        {
+            name: 'arrow_left_24x24',
+            externalClass: 'one-arrow',
+            onClick: function () { return handleMonthChange(currentMonth - 1); }
+        },
+        {
+            name: 'arrow_right_24x24',
+            externalClass: 'one-arrow',
+            onClick: function () { return handleMonthChange(currentMonth + 1); }
+        },
+        {
+            name: 'double_arrow_right',
+            onClick: function () { return handleYearChange(currentYear + 1); }
+        },
+    ]; }, [currentYear, handleYearChange, currentMonth, handleMonthChange]);
     return (React.createElement("div", { className: bem(bem.block()) },
         React.createElement("div", { className: bem.element('container') },
-            React.createElement(Icon_1["default"], { className: bem.element('button'), onClick: function (e) {
-                    e.preventDefault();
-                    handleYearChange(currentYear - 1);
-                }, name: 'angle-double-left' }),
-            React.createElement(Icon_1["default"], { className: bem.element('button', 'one-arrow'), onClick: function (e) {
-                    e.preventDefault();
-                    handleMonthChange(currentMonth - 1);
-                }, name: 'angle-left' }),
             React.createElement("div", { className: bem.element('content-container'), onKeyPress: function (e) {
                     e.preventDefault();
                     toggleCaptionPanel();
@@ -76,14 +88,10 @@ function CaptionElement(props) {
                 }, role: 'button', tabIndex: 0 },
                 React.createElement("span", { className: bem.element('selected-month') }, months.find(function (month) { return month.id === currentMonth; }).label),
                 React.createElement("span", { className: bem.element('selected-year') }, years.find(function (year) { return year === currentYear; }))),
-            React.createElement(Icon_1["default"], { className: bem.element('button', 'one-arrow'), onClick: function (e) {
-                    e.preventDefault();
-                    handleMonthChange(currentMonth + 1);
-                }, name: 'angle-right' }),
-            React.createElement(Icon_1["default"], { className: bem.element('button'), onClick: function (e) {
+            React.createElement("div", { className: bem.element('container-icons') }, icons.map(function (icon, iconIndex) { return (React.createElement(Icon_1["default"], { key: iconIndex, name: icon.name, onClick: function (e) {
                     e.preventDefault();
-                    handleYearChange(currentYear + 1);
-                }, name: 'angle-double-right' })),
+                    icon.onClick();
+                }, className: bem.element('button', icon.externalClass) })); }))),
         isCaptionPanelVisible && (React.createElement("div", { className: bem.element('panel', { 'full-height': !props.showCalendarFooter }) },
             React.createElement("div", { className: bem.element('panel-header', 'months') }, __('Месяц')),
             React.createElement("div", { className: bem.element('panel-header', 'years') }, __('Год')),

package/content/Calendar/CaptionElement.scss

@@ -1,134 +1,154 @@
+:root {
+    --caption-arrow-background-color: #f1f5f7;
+    --caption-arrow-color: #323232;
+}
 
-.CaptionElement {
-  height: 45px;
-  display: table-caption;
-  padding: 0 10px;
-  border-bottom: 1px solid gray;
+html[data-theme="dark"] {
+    --caption-arrow-background-color: #323232;
+    --caption-arrow-color: #ffffff;
+}
 
-  & > div {
-    font-size: 14px;
-  }
+$caption-arrow-background-color: var(--caption-arrow-background-color);
+$caption-arrow-color: var(--caption-arrow-color);
 
-  &__container {
-    height: 100%;
+.CaptionElement {
+    height: 24px;
+    width: 100%;
     display: flex;
-  }
+    justify-content: space-between;
+    margin-bottom: 16px;
 
-  &__content-container {
-    margin: 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    &__container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
 
-    cursor: pointer;
-    transition: color .1s ease-in;
 
-    &:hover, &:active, &:focus {
-      color: $calendar-primary-color;
+        &-icons {
+            display: flex;
+            flex-flow: row nowrap;
+            column-gap: 8px;
+        }
     }
-  }
 
-  &__button {
-    width: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    &__content-container {
+        margin-right: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
-    &.IconView svg {
-      width: 12px;
-      fill: rgba(0, 0, 0, 0.25);
-      transition: fill .1s ease-in;
-    }
+        cursor: pointer;
+        transition: color 0.1s ease-in;
 
-    &_one-arrow.IconView svg {
-      width: 8px;
-    }
+        font-weight: $font-weight-lg;
+        font-size: $font-size-lg;
+        line-height: $line-height-lg;
 
-    &:hover svg {
-      fill: rgba(0, 0, 0, .7);
+        &:hover,
+        &:active,
+        &:focus {
+            color: $calendar-primary-color;
+        }
     }
-  }
-
-  &__selected-month, &__selected-year {
-    font-size: 16px;
-  }
-
-  &__selected-month {
-    margin-right: 5px;
-  }
-
-  // Panel changing Month/Year
-
-
-  &__panel {
-    z-index: 10;
-    position: absolute;
-    top: 45px;
-    left: 0;
-    right: 0;
-    bottom: 50px;
-    background-color: $white;
-
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 0fr 1fr;
-    gap: 0 0;
-    grid-template-areas:
-      "HeaderMonths HeaderMonths HeaderYears"
-      "Months1stCol Months2ndCol YearsCol";
-
-    &_full-height {
-      bottom: 0;
-    }
-  }
 
-  &__panel-header {
-    padding: 5px;
+    &__button {
+        cursor: pointer;
+        width: 24px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        rect {
+            fill: $caption-arrow-background-color;
+        }
+        path {
+            stroke: $caption-arrow-color;
+        }
+    }
 
-    text-align: center;
-    border-bottom: 1px solid gray;
-    background-color: $calendar-primary-light-color;
+    &__selected-month,
+    &__selected-year {
+        font-size: inherit;
+    }
 
-    &_months {
-      grid-area: HeaderMonths;
-      border-right: 1px solid gray;
+    &__selected-month {
+        margin-right: 5px;
     }
 
-    &_years {
-      grid-area: HeaderYears;
+    // Panel changing Month/Year
+    &__panel {
+        border-radius: $radius-large;
+        overflow: hidden;
+        z-index: 10;
+        position: absolute;
+        top: 45px;
+        left: 0;
+        right: 0;
+        bottom: 50px;
+        background-color: $element-background-color;
+        margin-bottom: 12px;
+
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-template-rows: 0fr 1fr;
+        gap: 0 0;
+        grid-template-areas:
+            "HeaderMonths HeaderMonths HeaderYears"
+            "Months1stCol Months2ndCol YearsCol";
+
+        &_full-height {
+            bottom: 0;
+        }
     }
-  }
 
-  &__panel-column-months {
-    border-right: 1px solid gray;
+    &__panel-header {
+        padding: 5px;
 
-    &_first {
-      grid-area: Months1stCol;
-    }
+        text-align: center;
+        border-bottom: 1px solid gray;
+        background-color: $primary-light;
 
-    &_second {
-      grid-area: Months2ndCol;
+        &_months {
+            grid-area: HeaderMonths;
+            border-right: 1px solid gray;
+        }
+
+        &_years {
+            grid-area: HeaderYears;
+        }
     }
-  }
 
-  &__panel-column-years {
-    height: 100%;
-    grid-area: YearsCol;
-    overflow: auto;
-  }
+    &__panel-column-months {
+        border-right: 1px solid gray;
+
+        &_first {
+            grid-area: Months1stCol;
+        }
 
-  &__panel-cell {
-    padding: 5px 15px;
-    cursor: pointer;
+        &_second {
+            grid-area: Months2ndCol;
+        }
+    }
 
-    &_selected {
-      background-color: $calendar-primary-light-color;
+    &__panel-column-years {
+        grid-area: YearsCol;
+        @include scrollWrapper(278px, 0, $scroll-thumb-color, $scroll-track-color);
     }
 
-    transition: background-color .1s ease-in;
+    &__panel-cell {
+        background-color: $element-background-color;
+        padding: 5px 15px;
+        cursor: pointer;
+        transition: background-color 0.1s ease-in;
+
+        &_selected {
+            background-color: $primary-light;
+        }
 
-    &:hover {
-      background-color: $calendar-secondary-light-color;
+        &:hover {
+            background-color: $primary-light;
+        }
     }
-  }
 }

package/form/DateField/DateFieldView.js

@@ -46,7 +46,7 @@ var Calendar_1 = __importDefault(require("@steroidsjs/core/ui/content/Calendar")
 function DateFieldView(props) {
     var bem = (0, hooks_1.useBem)('DateFieldView');
     var renderCalendar = (0, react_1.useCallback)(function () { return (React.createElement(Calendar_1["default"], __assign({}, props.calendarProps))); }, [props.calendarProps]);
-    return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose },
+    return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose, className: bem.element('dropdown') },
         React.createElement("div", { className: bem(bem.block({
                 size: props.size,
                 disabled: props.disabled,
@@ -54,12 +54,12 @@ function DateFieldView(props) {
                 'is-invalid': !!props.errors
             }), props.className), style: props.style },
             React.createElement("div", { className: bem.element('body') },
-                React.createElement("input", __assign({}, props.inputProps, { onChange: function (e) { return props.inputProps.onChange(e.target.value); }, className: bem(bem.element('input', { size: props.size }), props.isInvalid && 'is-invalid', props.inputProps.className) })),
+                React.createElement("input", __assign({}, props.inputProps, { onChange: function (e) { return props.inputProps.onChange(e.target.value); }, className: bem(bem.element('input'), props.inputProps.className) })),
                 React.createElement("div", { className: bem.element('icon-container') },
-                    props.icon && (React.createElement(Icon_1["default"], { className: bem.element('icon'), name: typeof props.icon === 'string' ? props.icon : 'calendar-alt' })),
-                    props.showRemove && props.inputProps.value && (React.createElement(Icon_1["default"], { className: bem.element('icon', 'close'), onClick: function (e) {
+                    !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 && (React.createElement(Icon_1["default"], { className: bem.element('close-icon'), onClick: function (e) {
                             e.preventDefault();
                             props.onClear();
-                        }, name: 'times-circle' })))))));
+                        }, name: 'cross_8x8' })))))));
 }
 exports["default"] = DateFieldView;

package/form/DateField/DateFieldView.scss

@@ -1,81 +1,165 @@
+:root {
+    --date-icon-default-color: #cbd5db;
+    --date-icon-close-default-color: #323232;
+    --date-icon-disabled-color: rgba(0, 0, 0, 0.1);
+}
+
+html[data-theme="dark"] {
+    --date-icon-default-color: #5b5c6b;
+    --date-icon-close-default-color: #ffffff;
+    --date-icon-disabled-color: rgba(255, 255, 255, 0.1);
+}
+
+$date-icon-default-color: var(--date-icon-default-color);
+$date-icon-close-default-color: var(--date-icon-close-default-color);
+$date-icon-disabled-color: var(--date-icon-disabled-color);
+
 .DateFieldView {
-  $root: &;
-
-  padding-right: 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: $grey-disabled;
-    cursor: not-allowed;
-    input {
-      cursor: inherit;
+    $root: &;
+    position: relative;
+
+    &__input {
+        position: relative;
+        width: 100%;
+        border: 1px solid $border-color;
+        color: $text-color;
+        font-size: inherit;
+        line-height: $line-height-lg;
+        background-color: $element-background-color;
+
+        &:active {
+            border-color: $primary;
+        }
+
+        &::placeholder {
+            color: $placeholder-color;
+        }
+
+        &:disabled {
+            border: none;
+            background-color: $background-disabled-color;
+        }
     }
-  }
-  &_no-border {
-    border: unset;
-  }
-
-  &__body {
-    height: 100%;
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-
-    &:hover #{$root}__icon_close {
-      opacity: 1;
+
+    &__body {
+        position: relative;
+
+        &::before {
+            position: absolute;
+            display: block;
+            width: 100%;
+            height: 100%;
+            content: "";
+            top: 0;
+            left: 0;
+            border: 4px solid $primary-light;
+            transform: translate(-4px, -4px);
+            opacity: 0;
+            transition: opacity 150ms ease-in-out;
+        }
     }
-  }
-
-  &__input {
-    width: 100%;
-    flex-grow: 1;
-    border: none;
-    outline: none;
-    background-color: transparent;
-    padding: $input-padding-y $input-padding-x;
-  }
-
-  &__icon-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  &__icon {
-    display: flex;
-    height: 16px;
-
-    path {
-      fill: $grey-light;
-      transition: fill .1s ease-in;
+
+    &:focus-within:not(:active) {
+        #{$root}__body {
+            &::before {
+                opacity: 1;
+            }
+        }
+
+        #{$root}__input {
+            border-color: transparent;
+        }
     }
 
-    &_close{
-      position: absolute;
-      background-color: $white;
+    &__icon-container {
+        position: absolute;
+        top: 50%;
+        right: 8px;
+        transform: translateY(-50%);
+        width: 24px;
+        height: 24px;
 
-      opacity: 0;
-      transition: opacity .2s ease-in;
+        > * {
+            display: inline-flex;
+            flex-flow: row nowrap;
+            width: 100%;
+            height: 100%;
+            justify-content: center;
+            align-items: center;
+        }
+
+        #{$root}__date-icon {
+            path,
+            circle {
+                stroke: $date-icon-default-color;
+            }
+        }
+
+        #{$root}__close-icon {
+            cursor: pointer;
+            path,
+            circle {
+                stroke: $date-icon-close-default-color;
+            }
+        }
+    }
+
+    &_size {
+        &_lg {
+            #{$root}__input {
+                border-radius: $radius-large;
+                padding: 16px 8px;
+                padding-right: 40px;
+            }
+
+            #{$root}__body::before {
+                border-radius: calc($radius-large + 4px);
+            }
+
+            font-size: $line-height-sm;
+        }
+
+        &_md {
+            #{$root}__input {
+                border-radius: $radius-large;
+                padding: 11px 8px;
+                padding-right: 40px;
+            }
+
+            #{$root}__body::before {
+                border-radius: calc($radius-large + 4px);
+            }
+
+            font-size: $font-size-base;
+        }
+
+        &_sm {
+            #{$root}__input {
+                border-radius: $radius-small;
+                padding: 5px 8px;
+                padding-right: 40px;
+            }
+
+            font-size: $font-size-sm;
+
+            #{$root}__body::before {
+                border-radius: calc($radius-small + 4px);
+            }
+        }
+    }
+
+    &_disabled {
+        #{$root}__date-icon {
+            path,
+            circle {
+                stroke: $date-icon-disabled-color;
+            }
+        }
+    }
 
-      &:hover {
-        path {
-          fill: $grey-dark;
+    &_is-invalid {
+        #{$root}__input {
+            border-color: $danger;
         }
-      }
     }
-  }
 }

package/form/SwitcherField/SwitcherFieldView.js

@@ -33,18 +33,23 @@ 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 get_1 = __importDefault(require("lodash-es/get"));
-var Button_1 = __importDefault(require("@steroidsjs/core/ui/form/Button"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function SwitcherFieldView(props) {
     var bem = (0, hooks_1.useBem)('SwitcherFieldView');
-    return (React.createElement("div", { className: bem(bem.block({
+    var prefix = (0, hooks_1.useUniqueId)('switcher');
+    var renderLabel = React.useCallback(function (item) {
+        if (typeof item.label === 'object') {
+            return props.selectedIds.includes(item.id) ? item.label.checked : item.label.unchecked;
+        }
+        return item.label;
+    }, [props.selectedIds]);
+    return (React.createElement("div", { className: bem(bem.block(), props.className), style: props.style }, props.items.map(function (switcher, switcherIndex) { return (React.createElement("label", { key: switcherIndex, className: bem.element('switcher', {
             size: props.size
-        }), props.className, 'btn-group') }, props.items.map(function (item) { return (React.createElement(Button_1["default"], __assign({ key: String(item[props.primaryKey]) }, props.buttonProps, { className: bem((0, get_1["default"])(props, 'buttonProps.className'), props.hoveredId === item[props.primaryKey] && 'hover', props.selectedIds.includes(item[props.primaryKey]) && 'active'), disabled: props.disabled, onClick: function () { return props.onItemSelect(item[props.primaryKey]); }, onMouseOver: function () { return props.onItemHover(item[props.primaryKey]); } }), item.label)); })));
+        }), htmlFor: "".concat(prefix, "_").concat(switcher.id) },
+        React.createElement("input", __assign({}, props.inputProps, { id: "".concat(prefix, "_").concat(switcher.id), onChange: function () { return props.onItemSelect(switcher.id); }, checked: props.selectedIds.includes(switcher.id), className: bem.element('input') })),
+        React.createElement("span", { className: bem.element('slider') }),
+        React.createElement("span", { className: bem.element('label') }, renderLabel(switcher)))); })));
 }
 exports["default"] = SwitcherFieldView;

package/form/SwitcherField/SwitcherFieldView.scss

@@ -1,2 +1,189 @@
+:root {
+    --switcher-dot-disabled-color: #dbe2e6;
+    --switcher-slider-disabled-color: #f1f5f7;
+}
+
+html[data-theme="dark"] {
+    --switcher-dot-disabled-color: #4e4f57;
+    --switcher-slider-disabled-color: #5b5c6b;
+}
+
+$switcher-dot-disabled-color: var(--switcher-dot-disabled-color);
+$switcher-slider-disabled-color: var(--switcher-slider-disabled-color);
+
+$background-color-transition-timing: 150ms;
+
 .SwitcherFieldView {
-}
+    $root: &;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: flex-start;
+    row-gap: 10px;
+
+    &__switcher {
+        display: inline-flex;
+        column-gap: 12px;
+        align-items: center;
+        position: relative;
+        cursor: pointer;
+
+        $sizes: () !default;
+        $sizes: map-merge(
+            (
+                "lg": (
+                    "width": 40px,
+                    "height": 24px,
+                    "dotSize": 18px,
+                    "dotTranslateDefault": translateY(-50%) translateX(4px),
+                    "dotTranslateActive": translateY(-50%) translateX(16px),
+                    "font-size": $font-size-lg,
+                    "line-height": $line-height-lg,
+                ),
+                "md": (
+                    "width": 34px,
+                    "height": 20px,
+                    "dotSize": 14px,
+                    "dotTranslateDefault": translateY(-50%) translateX(3px),
+                    "dotTranslateActive": translateY(-50%) translateX(15px),
+                    "font-size": $font-size-base,
+                    "line-height": $line-height-base,
+                ),
+                "sm": (
+                    "width": 28px,
+                    "height": 16px,
+                    "dotSize": 12px,
+                    "dotTranslateDefault": translateY(-50%) translateX(2px),
+                    "dotTranslateActive": translateY(-50%) translateX(12px),
+                    "font-size": $font-size-sm,
+                    "line-height": $line-height-sm,
+                ),
+            ),
+            $sizes
+        );
+
+        &_size { 
+            @each $size, $sizeMap in $sizes { 
+                &_#{$size} {
+                    #{$root}__slider {
+                        width: map-get($sizeMap, width);
+                        height: map-get($sizeMap, height);
+    
+                        &::before {
+                            width: map-get($sizeMap, dotSize);
+                            height: map-get($sizeMap, dotSize);
+                            transform: map-get($sizeMap, dotTranslateDefault);
+                        }
+                    }
+    
+                    #{$root}__input:checked + #{$root}__slider {
+                        &::before {
+                            transform: map-get($sizeMap, dotTranslateActive);
+                        }
+                    }
+    
+                    #{$root}__label {
+                        font-size: map-get($sizeMap, font-size);
+                        line-height: map-get($sizeMap, line-height);
+                    }
+                }
+            }
+        }
+    }
+
+    &__input {
+        position: absolute;
+        cursor: pointer;
+        z-index: 3;
+        opacity: 0;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+
+        &:checked + #{$root}__slider {
+            background-color: $primary;
+            border-color: transparent;
+
+            &::before {
+                background-color: $white;
+            }
+
+            &::after {
+                border-color: $primary-light;
+            }
+        }
+
+        &:hover:not(:checked):not(:disabled) + #{$root}__slider {
+            &::before {
+                background-color: $gray-dark;
+            }
+        }
+
+        &:checked:hover + #{$root}__slider {
+            background-color: $primary-dark;
+        }
+
+        &:focus:not(:active) + #{$root}__slider {
+            &:after {
+                opacity: 1;
+            }
+        }
+
+        &:disabled {
+            cursor: not-allowed;
+        }
+
+        &:disabled ~ #{$root}__label {
+            color: $gray;
+        }
+
+        &:disabled + #{$root}__slider {
+            background-color: $switcher-slider-disabled-color;
+
+            &::before {
+                background-color: $switcher-dot-disabled-color;
+            }
+        }
+    }
+
+    &__slider {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        display: inline-block;
+        border: 1px solid $gray;
+        border-radius: 200px;
+        transition: background-color $background-color-transition-timing ease-in-out;
+
+        &::after {
+            position: absolute;
+            content: "";
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            display: inline-block;
+            height: calc(100% + 2px);
+            width: calc(100% + 2px);
+            border-radius: inherit;
+            border: 4px solid $gray;
+            transform: translateX(-5px) translateY(-5px);
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        &::before {
+            position: absolute;
+            content: "";
+            display: inline-block;
+            top: 50%;
+            border-radius: $radius-circle;
+            background-color: $gray;
+            transition: transform 100ms ease-in-out, background-color $background-color-transition-timing ease-in-out;
+        }
+    }
+
+    &__label {
+        color: $text-color;
+    }
+}

package/icons/index.js

@@ -65,7 +65,8 @@ exports["default"] = (function (customIcons) {
         'import',
         'info_16x16',
         'info_24x24',
-        'loading_icon',
+        'loading_purple',
+        'loading_default',
         'loading_icon_thick',
         'map',
         'menu_dots',

package/icons/svgs/date_range.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5 9.94916V9.14916C19.5 8.02905 19.5 7.469 19.282 7.04118C19.0903 6.66485 18.7843 6.35889 18.408 6.16714C17.9802 5.94916 17.4201 5.94916 16.3 5.94916H7.7C6.5799 5.94916 6.01984 5.94916 5.59202 6.16714C5.21569 6.35889 4.90973 6.66485 4.71799 7.04118C4.5 7.469 4.5 8.02905 4.5 9.14916V9.94916M19.5 9.94916V16.7492C19.5 17.8693 19.5 18.4293 19.282 18.8571C19.0903 19.2335 18.7843 19.5394 18.408 19.7312C17.9802 19.9492 17.4201 19.9492 16.3 19.9492H7.7C6.57989 19.9492 6.01984 19.9492 5.59202 19.7312C5.21569 19.5394 4.90973 19.2335 4.71799 18.8571C4.5 18.4293 4.5 17.8693 4.5 16.7492V9.94916M19.5 9.94916H4.5" stroke="white"/>
+<path d="M8.5 3.94916L8.5 7.94916M15.5 3.94916L15.5 7.94916" stroke="white" stroke-linecap="round"/>
+<path d="M8 12.9492H10" stroke="white" stroke-linecap="round"/>
+<path d="M14 12.9492H16" stroke="white" stroke-linecap="round"/>
+<path d="M8 16.9492H10" stroke="white" stroke-linecap="round"/>
+<path d="M14 16.9492H16" stroke="white" stroke-linecap="round"/>
+</svg>

package/layout/Loader/LoaderView.js

@@ -32,6 +32,6 @@ function LoaderView(props) {
             color: props.color,
             size: props.size
         }) },
-        React.createElement(content_1.Icon, { className: bem.element('icon'), name: 'loading' })));
+        React.createElement(content_1.Icon, { className: bem.element('icon'), name: 'loading_purple' })));
 }
 exports["default"] = LoaderView;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.49",
+    "version": "3.0.0-beta.50",
     "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.31",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.33",
         "@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.31"
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.33"
     }
 }