armtek-uikit-react 1.0.13 → 1.0.14

package/esm/ui/Chip/Chip.module.scss

@@ -1,96 +1 @@
-@import "../../assets/styles";
-
-.chip{
-  background: $color-gray-200;
-  padding: calc($size-step / 1.5) calc($size-step * 1.5);
-  border-radius: 20px;
-  font-size: 13px;
-  display: inline-block;
-}
-
-.chip__inner{
-  @include flex(center)
-}
-
-.chip__icon{
-  display: inline-block;
-  margin-right: $size-step;
-  margin-left: -$size-step;
-  font-size: 22px;
-  @include flex();
-  overflow: hidden;
-}
-.chip__close{
-  margin-left: $size-step;
-  margin-right: -$size-step;
-  padding: 0;
-  font-size: 20px;
-  color: $color-gray-500;
-  cursor: pointer;
-  &:hover{
-    @include transition();
-    color: $color-gray-600;
-  }
-}
-
-.chip__close_primary,
-.chip__close_secondary{
-  color: #fff;
-  &:hover{
-    color: #fff;
-    opacity: 0.6;
-  }
-}
-
-.chip_small{
-  padding: 4px $size-step;
-}
-.chip__icon_small{
-  font-size: 18px;
-  margin-left: 0;
-}
-.chip__close_small{
-  font-size: 15px;
-  margin-right: -2px;
-}
-
-.chip_outlined{
-  background: transparent;
-  border: 1px solid $color-gray-400;
-}
-
-a.chip,
-button.chip{
-  &:hover{
-    background: $color-gray-300;
-  }
-}
-a.chip_outlined,
-button.chip_outlined{
-  &:hover{
-    background: rgba($color-neutral, 0.1);
-  }
-}
-
-.chip_secondary{
-  color: #fff;
-  background-color: $color-secondary;
-}
-a.chip_secondary,
-button.chip_secondary{
-  &:hover{
-    background-color: $color-secondary-dark;
-  }
-}
-
-.chip_primary{
-  color: #fff;
-  background-color: $color-primary;
-}
-
-a.chip_primary,
-button.chip_primary{
-  &:hover{
-    background-color: $color-primary-dark;
-  }
-}
+@import "./../../assets/Chip";

package/esm/ui/Form/Checkbox/Checkbox.js

@@ -1,11 +1,15 @@
 "use client";
 
-import css from './Checkbox.module.scss';
 import clsx from 'clsx';
 import { useState } from 'react';
