@steroidsjs/bootstrap 2.1.0-beta.2 → 2.1.0-beta.7

package/index.js

@@ -1,71 +1,221 @@
 "use strict";
-// <reference types="@steroidsjs/core/index" />
+/// <reference types="@steroidsjs/core/index" />
 exports.__esModule = true;
 exports["default"] = {
-    // TODO fix errors in views
-    'crud.CrudView': { lazy: function () { return require('./crud/Crud/CrudView')["default"]; } },
-    'content.DropDownView': { lazy: function () { return require('./content/DropDown/DropDownView')["default"]; } },
-    'content.AvatarView': { lazy: function () { return require('./content/Avatar/AvatarView')["default"]; } },
-    'content.AvatarGroupView': { lazy: function () { return require('./content/Avatar/AvatarGroupView')["default"]; } },
-    'content.CalendarView': { lazy: function () { return require('./content/Calendar/CalendarView')["default"]; } },
-    // 'crud.CrudView': {lazy: () => require('./crud/Crud/CrudView').default},
-    'form.AutoCompleteFieldView': { lazy: function () { return require('./form/AutoCompleteField/AutoCompleteFieldView')["default"]; } },
-    'form.ButtonView': { lazy: function () { return require('./form/Button/ButtonView')["default"]; } },
-    'content.CardView': { lazy: function () { return require('./content/Card/CardView')["default"]; } },
-    'form.CheckboxFieldView': { lazy: function () { return require('./form/CheckboxField/CheckboxFieldView')["default"]; } },
-    'form.CheckboxListFieldView': { lazy: function () { return require('./form/CheckboxListField/CheckboxListFieldView')["default"]; } },
-    'form.DateFieldView': { lazy: function () { return require('./form/DateField/DateFieldView')["default"]; } },
-    'form.DateRangeFieldView': { lazy: function () { return require('./form/DateRangeField/DateRangeFieldView')["default"]; } },
-    'form.DateTimeFieldView': { lazy: function () { return require('./form/DateTimeField/DateTimeFieldView')["default"]; } },
-    'form.DateTimeRangeFieldView': { lazy: function () { return require('./form/DateTimeRangeField/DateTimeRangeFieldView')["default"]; } },
-    'form.DropDownFieldView': { lazy: function () { return require('./form/DropDownField/DropDownFieldView')["default"]; } },
-    'form.FieldLayoutView': { lazy: function () { return require('./form/FieldLayout/FieldLayoutView')["default"]; } },
-    'form.FieldSetView': { lazy: function () { return require('./form/FieldSet/FieldSetView')["default"]; } },
-    'form.FieldListView': { lazy: function () { return require('./form/FieldList/FieldListView')["default"]; } },
-    'form.FieldListItemView': { lazy: function () { return require('./form/FieldList/FieldListItemView')["default"]; } },
-    'form.FileFieldView': { lazy: function () { return require('./form/FileField/FileFieldView')["default"]; } },
-    'form.FileFieldItemView': { lazy: function () { return require('./form/FileField/FileFieldItemView')["default"]; } },
-    'form.FormView': { lazy: function () { return require('./form/Form/FormView')["default"]; } },
-    'form.HtmlFieldView': { lazy: function () { return require('./form/HtmlField/HtmlFieldView')["default"]; } },
-    'form.InputFieldView': { lazy: function () { return require('./form/InputField/InputFieldView')["default"]; } },
-    'form.NumberFieldView': { lazy: function () { return require('./form/NumberField/NumberFieldView')["default"]; } },
-    'form.PasswordFieldView': { lazy: function () { return require('./form/PasswordField/PasswordFieldView')["default"]; } },
-    'form.RadioListFieldView': { lazy: function () { return require('./form/RadioListField/RadioListFieldView')["default"]; } },
-    'form.RateFieldView': { lazy: function () { return require('./form/RateField/RateFieldView')["default"]; } },
-    'form.ReCaptchaFieldView': { lazy: function () { return require('./form/ReCaptchaField/ReCaptchaFieldView')["default"]; } },
-    'form.SliderFieldView': { lazy: function () { return require('./form/SliderField/SliderFieldView')["default"]; } },
-    'form.SwitcherFieldView': { lazy: function () { return require('./form/SwitcherField/SwitcherFieldView')["default"]; } },
-    'form.TextFieldView': { lazy: function () { return require('./form/TextField/TextFieldView')["default"]; } },
-    'form.TimeFieldView': { lazy: function () { return require('./form/TimeField/TimeFieldView')["default"]; } },
-    'format.BooleanFormatterView': { lazy: function () { return require('./format/BooleanFormatter/BooleanFormatterView')["default"]; } },
-    'format.DefaultFormatterView': { lazy: function () { return require('./format/DefaultFormatter/DefaultFormatterView')["default"]; } },
-    // 'format.PhotosFormatterView': {lazy: () => require('./format/PhotosFormatter/PhotosFormatterView').default},
-    'icon.IconView': { lazy: function () { return require('./icon/Icon/IconView')["default"]; } },
-    'layout.HeaderView': { lazy: function () { return require('./layout/Header/HeaderView')["default"]; } },
-    'layout.LoaderView': { lazy: function () { return require('./layout/Loader/LoaderView')["default"]; } },
-    'layout.NotificationsView': { lazy: function () { return require('./layout/Notifications/NotificationsView')["default"]; } },
-    'layout.NotificationsItemView': { lazy: function () { return require('./layout/Notifications/NotificationsItemView')["default"]; } },
-    'layout.TooltipView': { lazy: function () { return require('./layout/Tooltip/TooltipView')["default"]; } },
-    // 'list.AccordionView': {lazy: () => require('./list/Accordion/AccordionView').default},
-    'list.ControlsColumnView': { lazy: function () { return require('./list/ControlsColumnView/ControlsColumnView')["default"]; } },
-    'list.CheckboxColumnView': { lazy: function () { return require('./list/CheckboxColumn/CheckboxColumnView')["default"]; } },
-    // 'list.DetailView': {lazy: () => require('./list/Detail/DetailView').default},
-    'list.EmptyView': { lazy: function () { return require('./list/Empty/EmptyView')["default"]; } },
-    'list.GridView': { lazy: function () { return require('./list/Grid/GridView')["default"]; } },
-    'list.ListView': { lazy: function () { return require('./list/List/ListView')["default"]; } },
-    'list.ListItemView': { lazy: function () { return require('./list/List/ListItemView')["default"]; } },
-    'list.PaginationButtonView': { lazy: function () { return require('./list/Pagination/PaginationButtonView')["default"]; } },
-    'list.PaginationMoreView': { lazy: function () { return require('./list/Pagination/PaginationMoreView')["default"]; } },
-    'list.PaginationSizeView': { lazy: function () { return require('./list/PaginationSize/PaginationSizeView')["default"]; } },
-    'modal.ModalView': { lazy: function () { return require('./modal/Modal/ModalView')["default"]; } },
-    'modal.TwoFactorModalView': { lazy: function () { return require('./modal/TwoFactorModal/TwoFactorModalView')["default"]; } },
-    'nav.BreadcrumbsView': { lazy: function () { return require('./nav/Breadcrubms/BreadcrumbsView')["default"]; } },
-    'nav.ControlsView': { lazy: function () { return require('./nav/Controls/ControlsView')["default"]; } },
-    'nav.NavBarView': { lazy: function () { return require('./nav/Nav/NavBarView')["default"]; } },
-    'nav.NavButtonView': { lazy: function () { return require('./nav/Nav/NavButtonView')["default"]; } },
-    'nav.NavIconView': { lazy: function () { return require('./nav/Nav/NavIconView')["default"]; } },
-    'nav.NavLinkView': { lazy: function () { return require('./nav/Nav/NavLinkView')["default"]; } },
-    'nav.NavListView': { lazy: function () { return require('./nav/Nav/NavListView')["default"]; } },
-    'nav.NavTabsView': { lazy: function () { return require('./nav/Nav/NavTabsView')["default"]; } },
-    'nav.TreeView': { lazy: function () { return require('./nav/Tree/TreeView')["default"]; } }
+    'crud.CrudView': {
+        lazy: function () { return require('./crud/Crud/CrudView')["default"]; }
+    },
+    'content.DropDownView': {
+        lazy: function () { return require('./content/DropDown/DropDownView')["default"]; }
+    },
+    'content.AlertView': {
+        lazy: function () { return require('./content/Alert/AlertView')["default"]; }
+    },
+    'content.AvatarView': {
+        lazy: function () { return require('./content/Avatar/AvatarView')["default"]; }
+    },
+    'content.AvatarGroupView': {
+        lazy: function () { return require('./content/Avatar/AvatarGroupView')["default"]; }
+    },
+    'content.CalendarView': {
+        lazy: function () { return require('./content/Calendar/CalendarView')["default"]; }
+    },
+    'content.DetailView': {
+        lazy: function () { return require('./content/Detail/DetailView')["default"]; }
+    },
+    'form.AutoCompleteFieldView': {
+        lazy: function () { return require('./form/AutoCompleteField/AutoCompleteFieldView')["default"]; }
+    },
+    'form.ButtonView': {
+        lazy: function () { return require('./form/Button/ButtonView')["default"]; }
+    },
+    'content.CardView': {
+        lazy: function () { return require('./content/Card/CardView')["default"]; }
+    },
+    'content.CollapseView': {
+        lazy: function () { return require('./content/Collapse/CollapseView')["default"]; }
+    },
+    'content.CollapseItemView': {
+        lazy: function () { return require('./content/Collapse/CollapseItemView')["default"]; }
+    },
+    'form.CheckboxFieldView': {
+        lazy: function () { return require('./form/CheckboxField/CheckboxFieldView')["default"]; }
+    },
+    'form.CheckboxListFieldView': {
+        lazy: function () { return require('./form/CheckboxListField/CheckboxListFieldView')["default"]; }
+    },
+    'form.DateFieldView': {
+        lazy: function () { return require('./form/DateField/DateFieldView')["default"]; }
+    },
+    'form.DateRangeFieldView': {
+        lazy: function () { return require('./form/DateRangeField/DateRangeFieldView')["default"]; }
+    },
+    'form.DateTimeFieldView': {
+        lazy: function () { return require('./form/DateTimeField/DateTimeFieldView')["default"]; }
+    },
+    'form.DateTimeRangeFieldView': {
+        lazy: function () { return require('./form/DateTimeRangeField/DateTimeRangeFieldView')["default"]; }
+    },
+    'form.DropDownFieldView': {
+        lazy: function () { return require('./form/DropDownField/DropDownFieldView')["default"]; }
+    },
+    'form.FieldLayoutView': {
+        lazy: function () { return require('./form/FieldLayout/FieldLayoutView')["default"]; }
+    },
+    'form.FieldSetView': {
+        lazy: function () { return require('./form/FieldSet/FieldSetView')["default"]; }
+    },
+    'form.FieldListView': {
+        lazy: function () { return require('./form/FieldList/FieldListView')["default"]; }
+    },
+    'form.FieldListItemView': {
+        lazy: function () { return require('./form/FieldList/FieldListItemView')["default"]; }
+    },
+    'form.FileFieldView': {
+        lazy: function () { return require('./form/FileField/FileFieldView')["default"]; }
+    },
+    'form.FileFieldItemView': {
+        lazy: function () { return require('./form/FileField/FileFieldItemView')["default"]; }
+    },
+    'form.FormView': {
+        lazy: function () { return require('./form/Form/FormView')["default"]; }
+    },
+    'form.HtmlFieldView': {
+        lazy: function () { return require('./form/HtmlField/HtmlFieldView')["default"]; }
+    },
+    'form.ImageFieldView': {
+        lazy: function () { return require('./form/ImageField/ImageFieldView')["default"]; }
+    },
+    'form.ImageFieldModalView': {
+        lazy: function () { return require('./form/ImageField/ImageFieldModalView')["default"]; }
+    },
+    'form.InputFieldView': {
+        lazy: function () { return require('./form/InputField/InputFieldView')["default"]; }
+    },
+    'form.NumberFieldView': {
+        lazy: function () { return require('./form/NumberField/NumberFieldView')["default"]; }
+    },
+    'form.PasswordFieldView': {
+        lazy: function () { return require('./form/PasswordField/PasswordFieldView')["default"]; }
+    },
+    'form.RadioListFieldView': {
+        lazy: function () { return require('./form/RadioListField/RadioListFieldView')["default"]; }
+    },
+    'form.RateFieldView': {
+        lazy: function () { return require('./form/RateField/RateFieldView')["default"]; }
+    },
+    'form.ReCaptchaFieldView': {
+        lazy: function () { return require('./form/ReCaptchaField/ReCaptchaFieldView')["default"]; }
+    },
+    'form.SliderFieldView': {
+        lazy: function () { return require('./form/SliderField/SliderFieldView')["default"]; }
+    },
+    'form.SwitcherFieldView': {
+        lazy: function () { return require('./form/SwitcherField/SwitcherFieldView')["default"]; }
+    },
+    'form.TextFieldView': {
+        lazy: function () { return require('./form/TextField/TextFieldView')["default"]; }
+    },
+    'form.TimeFieldView': {
+        lazy: function () { return require('./form/TimeField/TimeFieldView')["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"]; }
+    },
+    'layout.LoaderView': {
+        lazy: function () { return require('./layout/Loader/LoaderView')["default"]; }
+    },
+    'layout.NotificationsView': {
+        lazy: function () { return require('./layout/Notifications/NotificationsView')["default"]; }
+    },
+    'layout.NotificationsItemView': {
+        lazy: function () { return require('./layout/Notifications/NotificationsItemView')["default"]; }
+    },
+    'layout.LineProgressBarView': {
+        lazy: function () { return require('./layout/ProgressBar/LineProgressBarView')["default"]; }
+    },
+    'layout.CircleProgressBarView': {
+        lazy: function () { return require('./layout/ProgressBar/CircleProgressBarView')["default"]; }
+    },
+    'layout.SkeletonView': {
+        lazy: function () { return require('./layout/Skeleton/SkeletonView')["default"]; }
+    },
+    'layout.TooltipView': {
+        lazy: function () { return require('./layout/Tooltip/TooltipView')["default"]; }
+    },
+    'list.ControlsColumnView': {
+        lazy: function () { return require('./list/ControlsColumnView/ControlsColumnView')["default"]; }
+    },
+    'list.CheckboxColumnView': {
+        lazy: function () { return require('./list/CheckboxColumn/CheckboxColumnView')["default"]; }
+    },
+    'list.EmptyView': {
+        lazy: function () { return require('./list/Empty/EmptyView')["default"]; }
+    },
+    'list.GridView': {
+        lazy: function () { return require('./list/Grid/GridView')["default"]; }
+    },
+    'list.ListView': {
+        lazy: function () { return require('./list/List/ListView')["default"]; }
+    },
+    'list.ListItemView': {
+        lazy: function () { return require('./list/List/ListItemView')["default"]; }
+    },
+    'list.PaginationButtonView': {
+        lazy: function () { return require('./list/Pagination/PaginationButtonView')["default"]; }
+    },
+    'list.PaginationMoreView': {
+        lazy: function () { return require('./list/Pagination/PaginationMoreView')["default"]; }
+    },
+    'list.PaginationSizeView': {
+        lazy: function () { return require('./list/PaginationSize/PaginationSizeView')["default"]; }
+    },
+    'list.StepsView': {
+        lazy: function () { return require('./list/Steps/StepsView')["default"]; }
+    },
+    'list.StepItemView': {
+        lazy: function () { return require('./list/Steps/StepItemView')["default"]; }
+    },
+    'modal.ModalView': {
+        lazy: function () { return require('./modal/Modal/ModalView')["default"]; }
+    },
+    'modal.TwoFactorModalView': {
+        lazy: function () { return require('./modal/TwoFactorModal/TwoFactorModalView')["default"]; }
+    },
+    'nav.BreadcrumbsView': {
+        lazy: function () { return require('./nav/Breadcrubms/BreadcrumbsView')["default"]; }
+    },
+    'nav.ControlsView': {
+        lazy: function () { return require('./nav/Controls/ControlsView')["default"]; }
+    },
+    'nav.NavBarView': {
+        lazy: function () { return require('./nav/Nav/NavBarView')["default"]; }
+    },
+    'nav.NavButtonView': {
+        lazy: function () { return require('./nav/Nav/NavButtonView')["default"]; }
+    },
+    'nav.NavIconView': {
+        lazy: function () { return require('./nav/Nav/NavIconView')["default"]; }
+    },
+    'nav.NavLinkView': {
+        lazy: function () { return require('./nav/Nav/NavLinkView')["default"]; }
+    },
+    'nav.NavListView': {
+        lazy: function () { return require('./nav/Nav/NavListView')["default"]; }
+    },
+    'nav.NavTabsView': {
+        lazy: function () { return require('./nav/Nav/NavTabsView')["default"]; }
+    },
+    'nav.TreeView': {
+        lazy: function () { return require('./nav/Tree/TreeView')["default"]; }
+    }
 };

