armtek-uikit-react 1.0.13 → 1.0.14

package/cjs/assets/ListItem.scss

@@ -0,0 +1,34 @@
+@import "variables";
+
+.listitem{
+  outline: none;
+  padding: calc($size-step * 1.5) calc($size-step * 2);
+  color: $color-neutral;
+  background: transparent;
+  @include transition(0.3s, background);
+  @include flex();
+  width: 100%;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  &:hover{
+    background: $color-gray-50;
+  }
+  &.listitem_active,
+  &:active{
+    background: rgba($color-primary, 0.1);
+  }
+}
+.listitem_startAdornment{
+
+}
+.listitem_endAdornment{
+
+}
+.listitem_divider{
+  border-bottom: 1px solid $color-gray-200;
+}
+.listitemText{
+  display: block;
+  margin: 0 calc($size-step * 2);
+}

package/cjs/assets/Loader.scss

@@ -0,0 +1,37 @@
+@import "variables";
+
+.loader{
+  -webkit-animation: rotating 2s linear infinite;
+  -moz-animation: rotating 2s linear infinite;
+  -ms-animation: rotating 2s linear infinite;
+  -o-animation: rotating 2s linear infinite;
+  animation: rotating 2s linear infinite;
+}
+@-webkit-keyframes rotating /* Safari and Chrome */ {
+  from {
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes rotating {
+  from {
+    -ms-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -ms-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}

package/cjs/assets/Logo.scss

@@ -0,0 +1,29 @@
+@import "variables";
+
+.logo{
+  display: inline-block;
+}
+.logo_shape{
+  box-shadow: $box-shadow;
+  padding: calc($size-step * 2);
+  transform: skewX(-10deg);
+  & .logo__inner{
+    transform: skewX(10deg);
+  }
+}
+.logo__inner{
+
+}
+
+.logo__img{
+  font-size: 0;
+}
+.logo__description{
+  color: $color-gray-900;
+  font-size: 14px;
+  font-style: italic;
+  margin-top: 2px;
+}
+.logo_inverse .logo__description{
+  color: #fff;
+}

package/cjs/assets/Period.scss

@@ -0,0 +1,10 @@
+@import "variables";
+
+.dateField{
+  position: relative;
+}
+.dateField__picker{
+  position: absolute;
+  top: 100%;
+  right: 0;
+}

package/cjs/assets/Rating.scss

@@ -0,0 +1,19 @@
+@import "variables";
+
+.rating{
+  @include flex();
+}
+.rating__item{
+  cursor: pointer;
+  color: #F7B519;
+  font-size: 30px;
+}
+.rating_medium{
+  font-size: 24px;
+}
+.rating_small{
+  font-size: 18px;
+}
+.rating__item_disabled{
+  color: $color-gray-400;
+}

package/cjs/assets/Select.scss

@@ -0,0 +1,26 @@
+@import "variables";
+
+.select{
+  position: relative;
+}
+.select__input_wrapper{
+
+}
+.select__input{
+  cursor: pointer;
+  & * {
+    cursor: pointer;
+  }
+}
+.options{
+  padding: $size-step 0;
+  border-radius: $radius;
+  box-shadow: $box-shadow;
+  position: absolute;
+  left:0;
+  top:100%;
+  width:100%;
+}
+.options_inline{
+  position: static;
+}

package/cjs/assets/Slider.scss

@@ -0,0 +1,6 @@
+@import "variables";
+
+.slider__helperText{
+  @include flex(space-between);
+  margin-top: 8px;
+}

package/cjs/assets/Status.scss

@@ -0,0 +1,45 @@
+@import "variables";
+
+.status{
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 8px 1px;
+  border-radius: 4px;
+}
+.status_primary{
+  background: rgba($color-primary-dark, 0.2);
+  color: $color-primary-dark;
+}
+.status_secondary{
+  background: rgba($color-secondary-dark, 0.2);
+  color: $color-secondary-dark;
+}
+.status_neutral{
+  background: rgba(#4D5359, 0.2);
+  color: rgba(#212529, 0.7);
+}
+.status_error{
+  background: rgba($color-error-dark, 0.2);
+  color: $color-error-dark;
+}
+.status_warning{
+  background: rgba(#FFC61A, 0.2);
+  color: $color-secondary-dark;
+}
+.status_info{
+  background: rgba(#0D46FF, 0.2);
+  color: $color-primary-dark;
+}
+.status_success{
+  background: rgba(#0BD998, 0.2);
+  color: $color-success-dark;
+}
+.status__content{
+  font-size: 14px;
+  line-height: 1;
+}
+.status__icon{
+  margin-left: 4px;
+  font-size: 14px;
+  line-height: 1.5;
+}

package/cjs/assets/StepItem.scss

@@ -0,0 +1,67 @@
+@import "variables";
+
+.stepItem__inner{
+  @include flex(flex-start, flex-start)
+}
+
+.stepItem__title{
+  font-weight: 700;
+  margin: 2px 0 0 $size-step;
+  position: relative;
+  background: #fff;
+  padding-right: 5px;
+}
+.stepItem__title_error{
+  color: $color-error-dark
+}
+
+.stepItem__content{
+  padding-left: 23px;
+  border-left: 1px solid #B1BCC6;
+  margin-left: 11px;
+  margin-top:5px;
+  position: relative;
+}
+.stepItem__button{
+  margin-top: $size-step;
+}
+
+
+.stepItem_small{
+  & .stepItem__content,
+  & .stepItem__title{
+    font-size: 14px;
+  }
+  & .stepItem__content{
+    padding-left: 19px;
+    margin-left: 10px;
+  }
+  &.stepItem_horizontal{
+    & .stepItem__content:before{
+      top: -15px;
+    }
+  }
+}
+.stepItem_last{
+  & .stepItem__content{
+    border-color:transparent;
+    &:before{
+      display: none;
+    }
+  }
+}
+.stepItem_horizontal{
+  & .stepItem__content{
+    border-color:transparent;
+  }
+  & .stepItem__content:before{
+    content: '';
+    position: absolute;
+    top: -19px;
+    width: 100%;
+    left: 22px;
+    height: 1px;
+    background: #B1BCC6;
+    z-index: -1;
+  }
+}

package/cjs/assets/StepItemIcon.scss

@@ -0,0 +1,47 @@
+@import "variables";
+
+.stepItemIcon{
+  @include flex(center);
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 1px solid;
+  & .stepItemIcon__number{
+    font-size: 16px;
+  }
+  &_small{
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    & .stepItemIcon__number{
+      font-size: 14px;
+    }
+  }
+  border-color: $color-primary;
+  color: $color-primary;
+}
+
+.stepItemIcon__inner{
+  font-size: 0;
+}
+
+.stepItemIcon_active{
+  color: #fff;
+  background: $color-primary;
+  &.stepItemIcon_icon{
+    background: transparent;
+    color: $color-primary;
+    border: none;
+  }
+}
+.stepItemIcon_complete{
+  color: #fff;
+  background: $color-success;
+  border-color: $color-success;
+}
+.stepItemIcon_error{
+  color: $color-error-dark !important;
+  background: transparent;
+  border-color: transparent;
+}

package/cjs/assets/Stepper.scss

@@ -0,0 +1,34 @@
+@import "variables";
+
+.stepper{
+
+}
+.stepper_horizontal{
+  display: flex;
+}
+.stepper__connector{
+  padding-left: 23px;
+  border-left: 1px solid #B1BCC6;
+  margin-left: 11px;
+  height: 25px;
+  margin-bottom: 5px;
+}
+.stepper_small{
+  & .stepper__connector{
+    padding-left: 19px;
+    margin-left: 10px;
+  }
+}
+.stepper_horizontal{
+  & .stepper__connector{
+    height: 1px;
+    width: auto;
+    margin-right: 5px;
+    margin-bottom: 0;
+    padding-left: 0;
+    border-left:none;
+    border-top: 1px solid #B1BCC6;
+    flex: 1 1 0;
+    margin-top:10px;
+  }
+}

package/cjs/assets/Switch.scss

@@ -0,0 +1,69 @@
+@import "variables";
+
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 34px;
+  height: 14px;
+}
+
+
+.switch__input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.switch__slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: $color-neutral-light;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 7px;
+}
+
+.switch__slider:before {
+  position: absolute;
+  content: "";
+  height: 20px;
+  width: 20px;
+  left: -3px;
+  bottom: -3px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 50%;
+  box-shadow: $box-shadow;
+}
+
+.switch__input:checked + .switch__slider {
+  background-color: $color-orange-400;
+}
+
+.switch__input:checked + .switch__slider:before {
+  -webkit-transform: translateX(22px);
+  -ms-transform: translateX(22px);
+  transform: translateX(22px);
+  background: $color-secondary;
+}
+
+.switch_small{
+  width: 26px;
+  height: 10px;
+  & .switch__slider:before{
+    width: 16px;
+    height: 16px;
+  }
+  & .switch__input:checked + .switch__slider:before {
+    -webkit-transform: translateX(20px);
+    -ms-transform: translateX(20px);
+    transform: translateX(18px);
+  }
+}

package/cjs/assets/TextArea.scss

@@ -0,0 +1,15 @@
+@import "variables";
+
+.textarea{
+  font-family: $font-family;
+  height: auto;
+  min-height: $size-elarge;
+  &.size_small{
+    height: auto;
+    min-height: $size-large;
+  }
+  & textarea{
+    resize: none;
+    appearance: none;
+  }
+}

package/cjs/assets/TextField.scss

@@ -0,0 +1,160 @@
+@import "variables";
+
+.textfield{
+  position: relative;
+  overflow: hidden;
+  border-radius: $radius;
+  border: 1px solid $color-gray-400;
+  background-color: #fff;
+  height: $size-elarge;
+  @include flex();
+  &:hover{
+    border-color: $color-gray-600;
+  }
+  &._focused{
+    border-color: $color-gray-800;
+  }
+  &._disabled{
+    pointer-events: none;
+    background: $color-gray-100;
+    border-color: transparent;
+    & .textfield__label{
+      color: $color-gray-600;
+    }
+  }
+  &.size_small{
+    height: $size-large;
+    font-size: 14px;
+  }
+  &_outlined{
+    border-top:none;
+    border-left: none;
+    border-right: none;
+    border-radius: 0;
+  }
+}
+.textfield__container{
+  cursor: text;
+  position: relative;
+  padding: 11px 12px 8px;
+  width: 100%;
+  &._label{
+    padding: 25px 12px 8px;
+  }
+  &.size_small{
+    &._label{
+      padding: 18px 12px 4px
+    }
+  }
+}
+.textfield__container_outlined{
+  padding-left: 0 !important;
+  & .textfield__label{
+    padding-left: 0;
+  }
+}
+.textfield__input{
+  display: block;
+  width: 100%;
+  font-size: 16px;
+  outline: none;
+  background: transparent;
+  border: none;
+  padding: 0;
+  height: 23px;
+  &:focus{
+    border-color: $color-gray-800;
+  }
+  &.size_small{
+    font-size: 14px;
+    height: 20px;
+  }
+  &._label::placeholder{
+    opacity: 0;
+  }
+}
+._error{
+  border-color: $color-error-dark;
+}
+
+.textfield__label_small{
+  font-size: 14px;
+}
+.textfield__label{
+  pointer-events: none;
+  color: $color-gray-600;
+  position: absolute;
+  top: 12px;
+  padding-left: 12px;
+  left: 1px;
+  font-size: 16px;
+  transition: 0.2s all ease;
+  width: calc(100% - 2px);
+  padding-top:8px;
+  &_small{
+    top: 4px;
+  }
+  &_focused{
+    font-size: 12px;
+    transform: none;
+    top: 1px;
+    &.textfield__label_small{
+      padding-top:4px
+    }
+  }
+}
+
+.textfield__input_outlined{
+  border-left:none;
+  border-top:none;
+  border-right: none;
+  padding-left: 0 !important;
+  &:focus,
+  &:hover{
+    border-left:none;
+    border-top:none;
+    border-right: none;
+  }
+  border-radius: 0;
+  & + .textfield__label{
+    left:0;
+  }
+  &:disabled{
+    border-bottom-color: $color-gray-400;
+    border-bottom-style: dotted;
+    background: transparent;
+    & + .textfield__label{
+      color: $color-gray-400;
+    }
+  }
+}
+
+.textfield__label_error{
+  color: $color-error-dark;
+}
+.textfield__adornment{
+  @include flex();
+  position: relative;
+  z-index: 5;
+  height: 100%;
+  padding-right: 10px;
+  & > *{
+    margin-left: $size-step;
+  }
+}
+.textfield__helperText{
+  margin-top: calc($size-step / 2);
+}
+._disabled{
+  & + .textfield__helperText{
+    color: $color-gray-600;
+  }
+  & .textfield_outlined{
+    & .textfield__helperText{
+      color: $color-gray-400;
+    }
+  }
+  & .textfield__icon{
+    color: $color-gray-400;
+  }
+}

package/cjs/assets/Tooltip.scss

@@ -0,0 +1,18 @@
+@import "variables";
+
+.tooltip{
+  display: inline-block;
+  position: relative;
+}
+.tooltip__item{
+  position: absolute;
+  padding: $size-step;
+  border-radius: $radius;
+  background: $color-gray-700;
+  color: #fff;
+  font-weight: 500;
+  font-size: 12px;
+  left: 50%;
+  bottom: 100%;
+  transform: translateX(-50%);
+}

package/cjs/assets/styles.scss

@@ -2,5 +2,30 @@
 //@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
 
 @import "variables";
-//@import "Button";
+@import "Button";
 @import "Adornment";
+@import "Alert";
+@import "Badge";
+@import "Card";
+@import "Avatar";
+@import "AvatarGroup";
+@import "Chip";
+@import "HelperText";
+@import "ListItem";
+@import "Loader";
+@import "Logo";
+@import "Slider";
+@import "Status";
+@import "StepItem";
+@import "StepItemIcon";
+@import "Stepper";
+@import "Tooltip";
+@import "Checkbox";
+@import "DatePicker";
+@import "Interval";
+@import "Period";
+@import "Rating";
+@import "Select";
+@import "Switch";
+@import "TextArea";
+@import "TextField";

package/cjs/lib/helpers/helpers.d.ts

@@ -3,3 +3,4 @@ export declare const getVariants: (except?: string[]) => Record<VariantType, str
 export declare const getColors: () => Record<ColorType, string>;
 export declare const getStatusColors: () => Record<ColorStatusType, string>;
 export declare const getSizes: (except?: string[]) => Record<SizeType, string>;
+export declare const getCssPrefix: (classes: string[]) => Record<string, string>;

package/cjs/lib/helpers/helpers.js

@@ -1,7 +1,8 @@
 "use strict";
 
 exports.__esModule = true;
-exports.getVariants = exports.getStatusColors = exports.getSizes = exports.getColors = void 0;
+exports.getVariants = exports.getStatusColors = exports.getSizes = exports.getCssPrefix = exports.getColors = void 0;
+var _styles = require("../const/styles");
 const getVariants = except => {
   let variants = {
     contained: 'Заливка',
@@ -45,4 +46,11 @@ const filter = (obj, arr) => {
     prev[current[0]] = current[1];
     return prev;
   }, {});
-};
+};
+const getCssPrefix = classes => {
+  return classes.reduce((prev, current) => {
+    prev[current] = _styles.CSS_PREFIX + current;
+    return prev;
+  }, {});
+};
+exports.getCssPrefix = getCssPrefix;