+import css from "./Checkbox.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 = ['checkbox', 'checkbox__input', 'checkbox__label', 'checkbox__text', 'checkbox_disabled', 'checkbox_medium', 'checkbox_small', 'checkbox__label_intermediate', 'checkbox__label_checked', 'checkbox__label_disabled', 'checkbox_contained', 'checkbox_outlined', 'checkbox_primary', 'checkbox_secondary', 'checkbox_neutral', 'checkbox_success', 'checkbox_error', 'checkbox_warning', 'radio'];
+
+// const css = getCssPrefix(CssClasses)
+
 const Checkbox = props => {
   let {
     label,

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

@@ -1,297 +1 @@
-@import "../../../assets/styles";
-
-.checkbox{
-  position: relative;
-}
-.checkbox__input{
-  display: none;
-}
-.checkbox__label{
-  cursor: pointer;
-  text-align: left;
-  position: relative;
-  display: block;
-  font-size: 16px;
-  line-height: 1.2;
-  width:22px;
-  height: 22px;
-  & .checkbox__text{
-    display: block;
-    padding-left: 31px;
-  }
-  &:before{
-    width: 100%;
-    height: 100%;
-    border-radius: $radius;
-    border: 1px solid $color-gray-700;
-    background: #fff;
-    position: absolute;
-    content: '';
-    left: 0;
-    top: -3px;
-  }
-  &:after{
-    content: '';
-    position: absolute;
-    transform: rotate(45deg);
-    left: 9px;
-    top: 1px;
-    width: 5px;
-    height: 10px;
-    border-bottom: 2px solid;
-    border-right: 2px solid;
-    display: none;
-  }
-  & span{
-    display: inline-block;
-    padding-left: 5px;
-  }
-}
-
-.checkbox_medium{
-  width:18px;
-  height: 18px;
-  & .checkbox__text{
-    //padding-left: 27px;
-  }
-  &:after{
-    left: 7px;
-    top: 1px;
-  }
-  &:before{
-    top:-1px;
-  }
-}
-.checkbox_small{
-  font-size: 14px;
-  width:16px;
-  height: 16px;
-  & .checkbox__text{
-    padding-left: 25px;
-  }
-  &:after{
-    left: 7px;
-    top: 1px;
-    height: 8px;
-    width: 3px;
-  }
-  &:before{
-    top: -2px;
-  }
-}
-.checkbox__label_intermediate{
-  &:after{
-    border-left: none;
-    width: 16px;
-    transform: none;
-    top: 7px;
-    height: 0;
-    left: 4px;
-    border-right: none;
-  }
-  &.checkbox_medium:after{
-    width: 12px;
-  }
-  &.checkbox_small:after{
-    width: 10px;
-    top: 6px;
-  }
-}
-
-.checkbox__label_intermediate,
-.checkbox__label_checked{
-  &:before{
-    border-color: transparent;
-    background: $color-primary;
-  }
-  &:after{
-    border-color: #fff;
-    display: block;
-  }
-  &.checkbox_secondary{
-    &:before{
-      background: $color-secondary;
-    }
-  }
-
-  &.checkbox_contained{
-    &.checkbox_secondary{
-      &:before{
-        background: $color-secondary;
-      }
-    }
-    &.checkbox_neutral{
-      &:before{
-        background: $color-neutral;
-      }
-    }
-    &.checkbox_success{
-      &:before{
-        background: $color-success;
-      }
-    }
-    &.checkbox_error{
-      color: $color-error-dark;
-      &:before{
-        background: $color-error-dark;
-      }
-    }
-    &.checkbox_warning{
-      &:before{
-        background: $color-warning;
-      }
-    }
-  }
-}
-.checkbox_outlined{
-  &:before{
-    background: transparent;
-    border-color: $color-primary;
-  }
-  &:after{
-    border-color: $color-primary;
-  }
-  &.checkbox_secondary{
-    &:before{
-      border-color: $color-secondary;
-    }
-    &:after{
-      border-color: $color-secondary;
-    }
-  }
-  &.checkbox_neutral{
-    &:before{
-      border-color: $color-neutral;
-    }
-    &:after{
-      border-color: $color-neutral;
-    }
-  }
-  &.checkbox_success{
-    &:before{
-      border-color: $color-success;
-    }
-    &:after{
-      border-color: $color-success;
-    }
-  }
-  &.checkbox_error{
-    color: $color-error-dark;
-    &:before{
-      border-color: $color-error-dark;
-    }
-    &:after{
-      border-color: $color-error-dark;
-    }
-  }
-  &.checkbox_warning{
-    &:before{
-      border-color: $color-warning;
-    }
-    &:after{
-      border-color: $color-warning;
-    }
-  }
-}
-
-.checkbox__label_disabled{
-  color: $color-gray-500 !important;
-  pointer-events: none;
-  &:before{
-    background-color: $color-gray-400;
-  }
-  &:after{
-    border-color: $color-gray-200;
-  }
-  &.checkbox_outlined{
-    &:before{
-      background-color: transparent;
-      border-color: $color-gray-200;
-    }
-    &:after{
-      border-color: $color-gray-200;
-    }
-  }
-}
-
-.radio{
-  & .checkbox__label{
-    &:before{
-      border-radius: 50%;
-    }
-    &:after{
-      border: none;
-      border-radius: 50%;
-      background: $color-primary;
-      width: 12px;
-      height: 12px;
-      margin-top: -2px;
-      margin-left: 1px;
-      top:50%;
-      left:50%;
-      transform: translate(-50%, -50%);
-    }
-    &.checkbox_medium{
-      &:after{
-        width: 8px;
-        height: 8px;
-        margin-top: 0;
-      }
-    }
-    &.checkbox_small{
-      &:after{
-        width: 6px;
-        height: 6px;
-        margin-top: -1px;
-      }
-    }
-    &.checkbox_error:before{
-      border-color: $color-error-dark;
-    }
-    &.checkbox_secondary:before{
-      border-color: $color-secondary;
-    }
-    &.checkbox_success:before{
-      border-color: $color-success;
-    }
-    &.checkbox_warning:before{
-      border-color: $color-warning;
-    }
-    &.checkbox_neutral:before{
-      border-color: $color-neutral;
-    }
-    &.checkbox_error:after{
-      background: $color-error-dark;
-    }
-    &.checkbox_secondary:after{
-      background: $color-secondary;
-    }
-    &.checkbox_success:after{
-      background: $color-success;
-    }
-    &.checkbox_warning:after{
-      background: $color-warning;
-    }
-    &.checkbox_neutral:after{
-      background: $color-neutral;
-    }
-    &_disabled:after{
-      background: $color-gray-200 !important;
-    }
-    &.checkbox_contained:after{
-      background: #fff;
-    }
-
-    &.checkbox__label_disabled:before{
-      background: transparent !important;
-      border-color: $color-gray-400;
-    }
-    &_checked{
-      &.checkbox__label_disabled:before{
-        background: #B1BCC6 !important;
-      }
-    }
-
-
-  }
-}
+@import "../../../assets/Checkbox";

package/esm/ui/Form/Checkbox/Radio.js

@@ -1,13 +1,17 @@
-import Checkbox from './Checkbox';
-import css from './Checkbox.module.scss';
+import Checkbox from "./Checkbox";
 import clsx from 'clsx';
+import css from "./Checkbox.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+const CssClasses = ['radio'];
+
+// const css = getCssPrefix(CssClasses)
+
 const Radio = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(Checkbox, {
       ...props,
-      className: clsx(props.className, css.radio, css['radio_' + props.size || 'large'], css['radio_' + props.color || 'primary']),
+      className: clsx(props.className, css.radio),
       type: 'radio'
     })
   });

