armtek-uikit-react 1.0.9 → 1.0.11

package/esm/ui/Button/Button.module.scss

@@ -0,0 +1,298 @@
+@import "../../assets/styles";
+
+.button{
+  outline: none;
+  border:1px solid transparent;
+  border-radius: $radius;
+  text-transform: uppercase;
+  padding: $size-step calc(3 * $size-step);
+  cursor: pointer;
+  @include transition(0.3s);
+  font-weight: 500;
+  font-size: 16px;
+  height: $size-elarge;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:disabled{
+    cursor: initial;
+  }
+}
+.button_contained {
+  &.button_primary{
+    color: #fff;
+    background: $color-primary;
+    &:hover{
+      background: $color-primary-dark;
+    }
+    &:active{
+      background: $color-blue-800;
+    }
+    &:disabled{
+      background: $color-primary-light;
+    }
+  }
+  &.button_secondary {
+    background: $color-secondary;
+    color: #fff;
+    &:hover{
+      background: $color-secondary-dark;
+    }
+    &:active{
+      background: $color-orange-800;
+    }
+    &:disabled{
+      background: $color-secondary-light;
+    }
+  }
+  &.button_neutral {
+    background: $color-neutral;
+    &:hover{
+      background: $color-neutral-dark;
+    }
+    &:active{
+      background: $color-gray-600;
+    }
+    &:disabled{
+      background: $color-secondary-light;
+    }
+  }
+  &.button_black {
+    background: $color-gray-900;
+    &:hover{
+      background: $color-neutral-dark;
+    }
+    &:active{
+      background: $color-gray-600;
+    }
+    &:disabled{
+      background: $color-secondary-light;
+    }
+  }
+}
+.button_outlined {
+  background: transparent;
+  &.button_primary{
+
+    color: $color-primary;
+    border-color: $color-primary;
+    background: transparent;
+    &:hover{
+      background: rgba($color-primary, 0.1);
+    }
+    &:active{
+      background: $color-blue-A100;
+    }
+    &:disabled{
+      color: $color-primary-light;
+      border-color: $color-primary-light;
+    }
+  }
+  &.button_secondary {
+    border-color: $color-secondary;
+    color: $color-secondary;
+    &:hover{
+      background: rgba($color-secondary, 0.1);
+    }
+    &:active{
+      background: $color-orange-100;
+    }
+    &:disabled{
+      color: $color-primary-light;
+      border-color: $color-primary-light;
+    }
+  }
+  &.button_neutral,
+  &.button_black {
+    border-color: $color-gray-900;
+    color: $color-gray-900;
+    &:hover{
+      background: rgba($color-neutral, 0.1);
+    }
+    &:active{
+      background: $color-gray-300;
+    }
+    &:disabled{
+      color: $color-neutral-light;
+      border-color: $color-neutral-light;
+    }
+  }
+}
+.button_transparent {
+  background: transparent;
+  &.button_primary{
+    color: $color-primary;
+    background: transparent;
+    &:hover{
+      background: rgba($color-primary, 0.1);
+    }
+    &:active{
+      background: $color-blue-A100;
+    }
+    &:disabled{
+      color: $color-primary-light;
+      background: none;
+    }
+  }
+  &.button_secondary {
+    color: $color-secondary;
+    &:hover{
+      background: rgba($color-secondary, 0.1);
+    }
+    &:active{
+      background: $color-orange-100;
+    }
+    &:disabled{
+      color: $color-primary-light;
+      background: none;
+    }
+  }
+  &.button_neutral,
+  &.button_black {
+    color: $color-gray-900;
+    &:hover{
+      background: rgba($color-neutral, 0.1);
+    }
+    &:active{
+      background: $color-gray-300;
+    }
+    &:disabled{
+      color: $color-neutral-light;
+      background: none;
+    }
+  }
+}
+
+.button__adornment{
+  font-size: inherit;
+}
+.button__adornment_end{
+  margin-left: $size-step;
+}
+.button__adornment_start{
+  margin-right: $size-step;
+}
+
+.button_large{
+  height: $size-large;
+  font-size: 15px;
+}
+.button_medium{
+  height: $size-medium;
+  font-size: 14px;
+}
+.button_small{
+  height: $size-small;
+  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;
+  &:first-child{
+    border-top-left-radius: $radius;
+    border-bottom-left-radius: $radius;
+  }
+  &:last-child{
+    border-top-right-radius: $radius;
+    border-bottom-right-radius: $radius;
+  }
+  &.button_contained{
+    &.button_primary + *{
+      border-left-color: $color-info-dark;
+    }
+    &.button_secondary + *{
+      border-left-color: $color-primary-dark;
+    }
+    &.button_neutral + *{
+      border-left-color: $color-neutral-dark;
+    }
+    &.button_black + *{
+      border-left-color: $color-neutral-dark;
+    }
+  }
+  &.button_outlined{
+    &.button_primary + *{
+      border-left-color: $color-info-dark;
+    }
+    &.button_primary:not(:last-child){
+      border-right: 0;
+    }
+    &.button_secondary + *{
+      border-left-color: $color-secondary;
+    }
+    &.button_secondary:not(:last-child){
+      border-right: 0;
+    }
+    &.button_neutral + *{
+      border-left-color: $color-neutral;
+    }
+    &.button_neutral:not(:last-child){
+      border-right: 0;
+    }
+    &.button_black + *{
+      border-left-color: $color-neutral;
+    }
+    &.button_black:not(:last-child){
+      border-right: 0;
+    }
+  }
+  &.button_transparent{
+    &.button_primary + *{
+      border-left-color: $color-gray-200;
+    }
+    &.button_secondary + *{
+      border-left-color: $color-gray-200;
+    }
+    &.button_neutral + *{
+      border-left-color: $color-gray-200;
+    }
+    &.button_black + *{
+      border-left-color: $color-gray-200;
+    }
+  }
+}
+.button_grouped_column{
+  border-radius: 0;
+  &:first-child{
+    border-top-left-radius: $radius;
+    border-top-right-radius: $radius;
+  }
+  &:last-child{
+    border-bottom-left-radius: $radius;
+    border-bottom-right-radius: $radius;
+  }
+}

