armtek-uikit-react 1.0.11 → 1.0.14

package/esm/ui/Form/Select/Select.module.scss

@@ -1,26 +1 @@
-@import "../../../assets/styles";
-
-.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;
-}
+@import "../../../assets/Select";

package/esm/ui/Form/Switch/Switch.js

@@ -1,8 +1,12 @@
-import css from './Switch.module.scss';
 import clsx from 'clsx';
+import css from "./Switch.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 CssClasses = ['switch', 'switch__input', 'switch__slider', 'switch_small'];
+
+// const css = getCssPrefix(CssClasses)
+
 const Switch = props => {
   let {
     onChange,

package/esm/ui/Form/Switch/Switch.module.scss

@@ -1,69 +1 @@
-@import "../../../assets/styles";
-
-
-.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);
-  }
-}
+@import "../../../assets/Switch";

package/esm/ui/Form/TextArea/TextArea.js

@@ -1,11 +1,15 @@
 "use client";
 
-import TextField from '../TextField/TextField';
+import TextField from "../TextField/TextField";
 import { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
-import css from './TextArea.module.scss';
+import css from "./TextArea.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+const CssClasses = ['textarea', 'size_small'];
+
+// const css = getCssPrefix(CssClasses)
+
 const TextArea = props => {
   var _textareaRef$current, _textareaRef$current2;
   let {

package/esm/ui/Form/TextArea/TextArea.module.scss

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

package/esm/ui/Form/TextField/TextField.js

@@ -1,12 +1,16 @@
 "use client";
 
 import { forwardRef, useRef, useState } from 'react';
-import css from './TextField.module.scss';
 import clsx from 'clsx';
-import HelperText from '../../HelperText/HelperText';
+import HelperText from "../../HelperText/HelperText";
+import css from "./TextField.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 CssClasses = ['textfield__container_outlined', 'textfield__container', 'textfield', 'textfield_outlined', '_focused', '_disabled', '_error', '_label', 'textfield__label_focused', 'textfield__label_small', 'textfield__label_error', 'textfield__label', 'textfield__input', 'textfield__input_outlined', 'size_small', 'textfield__adornment', 'textfield__helperText', 'textfield__icon'];
+
+// const css = getCssPrefix(CssClasses)
+
 const TextField = /*#__PURE__*/forwardRef((props, ref) => {
   let {
     error,

package/esm/ui/Form/TextField/TextField.module.scss

@@ -1,160 +1 @@
-@import "../../../assets/styles";
-
-.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;
-  }
-}
+@import "../../../assets/TextField";

package/esm/ui/HelperText/HelperText.js

@@ -1,7 +1,11 @@
-import css from './HelperText.module.scss';
 import clsx from 'clsx';
+import css from "./HelperText.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+const CssClasses = ['helperText', 'helperText_error'];
+
+// const css = getCssPrefix(CssClasses)
+
 const HelperText = props => {
   let {
     className,

package/esm/ui/HelperText/HelperText.module.scss

@@ -1,10 +1 @@
-@import "../../assets/styles";
-
-.helperText{
-  color: $color-gray-600;
-  font-size: 12px;
-  display: block;
-}
-.helperText_error{
-  color: $color-error-dark;
-}
+@import "../../assets/HelperText";

package/esm/ui/List/ListItem.js

@@ -1,10 +1,14 @@
-import css from './ListItem.module.scss';
 import clsx from 'clsx';
-import Checkbox from '../Form/Checkbox/Checkbox';
-import Adornment, { AdornmentContainer } from '../Adornment/Adornment';
+import Checkbox from "../Form/Checkbox/Checkbox";
+import Adornment, { AdornmentContainer } from "../Adornment/Adornment";
+import css from "./ListItem.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 CssClasses = ['listitem', 'listitem_active', 'listitem_divider', 'listitemText'];
+
+// const css = getCssPrefix(CssClasses)
+
 const ListItem = props => {
   let {
     children,

package/esm/ui/List/ListItem.module.scss

@@ -1,34 +1 @@
-@import "../../assets/styles";
-
-.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);
-}
+@import "../../assets/ListItem";

package/esm/ui/Loader/Loader.js

@@ -1,8 +1,12 @@
-import css from './Loader.module.scss';
 import clsx from 'clsx';
+import css from "./Loader.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 CssClasses = ['loader'];
+
+// const css = getCssPrefix(CssClasses)
+
 const Loader = props => {
   let width = props.size === 'large' ? 25 : props.size === 'medium' ? 23 : props.size === 'small' ? 21 : 27;
   let height = props.size === 'large' ? 24 : props.size === 'medium' ? 22 : props.size === 'small' ? 20 : 26;

package/esm/ui/Loader/Loader.module.scss

@@ -1,37 +1 @@
-@import "../../assets/styles";
-
-.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);
-  }
-}
+@import "../../assets/Loader";

package/esm/ui/Logo/Logo.js

@@ -1,8 +1,12 @@
-import css from './Logo.module.scss';
 import clsx from 'clsx';
+import css from "./Logo.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 CssClasses = ['logo', 'logo_shape', 'logo__inner', 'logo__img', 'logo__description', 'logo_inverse'];
+
+// const css = getCssPrefix(CssClasses)
+
 const Logo = props => {
   let {
     description,

package/esm/ui/Logo/Logo.module.scss

@@ -1,29 +1 @@
-@import "../../assets/styles";
-
-.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;
-}
+@import "../../assets/Logo";

package/esm/ui/Slider/RcSlider.d.ts

@@ -1,2 +0,0 @@
-import RcSlider from 'rc-slider';
-export default RcSlider;

package/esm/ui/Slider/RcSlider.js

@@ -1,2 +0,0 @@
-import RcSlider from 'rc-slider';
-export default RcSlider;

package/esm/ui/Slider/Slider.d.ts

@@ -1,6 +1,6 @@
 import '!style-loader!css-loader!./style.css';
 import { SliderProps as RcSliderProps } from 'rc-slider/lib/Slider';
-import { SizeType } from 'types/theme';
+import { SizeType } from '../../types/theme';
 export type SliderProps = {
     size?: Exclude<SizeType, 'extraLarge' | 'medium'>;
 } & Omit<RcSliderProps, 'size'>;

package/esm/ui/Slider/Slider.js

@@ -1,12 +1,15 @@
+import React from 'react';
 import RcSlider from 'rc-slider';
 import '!style-loader!css-loader!./style.css';
-// import './style.css'
-
-import HelperText from '../HelperText/HelperText';
-import css from './Slider.module.scss';
+import HelperText from "../HelperText/HelperText";
+import css from "./Slider.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 CssClasses = ['slider__helperText'];
+
+// const css = getCssPrefix(CssClasses)
+
 const Slider = props => {
   let {
     size = 'large',

package/esm/ui/Slider/Slider.module.scss

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

package/esm/ui/Status/Status.js

@@ -1,8 +1,12 @@
-import css from './Status.module.scss';
 import clsx from 'clsx';
+import css from "./Status.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 CssClasses = ['status', 'status_primary', 'status_secondary', 'status_neutral', 'status_error', 'status_warning', 'status_info', 'status_success', 'status__content', 'status__icon'];
+
+// const css = getCssPrefix(CssClasses)
+
 function Status(props) {
   let {
     color,

package/esm/ui/Status/Status.module.scss

@@ -1,45 +1 @@
-@import "../../assets/styles";
-
-.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;
-}
+@import "../../assets/Status";

package/esm/ui/Stepper/StepItem.js

@@ -1,10 +1,14 @@
-import StepItemIcon from './StepItemIcon';
-import css from './StepItem.module.scss';
+import StepItemIcon from "./StepItemIcon";
 import clsx from 'clsx';
-import Button from '../Button/Button';
+import Button from "../Button/Button";
+import css from "./StepItem.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 CssClasses = ['stepItem', 'stepItem__inner', 'stepItem__title', 'stepItem__title_error', 'stepItem__content', 'stepItem__button', 'stepItem_horizontal', 'stepItem_last', 'status_info', 'status_success', 'status__content', 'status__icon'];
+
+// const css = getCssPrefix(CssClasses)
+
 const StepItem = props => {
   let {
     title,