armtek-uikit-react 1.0.11 → 1.0.14

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/index.js

@@ -1,15 +1,15 @@
-export { default as Button } from './ui/Button/Button';
-export { default as ButtonIcon } from './ui/Button/ButtonIcon';
-export { default as Alert } from './ui/Alert/Alert';
-export { default as Avatar } from './ui/Avatar/Avatar';
-export { default as AvatarGroup } from './ui/Avatar/AvatarGroup';
-export { default as Badge } from './ui/Badge/Badge';
-export { default as Card } from './ui/Card/Card';
-export { default as Chip } from './ui/Chip/Chip';
-export { default as ListItem } from './ui/List/ListItem';
-export { default as Loader } from './ui/Loader/Loader';
-export { default as Logo } from './ui/Logo/Logo';
-export { default as Slider } from './ui/Slider/Slider';
-export { default as Status } from './ui/Status/Status';
-export { default as Stepper } from './ui/Stepper/Stepper';
-export { default as Tooltip } from './ui/Tooltip/Tooltip';
+export { default as Button } from "./ui/Button/Button";
+export { default as ButtonIcon } from "./ui/Button/ButtonIcon";
+export { default as Alert } from "./ui/Alert/Alert";
+export { default as Avatar } from "./ui/Avatar/Avatar";
+export { default as AvatarGroup } from "./ui/Avatar/AvatarGroup";
+export { default as Badge } from "./ui/Badge/Badge";
+export { default as Card } from "./ui/Card/Card";
+export { default as Chip } from "./ui/Chip/Chip";
+export { default as ListItem } from "./ui/List/ListItem";
+export { default as Loader } from "./ui/Loader/Loader";
+export { default as Logo } from "./ui/Logo/Logo";
+export { default as Slider } from "./ui/Slider/Slider";
+export { default as Status } from "./ui/Status/Status";
+export { default as Stepper } from "./ui/Stepper/Stepper";
+export { default as Tooltip } from "./ui/Tooltip/Tooltip";

package/esm/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/esm/lib/helpers/helpers.js

@@ -1,3 +1,4 @@
+import { CSS_PREFIX } from "../const/styles";
 export const getVariants = except => {
   let variants = {
     contained: 'Заливка',
@@ -37,4 +38,10 @@ const filter = (obj, arr) => {
     prev[current[0]] = current[1];
     return prev;
   }, {});
+};
+export const getCssPrefix = classes => {
+  return classes.reduce((prev, current) => {
+    prev[current] = CSS_PREFIX + current;
+    return prev;
+  }, {});
 };

package/esm/ui/Adornment/Adornment.js

@@ -1,7 +1,12 @@
-// import css from './Adornment.module.scss'
 import clsx from 'clsx';
+import css from "./Adornment.module.scss";
+// import { getCssPrefix } from 'lib/helpers/helpers'
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+const AdornmentClasses = ['adornmentContainer', 'adornmentContainer_end', 'adornment_start', 'adornment_end'];
+
+// const css = getCssPrefix(AdornmentClasses)
+
 const Adornment = props => {
   let {
     children,
@@ -13,8 +18,8 @@ const Adornment = props => {
     children: /*#__PURE__*/_jsx("div", {
       ...spanProps,
       className: clsx(className, {
-        'adornment_start': position === 'start',
-        'adornment_end': position !== 'start'
+        [css['adornment_start']]: position === 'start',
+        [css['adornment_end']]: position !== 'start'
       }),
       children: children
     })
@@ -30,8 +35,8 @@ export const AdornmentContainer = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx("div", {
       ...inputProps,
-      className: clsx('adornmentContainer', {
-        ['adornmentContainer_end']: position !== 'start'
+      className: clsx(css.adornmentContainer, {
+        [css['adornmentContainer_end']]: position !== 'start'
       }, className),
       children: children
     })

package/esm/ui/Adornment/Adornment.module.scss

@@ -1,18 +1,2 @@
-@import "../../assets/styles";
-
-.adornmentContainer{
-  display: flex;
-}
-.adornmentContainer_end{
-  margin-left: auto;
-}
-.adornment_end{
-  & + * {
-    margin-left: $size-step;
-  }
-}
-.adornment_start{
-  & + * {
-    margin-left: $size-step;
-  }
-}
+@import "./../../assets/variables";
+@import "./../../assets/Adornment";

package/esm/ui/Alert/Alert.js

@@ -1,9 +1,13 @@
-import css from './Alert.module.scss';
 import clsx from 'clsx';
-import ButtonIcon from '../Button/ButtonIcon';
+import ButtonIcon from "../Button/ButtonIcon";
+import css from "./Alert.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+const AlertClasses = ['alert', 'alert__title', 'alert__close', 'alert__icon', 'alert_success', 'alert_warning', 'alert_info', 'alert_error'];
+
+// const css = getCssPrefix(AlertClasses)
+
 const Alert = props => {
   let {
     title,

package/esm/ui/Alert/Alert.module.scss

@@ -1,38 +1,2 @@
-@import "../../assets/styles";
-
-.alert{
-  padding: calc($size-step * 2) calc($size-step * 5) calc($size-step * 2) calc($size-step * 7);
-  background: $color-gray-300;
-  border-radius: $radius;
-  position: relative;
-}
-.alert__title{
-  font-weight: 700;
-  margin-bottom: calc($size-step / 2);
-}
-.alert__close{
-  position: absolute;
-  top: calc($size-step / 2);
-  right: calc($size-step / 2);
-}
-.alert__icon{
-  position: absolute;
-  top: calc($size-step * 2);
-  left: calc($size-step * 2);
-}
-.alert_success{
-  color: $color-success-dark;
-  background: $color-greent-50;
-}
-.alert_warning{
-  color: $color-secondary-dark;
-  background: $color-orange-50;
-}
-.alert_info{
-  color: $color-primary-dark;
-  background: $color-blue-50;
-}
-.alert_error{
-  color: $color-error-dark;
-  background: $color-red-50;
-}
+@import "./../../assets/variables";
+@import "./../../assets/Alert";

package/esm/ui/Avatar/Avatar.js

@@ -1,8 +1,12 @@
-import css from './Avatar.module.scss';
 import clsx from 'clsx';
+import css from "./Avatar.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+const AvatarClasses = ['avatar', 'avatar__inner', 'avatar_small', 'avatar_medium', 'avatar__name', 'avatar__icon', 'avatar__status', 'avatar__img', 'avatar__status_success', 'avatar__status_error', 'avatar__status_warning'];
+
+// const css = getCssPrefix(AvatarClasses)
+
 const getLetters = name => {
   let nameParts = name.split(' ');
   return nameParts[0].split('')[0] + (nameParts[1] ? nameParts[1].split('')[0] : '');