package/esm/ui/Form/DateField/DateField.js

@@ -1,10 +1,10 @@
 "use client";
 
-import TextField from '../TextField/TextField';
+import TextField from "../TextField/TextField";
 import { forwardRef, useState } from 'react';
-import ButtonIcon from '../../Button/ButtonIcon';
-import Card from '../../Card/Card';
-import DatePicker from '../DatePicker/DatePicker';
+import ButtonIcon from "../../Button/ButtonIcon";
+import Card from "../../Card/Card";
+import DatePicker from "../DatePicker/DatePicker";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const DateInput = /*#__PURE__*/forwardRef((props, ref) => {
@@ -14,7 +14,6 @@ const DateInput = /*#__PURE__*/forwardRef((props, ref) => {
     ...restProps
   } = props;
   let inputIcon = showTime && showTimeOnly ? 'schedule' : 'calendar_today';
-  console.log(restProps);
   return /*#__PURE__*/_jsx(TextField, {
     ref: ref,
     ...restProps,

package/esm/ui/Form/DateField/TimeField.js

@@ -1,4 +1,4 @@
-import DateField from './DateField';
+import DateField from "./DateField";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const TimeField = props => {

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

@@ -1,7 +1 @@
-@import "../../../assets/styles";
-
-.datepicker{
-  & .react-datepicker{
-    border:none;
-  }
-}
+@import "../../../assets/DatePicker";

package/esm/ui/Form/DatePicker/PeriodSelect.js

@@ -1,6 +1,6 @@
 "use client";
 
-import DatePicker from './DatePicker';
+import DatePicker from "./DatePicker";
 import { useState } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";

package/esm/ui/Form/DatePicker/TimePicker.js

@@ -1,6 +1,6 @@
 "use client";
 
-import DatePicker from './DatePicker';
+import DatePicker from "./DatePicker";
 import { useState } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";

package/esm/ui/Form/Interval/Interval.js

@@ -1,12 +1,16 @@
 "use client";
 
 import { forwardRef, useState } from 'react';
-import css from './Interval.module.scss';
-import { TextFieldContainer, TextFieldInput } from '../TextField/TextField';
-import HelperText from '../../HelperText/HelperText';
+import { TextFieldContainer, TextFieldInput } from "../TextField/TextField";
+import HelperText from "../../HelperText/HelperText";
+import css from "./Interval.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 = ['interval', 'interval__end', 'interval__item', 'interval__helperText', 'intervalslide__slider'];
+
+// const css = getCssPrefix(CssClasses)
+
 const Interval = /*#__PURE__*/forwardRef((props, ref) => {
   let {
     value,

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

@@ -1,35 +1 @@
-@import "../../../assets/styles";
-
-.interval{
-  @include flex();
-  width: 100%;
-  & input{
-    -moz-appearance: textfield;
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-  }
-}
-.interval__end{
-  text-align: right;
-  & + span{
-    text-align: right;
-    padding-left: 0;
-    padding-right: 12px;
-  }
-}
-.interval__item{
-  max-width: 50%;
-  flex: 0 0 50%;
-}
-
-.interval__helperText{
-  margin-top: calc($size-step / 2);
-}
-
-.intervalslide__slider{
-  padding: 0 calc($size-step * 2);
-  margin-top: -7px;
-}
+@import "../../../assets/Interval";

package/esm/ui/Form/Interval/IntervalSlide.js

@@ -1,12 +1,16 @@
 "use client";
 
-import Interval from './Interval';
-import css from './Interval.module.scss';
+import Interval from "./Interval";
 import { useState } from 'react';
-import Slider from '../../Slider/Slider';
+import Slider from "../../Slider/Slider";
+import css from "./Interval.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 = ['intervalslide__slider'];
+
+// const css = getCssPrefix(CssClasses)
+
 const IntervalSlide = props => {
   let {
     onChange,

package/esm/ui/Form/Password/Password.js

@@ -1,8 +1,8 @@
 "use client";
 
-import TextField from '../TextField/TextField';
+import TextField from "../TextField/TextField";
 import { forwardRef, useRef, useState } from 'react';
-import ButtonIcon from '../../Button/ButtonIcon';
+import ButtonIcon from "../../Button/ButtonIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const Password = /*#__PURE__*/forwardRef((props, ref) => {

package/esm/ui/Form/Period/Period.js

@@ -1,15 +1,19 @@
 "use client";
 
-import TextField from '../TextField/TextField';
+import TextField from "../TextField/TextField";
 import { forwardRef, useState } from 'react';
-import css from './Period.module.scss';
-import ButtonIcon from '../../Button/ButtonIcon';
-import Card from '../../Card/Card';
-import DatePicker from '../DatePicker/DatePicker';
-import { DateService } from '../../../lib/services/DateService';
+import ButtonIcon from "../../Button/ButtonIcon";
+import Card from "../../Card/Card";
+import DatePicker from "../DatePicker/DatePicker";
+import { DateService } from "../../../lib/services/DateService";
+import css from "./Period.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 = ['dateField', 'dateField__picker'];
+
+// const css = getCssPrefix(CssClasses)
+
 const Period = /*#__PURE__*/forwardRef((props, ref) => {
   let {
     onChange,

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

@@ -1,10 +1,2 @@
-@import "../../../assets/styles";
+@import "../../../assets/Period";
 
-.dateField{
-  position: relative;
-}
-.dateField__picker{
-  position: absolute;
-  top: 100%;
-  right: 0;
-}

package/esm/ui/Form/Rating/Rating.js

@@ -1,11 +1,15 @@
 "use client";
 
-import css from './Rating.module.scss';
 import { useState } from 'react';
 import clsx from 'clsx';
+import css from "./Rating.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 = ['rating', 'rating__item', 'rating_medium', 'rating_small', 'rating__item_disabled'];
+
+// const css = getCssPrefix(CssClasses)
+
 const Rating = props => {
   let {
     size = 'large',

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

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

package/esm/ui/Form/Select/Select.js

@@ -1,15 +1,19 @@
 "use client";
 
-import TextField from '../TextField/TextField';
+import TextField from "../TextField/TextField";
 import { forwardRef, useRef, useState } from 'react';
-import css from './Select.module.scss';
-import ButtonIcon from '../../Button/ButtonIcon';
+import ButtonIcon from "../../Button/ButtonIcon";
 import clsx from 'clsx';
-import ListItem from '../../List/ListItem';
-import useClickOutside from '../../../lib/hooks/useClickOutside';
+import ListItem from "../../List/ListItem";
+import useClickOutside from "../../../lib/hooks/useClickOutside";
+import css from "./Select.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const CssClasses = ['select', 'select__input_wrapper', 'select__input', 'options', 'options_inline'];
+
+// const css = getCssPrefix(CssClasses)
+
 export const getOptionValue = option => option.value || option.text;
 function Select(props) {
   var _options$find;