package/index.scss

@@ -1,10 +1,24 @@
+@import './scss/mixins';
+@import './scss/variables';
+
 @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';
@@ -16,27 +30,33 @@
 @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 './list/Accordion/AccordionView';
+@import './layout/ProgressBar/LineProgressBarView';
+@import './layout/ProgressBar/CircleProgressBarView';
+@import './layout/Skeleton/SkeletonView';
 @import './list/ControlsColumnView/ControlsColumnView';
 @import './list/CheckboxColumn/CheckboxColumnView';
-@import './list/Detail/DetailView';
 @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';

package/layout/ProgressBar/CircleProgressBarView.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
+import { IProgressBarViewProps } from '@steroidsjs/core/ui/layout/ProgressBar/ProgressBar';
+export default function CircleProgressBarView(props: IProgressBarViewProps & IBemHocOutput): JSX.Element;

package/layout/ProgressBar/CircleProgressBarView.js

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+function CircleProgressBarView(props) {
+    var bem = hooks_1.useBem('CircleProgressBarView');
+    var size = {
+        large: { radius: 64 },
+        medium: { radius: 48 },
+        small: { radius: 32 }
+    };
+    var getCircumference = function () { return 2 * Math.PI * size[props.size].radius; };
+    return (React.createElement("div", { className: bem.block({ size: props.size, status: props.status }) },
+        React.createElement("svg", null,
+            React.createElement("g", { className: bem.element('circles') },
+                React.createElement("circle", { className: bem.element('emptyCircle'), style: { strokeDasharray: getCircumference() } }),
+                React.createElement("circle", { className: bem.element('progressCircle'), style: { strokeDashoffset: getCircumference() - Math.min(props.percent, 100) * getCircumference() / 100,
+                        strokeDasharray: getCircumference() } }))),
+        React.createElement("div", { className: bem.element('content') }, props.label)));
+}
+exports["default"] = CircleProgressBarView;

