armtek-uikit-react 1.0.13 → 1.0.15

package/{cjs/assets → assets}/Adornment.scss

@@ -1,3 +1,5 @@
+@import "variables";
+
 .adornmentContainer{
   display: flex;
 }

package/{esm/ui/Alert/Alert.module.scss → assets/Alert.scss}

@@ -1,4 +1,4 @@
-@import "../../assets/styles";
+@import "variables";
 
 .alert{
   padding: calc($size-step * 2) calc($size-step * 5) calc($size-step * 2) calc($size-step * 7);

package/{esm/ui/Avatar/Avatar.module.scss → assets/Avatar.scss}

@@ -1,4 +1,4 @@
-@import "../../assets/styles";
+@import "variables";
 
 .avatar{
   width: $size-elarge;

package/{cjs/ui/Avatar/AvatarGroup.module.scss → assets/AvatarGroup.scss}

@@ -1,4 +1,4 @@
-@import "../../assets/styles";
+@import "variables";
 
 .avatarGroup{
   @include flex(flex-end);

package/{cjs/ui/Badge/Badge.module.scss → assets/Badge.scss}

@@ -1,4 +1,4 @@
-@import "../../assets/styles";
+@import "variables";
 
 .badge{
   display: inline-block;

package/{cjs/assets → assets}/Button.scss

@@ -1,3 +1,4 @@
+@import "./../assets/variables";
 
 .button{
   outline: none;
@@ -185,39 +186,7 @@
   font-size: 13px;
 }
 
-.button_icon{
-  padding: $size-step;
-  width: $size-elarge;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 30px;
-  &.button_large{
-    width: $size-large;
-    font-size: 24px;
-  }
-  &.button_medium{
-    width: $size-medium;
-    font-size: 20px;
-  }
-  &.button_small{
-    width: $size-small;
-    padding: calc($size-step / 2);
-    font-size: 16px;
-  }
-}
 
-.button_group{
-  display: flex;
-  align-items: center;
-}
-.button_group_inline{
-  flex-direction: row;
-}
-.button_group_column{
-  flex-direction: column;
-}
 
 .button_grouped_inline{
   border-radius: 0;

package/assets/ButtonGroup.scss

@@ -0,0 +1,12 @@
+@import "./../assets/variables";
+
+.button_group{
+  display: flex;
+  align-items: center;
+}
+.button_group_inline{
+  flex-direction: row;
+}
+.button_group_column{
+  flex-direction: column;
+}

package/assets/ButtonIcon.scss

@@ -0,0 +1,24 @@
+@import "./../assets/variables";
+
+.button_icon{
+  padding: $size-step;
+  width: $size-elarge;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 30px;
+  &.button_large{
+    width: $size-large;
+    font-size: 24px;
+  }
+  &.button_medium{
+    width: $size-medium;
+    font-size: 20px;
+  }
+  &.button_small{
+    width: $size-small;
+    padding: calc($size-step / 2);
+    font-size: 16px;
+  }
+}

package/{cjs/ui/Card/Card.module.scss → assets/Card.scss}

@@ -1,4 +1,4 @@
-@import "../../assets/styles";
+@import "variables";
 
 .card{
   padding: $size-step;

package/{esm/ui/Form/Checkbox/Checkbox.module.scss → assets/Checkbox.scss}

@@ -1,4 +1,4 @@
-@import "../../../assets/styles";
+@import "variables";
 
 .checkbox{
   position: relative;

package/{esm/ui/Chip/Chip.module.scss → assets/Chip.scss}

@@ -1,4 +1,4 @@
-@import "../../assets/styles";
+@import "variables";
 
 .chip{
   background: $color-gray-200;

package/{cjs/ui/Form/DatePicker/DatePicker.module.scss → assets/DatePicker.scss}

@@ -1,4 +1,4 @@
-@import "../../../assets/styles";
+@import "variables";
 
 .datepicker{
   & .react-datepicker{

package/{cjs/ui/HelperText/HelperText.module.scss → assets/HelperText.scss}

@@ -1,4 +1,4 @@
-@import "../../assets/styles";
+@import "variables";
 
 .helperText{
   color: $color-gray-600;

package/{esm/ui/Form/Interval/Interval.module.scss → assets/Interval.scss}

@@ -1,4 +1,4 @@
-@import "../../../assets/styles";
+@import "variables";
 
 .interval{
   @include flex();

package/{esm/ui/List/ListItem.module.scss → assets/ListItem.scss}

@@ -1,4 +1,4 @@
-@import "../../assets/styles";
+@import "variables";
 
 .listitem{
   outline: none;

package/{esm/ui/Loader/Loader.module.scss → assets/Loader.scss}

@@ -1,4 +1,4 @@
-@import "../../assets/styles";
+@import "variables";
 
 .loader{
   -webkit-animation: rotating 2s linear infinite;

package/{esm/ui/Logo/Logo.module.scss → assets/Logo.scss}

@@ -1,4 +1,4 @@
-@import "../../assets/styles";
+@import "variables";
 
 .logo{
   display: inline-block;

package/{esm/ui/Form/Period/Period.module.scss → assets/Period.scss}

@@ -1,4 +1,4 @@
-@import "../../../assets/styles";
+@import "variables";
 
 .dateField{
   position: relative;

package/{esm/ui/Form/Rating/Rating.module.scss → assets/Rating.scss}

@@ -1,4 +1,4 @@
-@import "../../../assets/styles";
+@import "variables";
 
 .rating{
   @include flex();

package/{cjs/ui/Form/Select/Select.module.scss → assets/Select.scss}

@@ -1,4 +1,4 @@
-@import "../../../assets/styles";
+@import "variables";
 
 .select{
   position: relative;

package/{esm/ui/Slider/Slider.module.scss → assets/Slider.scss}

@@ -1,4 +1,4 @@
-@import "../../assets/styles";
+@import "variables";
 
 .slider__helperText{
   @include flex(space-between);

package/{cjs/ui/Status/Status.module.scss → assets/Status.scss}

@@ -1,4 +1,4 @@
-@import "../../assets/styles";
+@import "variables";
 
 .status{
   display: inline-flex;

package/{esm/ui/Stepper/StepItem.module.scss → assets/StepItem.scss}

@@ -1,4 +1,4 @@
-@import "../../assets/styles";
+@import "variables";
 
 .stepItem__inner{
   @include flex(flex-start, flex-start)

package/{cjs/ui/Stepper/StepItemIcon.module.scss → assets/StepItemIcon.scss}

@@ -1,4 +1,4 @@
-@import "../../assets/styles";
+@import "variables";
 
 .stepItemIcon{
   @include flex(center);

package/{cjs/ui/Stepper/Stepper.module.scss → assets/Stepper.scss}

@@ -1,4 +1,4 @@
-@import "../../assets/styles";
+@import "variables";
 
 .stepper{
 

package/{esm/ui/Form/Switch/Switch.module.scss → assets/Switch.scss}

@@ -1,4 +1,4 @@
-@import "../../../assets/styles";
+@import "variables";
 
 
 .switch {

package/{cjs/ui/Form/TextArea/TextArea.module.scss → assets/TextArea.scss}

@@ -1,4 +1,4 @@
-@import "../../../assets/styles";
+@import "variables";
 
 .textarea{
   font-family: $font-family;

package/{cjs/ui/Form/TextField/TextField.module.scss → assets/TextField.scss}

@@ -1,4 +1,4 @@
-@import "../../../assets/styles";
+@import "variables";
 
 .textfield{
   position: relative;

package/{cjs/ui/Tooltip/Tooltip.module.scss → assets/Tooltip.scss}

@@ -1,4 +1,4 @@
-@import "../../assets/styles";
+@import "variables";
 
 .tooltip{
   display: inline-block;

package/assets/styles.scss

@@ -0,0 +1,31 @@
+//@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
+//@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 "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/index.js

@@ -0,0 +1,15 @@
+export { default as Button } from "./ui/Button";
+export { default as ButtonIcon } from "./ui/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 → 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/package.json

@@ -1 +1,25 @@
-{"name":"armtek-uikit-react","version":"1.0.13","description":"Armtek UIKit for React","main":"cjs/index.js","module":"esm/index.js","types":"esm/index.d.ts","type":"module","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
+{
+  "name": "armtek-uikit-react",
+  "version": "1.0.15",
+  "description": "Armtek UIKit for React",
+  "types": "types/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "ssh://git@gl.corp:10022/int/uikit/uikit_react.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "rc-slider": "^10.2.1",
+    "react": "*",
+    "react-datepicker": "^4.16.0",
+    "react-dom": "*"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "scripts": {
+    "pub": "npm version patch && npm publish"
+  }
+}

package/{esm → types}/index.d.ts

@@ -1,6 +1,6 @@
-export { default as Button } from './ui/Button/Button';
-export { default as ButtonIcon } from './ui/Button/ButtonIcon';
-export type { ButtonProps } from './ui/Button/Button';
+export { default as Button } from './ui/Button';
+export { default as ButtonIcon } from './ui/ButtonIcon';
+export type { ButtonProps } from './ui/Button';
 export { default as Alert } from './ui/Alert/Alert';
 export type { AlertProps } from './ui/Alert/Alert';
 export { default as Avatar } from './ui/Avatar/Avatar';

package/{esm → types}/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/ui/Button/Button.d.ts → types/ui/Button/index.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;
@@ -11,5 +11,5 @@ type OwnProps<T extends ElementType = ElementType> = {
     as?: T;
 };
 export type ButtonProps<T extends ElementType = ElementType<HTMLAttributes<HTMLButtonElement>>> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps>;
-declare const Button: <T extends ElementType>(props: ButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
-export default Button;
+declare const Index: <T extends ElementType>(props: ButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default Index;

package/{esm/ui/Button/ButtonIcon.d.ts → types/ui/ButtonIcon/index.d.ts}

@@ -1,3 +1,3 @@
-import { ButtonProps } from './Button';
+import { ButtonProps } from '../Button';
 declare const ButtonIcon: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default ButtonIcon;

package/{esm → types}/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 → types}/ui/Stepper/StepItem.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { StepItemIconProps } from './StepItemIcon';
-import { ButtonProps } from '../Button/Button';
+import { ButtonProps } from '../Button';
 export type StepItemProps = {
     title: string;
     children?: ReactNode | string;

package/{esm/ui → 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/ui/Adornment/Adornment.module.scss

@@ -0,0 +1,2 @@
+@import "./../../assets/variables";
+@import "./../../assets/Adornment";

package/{esm/ui → ui}/Alert/Alert.js

@@ -1,9 +1,13 @@
-import css from './Alert.module.scss';
 import clsx from 'clsx';
-import ButtonIcon from '../Button/ButtonIcon';
+import Index from "../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,
@@ -27,7 +31,7 @@ const Alert = props => {
         children: props.title
       }), /*#__PURE__*/_jsx("div", {
         children: props.children
-      }), !!onClose && /*#__PURE__*/_jsx(ButtonIcon, {
+      }), !!onClose && /*#__PURE__*/_jsx(Index, {
         onClick: onClose,
         size: 'small',
         color: 'neutral',

package/ui/Alert/Alert.module.scss

@@ -0,0 +1,2 @@
+@import "./../../assets/variables";
+@import "./../../assets/Alert";

package/{esm/ui → 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] : '');

package/ui/Avatar/Avatar.module.scss

@@ -0,0 +1 @@
+@import "./../../assets/Avatar";

package/{esm/ui → ui}/Avatar/AvatarGroup.js

@@ -1,9 +1,13 @@
 import { Children, cloneElement, isValidElement } from 'react';
-import css from './AvatarGroup.module.scss';
 import clsx from 'clsx';
+import css from "./AvatarGroup.module.scss";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "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 = Children.toArray(props.children);
   let visiblePart = arrChildren.slice(0, props.limit || 3);

package/ui/Avatar/AvatarGroup.module.scss

@@ -0,0 +1 @@
+@import "./../../assets/AvatarGroup";

package/{esm/ui → ui}/Badge/Badge.js

@@ -1,8 +1,12 @@
-import css from './Badge.module.scss';
 import clsx from 'clsx';
+import css from "./Badge.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 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/ui/Badge/Badge.module.scss

@@ -0,0 +1 @@
+@import "./../../assets/Badge";

package/ui/Button/Button.module.scss

@@ -0,0 +1 @@
+@import "./../../assets/Button";

package/{esm/ui/Button/Button.js → ui/Button/index.js}

@@ -1,9 +1,13 @@
-import { ButtonClasses as css } from './ButtonClasses';
 import clsx from 'clsx';
+import css from "./Button.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 Button = props => {
+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 Index = props => {
   let {
     size = 'extraLarge',
     color = 'primary',
@@ -35,4 +39,4 @@ const Button = props => {
     })
   });
 };
-export default Button;
+export default Index;

package/ui/ButtonGroup/ButtonGroup.module.scss

@@ -0,0 +1,2 @@
+@import "./../../assets/ButtonGroup";
+

package/{esm/ui/Button/ButtonGroup.js → ui/ButtonGroup/index.js}

@@ -1,7 +1,11 @@
-import css from './Button.module.scss';
 import clsx from 'clsx';
+import css from "../Button/Button.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+const ButtonGroupClasses = ['button_group', 'button_group_inline', 'button_group_column'];
+
+// const css = getCssPrefix(ButtonGroupClasses)
+
 const ButtonGroup = props => {
   let {
     orientation = 'inline',

package/ui/ButtonIcon/ButtonIcon.module.scss

@@ -0,0 +1 @@
+@import "./../../assets/ButtonIcon";

package/{esm/ui/Button/ButtonIcon.js → ui/ButtonIcon/index.js}

@@ -1,8 +1,12 @@
-import Button from './Button';
+import Button from "../Button";
 import clsx from 'clsx';
-import css from './Button.module.scss';
+import css from "../Button/Button.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+const ButtonIconClasses = ['button_icon'];
+
+// const css = getCssPrefix(ButtonIconClasses)
+
 const ButtonIcon = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(Button, {

package/{esm/ui → ui}/Card/Card.js

@@ -1,7 +1,11 @@
-import css from './Card.module.scss';
 import clsx from 'clsx';
+import css from "./Card.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+const CssClasses = ['card'];
+
+// const css = getCssPrefix(CssClasses)
+
 const Card = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx("div", {

package/ui/Card/Card.module.scss

@@ -0,0 +1 @@
+@import "./../../assets/Card";