armtek-uikit-react 1.0.13 → 1.0.14

package/cjs/ui/Adornment/Adornment.js

@@ -4,8 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = exports.AdornmentContainer = void 0;
 var _clsx = _interopRequireDefault(require("clsx"));
+var _AdornmentModule = _interopRequireDefault(require("./Adornment.module.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
-// import css from './Adornment.module.scss'
+// import { getCssPrefix } from 'lib/helpers/helpers'
+const AdornmentClasses = ['adornmentContainer', 'adornmentContainer_end', 'adornment_start', 'adornment_end'];
+
+// const css = getCssPrefix(AdornmentClasses)
 
 const Adornment = props => {
   let {
@@ -18,8 +22,8 @@ const Adornment = props => {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ...spanProps,
       className: (0, _clsx.default)(className, {
-        'adornment_start': position === 'start',
-        'adornment_end': position !== 'start'
+        [_AdornmentModule.default['adornment_start']]: position === 'start',
+        [_AdornmentModule.default['adornment_end']]: position !== 'start'
       }),
       children: children
     })
@@ -35,8 +39,8 @@ const AdornmentContainer = props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ...inputProps,
-      className: (0, _clsx.default)('adornmentContainer', {
-        ['adornmentContainer_end']: position !== 'start'
+      className: (0, _clsx.default)(_AdornmentModule.default.adornmentContainer, {
+        [_AdornmentModule.default['adornmentContainer_end']]: position !== 'start'
       }, className),
       children: children
     })

package/cjs/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/cjs/ui/Alert/Alert.js

@@ -3,10 +3,14 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
-var _AlertModule = _interopRequireDefault(require("./Alert.module.scss"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _ButtonIcon = _interopRequireDefault(require("../Button/ButtonIcon"));
+var _AlertModule = _interopRequireDefault(require("./Alert.module.scss"));
 var _jsxRuntime = require("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/cjs/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/cjs/ui/Avatar/Avatar.js

@@ -3,9 +3,13 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
-var _AvatarModule = _interopRequireDefault(require("./Avatar.module.scss"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _AvatarModule = _interopRequireDefault(require("./Avatar.module.scss"));
 var _jsxRuntime = require("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] : '');

package/cjs/ui/Avatar/Avatar.module.scss

@@ -1,82 +1 @@
-@import "../../assets/styles";
-
-.avatar{
-  width: $size-elarge;
-  height: $size-elarge;
-  min-width: $size-elarge;
-  border-radius: 50%;
-  background: $color-primary;
-  color: #fff;
-  position: relative;
-}
-.avatar__inner{
-  overflow: hidden;
-  border-radius: 50%;
-  width: 100%;
-  height: 100%;
-  @include flex(center);
-}
-.avatar_medium{
-  width: 40px;
-  height: 40px;
-  min-width: 40px;
-  & .avatar__name{
-    font-size: 16px;
-  }
-  & .avatar__icon{
-    font-size: 30px;
-  }
-  & .avatar__status{
-    right: -2px;
-    bottom: -2px;
-  }
-}
-.avatar_small{
-  width: 24px;
-  height: 24px;
-  min-width: 24px;
-  & .avatar__name{
-    font-size: 12px;
-  }
-  & .avatar__icon{
-    font-size: 20px;
-  }
-  & .avatar__status{
-    right: -5px;
-    bottom: -2px;
-  }
-}
-.avatar__inner{
-  font-size: 0;
-}
-.avatar__name{
-  font-size: 24px;
-}
-.avatar__icon{
-  font-size: 50px;
-}
-.avatar__img{
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.avatar__status{
-  position: absolute;
-  width: 14px;
-  height: 14px;
-  border:1px solid #fff;
-  border-radius: 50%;
-  right: 0;
-  bottom: 0;
-}
-.avatar__status_success{
-  background: $color-success;
-}
-.avatar__status_error{
-  background: $color-error-dark;
-}
-.avatar__status_warning{
-  background: $color-warning;
-}
+@import "./../../assets/Avatar";

package/cjs/ui/Avatar/AvatarGroup.js

@@ -4,9 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _react = require("react");
-var _AvatarGroupModule = _interopRequireDefault(require("./AvatarGroup.module.scss"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _AvatarGroupModule = _interopRequireDefault(require("./AvatarGroup.module.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
+const AvatarGroupClasses = ['avatarGroup', 'avatarGroup_medium', 'avatarGroup__item', 'avatarGroup__remains', 'avatarGroup__remains_medium', 'avatarGroup__remains_small'];
+
+// const css = getCssPrefix(AvatarGroupClasses)
+
 const AvatarGroup = props => {
   let arrChildren = _react.Children.toArray(props.children);
   let visiblePart = arrChildren.slice(0, props.limit || 3);

package/cjs/ui/Avatar/AvatarGroup.module.scss

@@ -1,48 +1 @@
-@import "../../assets/styles";
-
-.avatarGroup{
-  @include flex(flex-end);
-  transform: scale(-1, 1);
-}
-.avatarGroup_medium{
-  & .avatarGroup__item + .avatarGroup__item{
-    margin-left: -12px;
-  }
-}
-.avatarGroup_small{
-  & .avatarGroup__item + .avatarGroup__item{
-    margin-left: -8px;
-  }
-}
-.avatarGroup__remains{
-  width: 60px;
-  height: 60px;
-  min-width: 60px;
-  position: relative;
-  @include flex(center);
-  background: $color-neutral-light;
-  font-size: 24px;
-  color: #fff;
-}
-.avatarGroup__remains_medium{
-  width: 44px;
-  height: 44px;
-  min-width: 44px;
-  font-size: 16px;
-}
-.avatarGroup__remains_small{
-  width: 28px;
-  height: 28px;
-  min-width: 28px;
-  font-size: 12px;
-}
-
-.avatarGroup__item{
-  position: relative;
-  transform: scale(-1, 1);
-  border: 2px solid #fff;
-  border-radius: 50%;
-  & + .avatarGroup__item{
-    margin-left: -15px;
-  }
-}
+@import "./../../assets/AvatarGroup";

package/cjs/ui/Badge/Badge.js

@@ -3,9 +3,13 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
-var _BadgeModule = _interopRequireDefault(require("./Badge.module.scss"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _BadgeModule = _interopRequireDefault(require("./Badge.module.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
+const BadgeClasses = ['badge', 'badge__item_primary', 'badge__item_secondary', 'badge__item_neutral', 'badge__item_error', 'badge__item_info', 'badge__item_warning', 'badge__item_success', 'badge__item_content', 'badge__item_content_circle', 'badge__item_content_square', 'badge__item_content_circle', 'badge__item_top-right', 'badge__item_top-left', 'badge__item_bottom-right', 'badge__item_bottom-left'];
+
+// const css = getCssPrefix(BadgeClasses)
+
 function Badge(props) {
   let {
     color,

package/cjs/ui/Badge/Badge.module.scss

@@ -1,83 +1 @@
-@import "../../assets/styles";
-
-.badge{
-  display: inline-block;
-  position: relative;
-}
-
-$vertical_offset: calc(100% - 6px);
-$horizontal_offset: calc(100% - 6px);
-
-.badge__item{
-  background: $color-error;
-  color: #fff;
-  position: absolute;
-  width: 8px;
-  height: 8px;
-  bottom: $vertical_offset;
-  left: $horizontal_offset;
-  border-radius: 50%;
-  &_primary{
-    background: $color-primary;
-  }
-  &_secondary{
-    background: $color-primary;
-  }
-  &_neutral{
-    background: $color-neutral;
-  }
-  &_error{
-    background: $color-error;
-  }
-  &_info{
-    background: $color-info;
-  }
-  &_warning{
-    background: $color-warning;
-  }
-  &_success{
-    background: $color-success;
-    color: $color-gray-900;
-  }
-}
-.badge__item_content{
-  width: 20px;
-  height: 20px;
-  @include flex(center);
-  font-size: 12px;
-}
-
-.badge__item_content_circle,
-.badge__item_content_square{
-  width: auto;
-  height: auto;
-  border-radius: $radius;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 20px;
-  padding:0 6px;
-}
-.badge__item_content_circle{
-  border-radius: 10px;
-}
-
-.badge__item_top-right{
-  bottom: $vertical_offset;
-  left: $horizontal_offset;
-}
-.badge__item_top-left{
-  bottom: $vertical_offset;
-  right: $horizontal_offset;
-  left: auto;
-}
-.badge__item_bottom-right{
-  top: $vertical_offset;
-  left: $horizontal_offset;
-  bottom: auto;
-}
-.badge__item_bottom-left{
-  top: $vertical_offset;
-  right: $horizontal_offset;
-  left: auto;
-  bottom: auto;
-}
+@import "./../../assets/Badge";

package/cjs/ui/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ElementType, HTMLAttributes, ReactNode } from 'react';
-import { ColorThemeType, ColorType, SizeType, VariantType } from 'types/theme';
+import { ColorThemeType, ColorType, SizeType, VariantType } from '../../types/theme';
 type OwnProps<T extends ElementType = ElementType> = {
     children: ReactNode;
     size?: SizeType;

package/cjs/ui/Button/Button.js

@@ -3,9 +3,13 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
-var _ButtonClasses = require("./ButtonClasses");
 var _clsx = _interopRequireDefault(require("clsx"));
+var _ButtonModule = _interopRequireDefault(require("./Button.module.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
+const ButtonClasses = ['button', 'button_contained', 'button_transparent', 'button_outlined', 'button_primary', 'button_secondary', 'button_neutral', 'button_black', 'button__adornment', 'button__adornment_end', 'button__adornment_start', 'button_large', 'button_medium', 'button_small', 'button_icon', 'button_group', 'button_group_inline', 'button_group_column', 'button_grouped_inline', 'button_grouped_column'];
+
+// const css = getCssPrefix(ButtonClasses)
+
 const Button = props => {
   let {
     size = 'extraLarge',
@@ -23,16 +27,16 @@ const Button = props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, {
       ...restProps,
-      className: (0, _clsx.default)(_ButtonClasses.ButtonClasses.button, _ButtonClasses.ButtonClasses['button_' + size], _ButtonClasses.ButtonClasses['button_' + variant], _ButtonClasses.ButtonClasses['button_' + color], className, {
-        [_ButtonClasses.ButtonClasses['button_grouped_' + group]]: group
+      className: (0, _clsx.default)(_ButtonModule.default.button, _ButtonModule.default['button_' + size], _ButtonModule.default['button_' + variant], _ButtonModule.default['button_' + color], className, {
+        [_ButtonModule.default['button_grouped_' + group]]: group
       }),
       children: [startAdornment && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _clsx.default)(_ButtonClasses.ButtonClasses.button__adornment, _ButtonClasses.ButtonClasses.button__adornment_start),
+        className: (0, _clsx.default)(_ButtonModule.default.button__adornment, _ButtonModule.default.button__adornment_start),
         children: startAdornment
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         children: children
       }), endAdornment && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _clsx.default)(_ButtonClasses.ButtonClasses.button__adornment, _ButtonClasses.ButtonClasses.button__adornment_end),
+        className: (0, _clsx.default)(_ButtonModule.default.button__adornment, _ButtonModule.default.button__adornment_end),
         children: endAdornment
       })]
     })