package/{lib/esm → esm/ui}/Card/Card.module.scss

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

package/{lib/cjs → esm/ui}/Chip/Chip.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ElementType, HTMLAttributes } from 'react';
-import { ColorType, SizeType, VariantType } from '../shared/types/theme';
+import { ColorType, SizeType, VariantType } from '../../types/theme';
 export type ChipProps<T extends ElementType = ElementType<HTMLAttributes<HTMLSpanElement>>> = Omit<ComponentPropsWithoutRef<T>, 'color'> & {
     size?: Exclude<SizeType, 'large' | 'extraLarge'>;
     color?: ColorType;

package/{lib/cjs → esm/ui}/Chip/Chip.module.scss

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

package/{lib/cjs → esm/ui}/Form/Checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes, ReactNode } from 'react';
-import { ColorType, SizeType, VariantType } from '../../shared/types/theme';
+import { ColorType, SizeType, VariantType } from '../../../types/theme';
 type BaseCheckboxPropsType = {
     label?: string | ReactNode;
     size?: Exclude<SizeType, 'extraLarge'>;

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

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

package/{lib/esm → esm/ui}/Form/DateField/DateField.d.ts

@@ -15,8 +15,8 @@ declare const DateField: import("react").ForwardRefExoticComponent<{
     showTimeOnly?: boolean | undefined;
 } & {
     label?: string | undefined;
-    size?: "small" | "large" | undefined;
-    variant?: import("../../shared/types/theme").VariantType | undefined;
+    size?: "large" | "small" | undefined;
+    variant?: import("../../../types/theme").VariantType | undefined;
     error?: boolean | undefined;
     success?: boolean | undefined;
     helperText?: string | undefined;

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

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

package/{lib/esm → esm/ui}/Form/DatePicker/DatePicker.js

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
 import ReactDatePicker, { registerLocale } from 'react-datepicker';
 import '!style-loader!css-loader!./styles.css';
+// import './styles.css'
 import ru from 'date-fns/locale/ru';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";

package/{lib/esm → esm/ui}/Form/DatePicker/DatePicker.module.scss

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

package/{lib/esm → esm/ui}/Form/Interval/Interval.js

@@ -3,7 +3,7 @@
 import { forwardRef, useState } from 'react';
 import css from './Interval.module.scss';
 import { TextFieldContainer, TextFieldInput } from '../TextField/TextField';
-import HelperText from '../../Typography/HelperText/HelperText';
+import HelperText from '../../HelperText/HelperText';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";

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

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

package/{lib/cjs → esm/ui}/Form/Password/Password.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 declare const Password: import("react").ForwardRefExoticComponent<{
     label?: string | undefined;
-    size?: "small" | "large" | undefined;
-    variant?: import("../../shared/types/theme").VariantType | undefined;
+    size?: "large" | "small" | undefined;
+    variant?: import("../../../types/theme").VariantType | undefined;
     error?: boolean | undefined;
     success?: boolean | undefined;
     helperText?: string | undefined;

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

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

package/{lib/cjs → esm/ui}/Form/Period/Period.d.ts

@@ -4,8 +4,8 @@ declare const Period: import("react").ForwardRefExoticComponent<{
     onChange?: ((value: [Date | null, Date | null]) => void) | undefined;
 } & {
     label?: string | undefined;
-    size?: "small" | "large" | undefined;
-    variant?: import("../../shared/types/theme").VariantType | undefined;
+    size?: "large" | "small" | undefined;
+    variant?: import("../../../types/theme").VariantType | undefined;
     error?: boolean | undefined;
     success?: boolean | undefined;
     helperText?: string | undefined;

package/{lib/esm → esm/ui}/Form/Period/Period.js

@@ -6,7 +6,7 @@ import css from './Period.module.scss';
 import ButtonIcon from '../../Button/ButtonIcon';
 import Card from '../../Card/Card';
 import DatePicker from '../DatePicker/DatePicker';
-import { DateService } from '../../services/DateService';
+import { DateService } from '../../../lib/services/DateService';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";

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

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

package/{lib/cjs → esm/ui}/Form/Rating/Rating.d.ts

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes } from 'react';
-import { SizeType } from '../../shared/types/theme';
+import { SizeType } from '../../../types/theme';
 type PropsType = {
     size?: Exclude<SizeType, 'extraLarge'>;
     value?: number;

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

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

package/{lib/cjs → esm/ui}/Form/Select/Select.d.ts

@@ -1,4 +1,4 @@
-import { OptionType } from '../../shared/types/theme';
+import { OptionType } from '../../../types/theme';
 import { TextFieldProps } from '../TextField/TextField';
 type SelectBaseProps = {
     options: OptionType[];

package/{lib/esm → esm/ui}/Form/Select/Select.js

@@ -6,7 +6,7 @@ import css from './Select.module.scss';
 import ButtonIcon from '../../Button/ButtonIcon';
 import clsx from 'clsx';
 import ListItem from '../../List/ListItem';
-import useClickOutside from '../../hooks/useClickOutside';
+import useClickOutside from '../../../lib/hooks/useClickOutside';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

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

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

package/{lib/cjs → esm/ui}/Form/Switch/Switch.d.ts

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes } from 'react';
-import { SizeType } from '../../shared/types/theme';
+import { SizeType } from '../../../types/theme';
 type SwitchProps = {
     size?: Exclude<SizeType, 'extraLarge' | 'medium'>;
 } & Omit<InputHTMLAttributes<any>, 'size'>;

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

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

package/{lib/esm → esm/ui}/Form/TextArea/TextArea.module.scss

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

package/{lib/esm → esm/ui}/Form/TextField/TextField.d.ts

@@ -1,5 +1,5 @@
 import { ElementType, HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
-import { SizeType, VariantType } from '../../shared/types/theme';
+import { SizeType, VariantType } from '../../../types/theme';
 export type TextFieldProps = {
     label?: string;
     size?: Exclude<SizeType, 'extraLarge' | 'medium'>;
@@ -12,7 +12,7 @@ export type TextFieldProps = {
 } & Omit<InputHTMLAttributes<any>, 'size'>;
 declare const TextField: import("react").ForwardRefExoticComponent<{
     label?: string | undefined;
-    size?: "small" | "large" | undefined;
+    size?: "large" | "small" | undefined;
     variant?: VariantType | undefined;
     error?: boolean | undefined;
     success?: boolean | undefined;

package/{lib/esm → esm/ui}/Form/TextField/TextField.js

@@ -3,7 +3,7 @@
 import { forwardRef, useRef, useState } from 'react';
 import css from './TextField.module.scss';
 import clsx from 'clsx';
-import HelperText from '../../Typography/HelperText/HelperText';
+import HelperText from '../../HelperText/HelperText';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";

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

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

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

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

package/{lib/esm → esm/ui}/Loader/Loader.d.ts

@@ -1,4 +1,4 @@
-import { SizeType } from '../shared/types/theme';
+import { SizeType } from '../../types/theme';
 export type LoaderProps = {
     size?: SizeType;
 };

package/{lib/cjs → esm/ui}/Loader/Loader.module.scss

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

package/{lib/cjs → esm/ui}/Logo/Logo.module.scss

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

package/{lib/cjs → 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 '../shared/types/theme';
+import { SizeType } from 'types/theme';
 export type SliderProps = {
     size?: Exclude<SizeType, 'extraLarge' | 'medium'>;
 } & Omit<RcSliderProps, 'size'>;

package/{lib/esm → esm/ui}/Slider/Slider.js

@@ -1,6 +1,8 @@
 import RcSlider from 'rc-slider';
 import '!style-loader!css-loader!./style.css';
-import HelperText from '../Typography/HelperText/HelperText';
+// import './style.css'
+
+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";

package/{lib/cjs → esm/ui}/Slider/Slider.module.scss

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

package/{lib/esm → esm/ui}/Status/Status.d.ts

@@ -1,4 +1,4 @@
-import { ColorStatusType, ColorType } from '../shared/types/theme';
+import { ColorStatusType, ColorType } from '../../types/theme';
 import { ReactNode } from 'react';
 export type StatusProps = {
     color?: ColorType | ColorStatusType;

package/{lib/cjs → esm/ui}/Status/Status.module.scss

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

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

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

package/{lib/esm → esm/ui}/Stepper/StepItemIcon.d.ts

@@ -1,4 +1,4 @@
-import { SizeType } from '../shared/types/theme';
+import { SizeType } from '../../types/theme';
 export type StepItemIconProps = {
     number?: string | number;
     size?: Exclude<SizeType, 'extraLarge' | 'medium'>;

package/{lib/esm → esm/ui}/Stepper/StepItemIcon.module.scss

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

package/{lib/esm → esm/ui}/Stepper/Stepper.module.scss

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

package/{lib/esm → esm/ui}/Tooltip/Tooltip.module.scss

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

package/helpers/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "armtek-uikit-react/helpers",
+  "private": true,
+  "types": "../esm/lib/helpers/helpers.d.ts",
+  "main": "../cjs/lib/helpers/helpers.js",
+  "module": "../esm/lib/helpers/helpers.js"
+}