package/layout/ProgressBar/CircleProgressBarView.scss

@@ -0,0 +1,150 @@
+.CircleProgressBarView{
+  $root: &;
+
+  position: relative;
+  transform: rotate(-90deg);
+
+  &_size {
+    &_small {
+      font-size: 10px;
+      width: 72px;
+      height: 72px;
+
+      svg{
+        width: 72px;
+        height: 72px;
+      }
+      #{$root}__circles{
+        stroke-width: 8;
+        circle{
+          r: 32;
+          cx: 36;
+          cy: 36;
+        }
+      }
+      #{$root}__content{
+        svg{
+          width: 16px;
+          height: 16px;
+        }
+      }
+    }
+
+    &_medium {
+      font-size: 18px;
+      width: 108px;
+      height: 108px;
+
+      svg{
+        width: 108px;
+        height: 108px;
+      }
+      #{$root}__circles{
+        stroke-width: 12;
+
+        circle{
+          r: 48;
+          cx: 54;
+          cy: 54;
+        }
+      }
+      #{$root}__content{
+        svg{
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
+    &_large {
+      font-size: 24px;
+      width: 144px;
+      height: 144px;
+
+      svg{
+        width: 144px;
+        height: 144px;
+      }
+      #{$root}__circles{
+        stroke-width: 16;
+        circle{
+          r: 64;
+          cx: 72;
+          cy: 72;
+        }
+      }
+      #{$root}__content{
+        svg{
+          width: 32px;
+          height: 32px;
+        }
+      }
+    }
+  }
+
+  &_status{
+    &_success{
+      #{$root}__progressCircle{
+        stroke: $success;
+      }
+
+      #{$root}__content{
+        svg{
+          fill: $success;
+        }
+      }
+    }
+
+    &_exception{
+      #{$root}__progressCircle{
+        stroke: $danger;
+      }
+
+      #{$root}__content{
+        svg{
+          fill: $danger;
+        }
+      }
+    }
+
+    &_normal{
+      #{$root}__progressCircle{
+        stroke: $primary;
+      }
+    }
+  }
+
+  svg{
+    position: relative;
+  }
+
+  #{$root}__circles{
+    fill: none;
+    stroke-linecap: round;
+
+
+    #{$root}__emptyCircle{
+      stroke: $back-disabled;
+      stroke-dashoffset: 0;
+    }
+
+    #{$root}__progressCircle{
+      transition: 0.1s linear;
+
+    }
+  }
+
+  &__content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $secondary-dark;
+    font-weight: bold;
+    transform: rotate(90deg);
+  }
+
+}

package/layout/ProgressBar/LineProgressBarView.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
+import { IProgressBarViewProps } from '@steroidsjs/core/ui/layout/ProgressBar/ProgressBar';
+export default function LineProgressBarView(props: IProgressBarViewProps & IBemHocOutput): JSX.Element;

package/layout/ProgressBar/LineProgressBarView.js

@@ -0,0 +1,31 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+function LineProgressBarView(props) {
+    var bem = hooks_1.useBem('LineProgressBarView');
+    return (React.createElement("div", { className: bem.block({ size: props.size, status: props.status }) },
+        React.createElement("div", { className: bem.element('emptyLine') },
+            React.createElement("div", { className: bem.element('progressLine'), style: { width: props.percent + "%" } })),
+        React.createElement("div", { className: bem.element('text') }, props.label)));
+}
+exports["default"] = LineProgressBarView;