armtek-uikit-react 1.0.13 → 1.0.15

package/esm/assets/variables.scss

@@ -1,67 +0,0 @@
-
-
-$font-family: 'Roboto';
-
-
-$size-elarge: 56px;
-$size-large: 42px;
-$size-medium: 36px;
-$size-small: 30px;
-$size-step: 8px;
-
-$radius: 4px;
-
-$color-primary: #0D46FF;
-$color-primary-dark: #0B3CD9;
-$color-primary-light: #0B3CD9;
-$color-blue-800: #406DFF;
-$color-blue-A100: #D9E2FF;
-$color-blue-50: #F2F5FF;
-
-$color-info: #0D46FF;
-$color-info-dark: #0B3CD9;
-
-$color-secondary: #FF7F00;
-$color-secondary-dark: #D96C00;
-$color-secondary-light: #FFA140;
-$color-orange-800: #FF9426;
-$color-orange-400: #FFC68C;
-$color-orange-300: #FFD3A6;
-$color-orange-100: #FFE6CC;
-$color-orange-50: #FFF8F0;
-
-$color-neutral: #4D5359;
-$color-neutral-dark: #40454A;
-$color-neutral-light: #9AA4AE;
-$color-gray-900: #212529;
-$color-gray-800: #40454A;
-$color-gray-700: #4D5359;
-$color-gray-600: #6C757D;
-$color-gray-500: #9AA4AE;
-$color-gray-400: #B1BCC6;
-$color-gray-300: #D3DAE1;
-$color-gray-200: #DFE2E6;
-$color-gray-100: #E9ECEF;
-$color-gray-50: #F8F9FA;
-
-$color-greent-50: #F2FFFB;
-
-$color-success: #0BD998;
-$color-success-dark: #08996B;
-$color-error: #FF3342;
-$color-error-dark: #CC2935;
-$color-warning: #FFC61A;
-$color-warning-dark: #F7B519;
-
-$color-red-50: #FFF0F1;
-
-$box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.1);
-
-@mixin transition($time: 0.5s, $target: all, $animation: ease) {
-  transition: $time $target $animation;
-}
-@mixin flex($justifyContent: flex-start, $alignItems: center) {
-  display: flex;
-  align-items: $alignItems;
-  justify-content: $justifyContent;
-}

package/esm/index.js

@@ -1,15 +0,0 @@
-export { default as Button } from './ui/Button/Button';
-export { default as ButtonIcon } from './ui/Button/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/const/styles.d.ts

@@ -1 +0,0 @@
-export declare const CSS_PREFIX = "Armtek-";

package/esm/lib/hooks/useClickOutside.d.ts

@@ -1,3 +0,0 @@
-import { MutableRefObject } from 'react';
-declare const useClickOutside: (callback: () => void) => MutableRefObject<any>;
-export default useClickOutside;

package/esm/lib/services/DateService.d.ts

@@ -1,12 +0,0 @@
-declare class DateClass {
-    date: Date;
-    constructor(date: Date);
-    format(form: string): string;
-    static isValid(dateStr: string, format?: string): boolean;
-    static parseDate(dateStr: string, format?: string): Date | null;
-    static toDate(dateStr: string): Date | null;
-    static getDisplayValue(value: number): string;
-    private getStrMonth;
-}
-export declare const DateService: (date: Date) => DateClass;
-export default DateClass;

package/esm/types/theme.d.ts

@@ -1,10 +0,0 @@
-export type ShapeType = 'square' | 'circle';
-export type SizeType = 'small' | 'medium' | 'large' | 'extraLarge';
-export type VariantType = 'contained' | 'outlined' | 'transparent';
-export type ColorStatusType = 'success' | 'error' | 'warning' | 'info';
-export type ColorThemeType = 'black' | 'white';
-export type ColorType = 'primary' | 'secondary' | 'neutral';
-export type OptionType = {
-    text: string;
-    value?: string;
-};

package/esm/ui/Adornment/Adornment.d.ts

@@ -1,7 +0,0 @@
-import { HTMLAttributes } from 'react';
-type PropsType = {
-    position?: 'start' | 'end';
-} & HTMLAttributes<HTMLDivElement>;
-declare const Adornment: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
-export declare const AdornmentContainer: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
-export default Adornment;

package/esm/ui/Adornment/Adornment.module.scss

@@ -1,18 +0,0 @@
-@import "../../assets/styles";
-
-.adornmentContainer{
-  display: flex;
-}
-.adornmentContainer_end{
-  margin-left: auto;
-}
-.adornment_end{
-  & + * {
-    margin-left: $size-step;
-  }
-}
-.adornment_start{
-  & + * {
-    margin-left: $size-step;
-  }
-}

package/esm/ui/Alert/Alert.d.ts

@@ -1,10 +0,0 @@
-import { ColorStatusType } from '../../types/theme';
-import { HTMLAttributes, ReactNode } from 'react';
-export type AlertProps = {
-    status: ColorStatusType;
-    title: string;
-    children: ReactNode | string;
-    onClose?: () => void;
-} & HTMLAttributes<HTMLDivElement>;
-declare const Alert: (props: AlertProps) => import("react/jsx-runtime").JSX.Element;
-export default Alert;

package/esm/ui/Avatar/Avatar.d.ts

@@ -1,13 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { ColorStatusType, SizeType } from '../../types/theme';
-export type AvatarProps = {
-    photo?: string;
-    name?: string;
-    href?: string;
-    linkProps?: HTMLAttributes<HTMLAnchorElement>;
-    icon?: string;
-    size?: Exclude<SizeType, 'extraLarge'>;
-    status?: Exclude<ColorStatusType, 'info'>;
-};
-declare const Avatar: (props: AvatarProps) => import("react/jsx-runtime").JSX.Element;
-export default Avatar;

package/esm/ui/Avatar/AvatarGroup.d.ts

@@ -1,8 +0,0 @@
-import { ReactNode } from 'react';
-import { AvatarProps } from './Avatar';
-export type AvatarGroupProps = {
-    limit?: number;
-    children: ReactNode;
-} & Pick<AvatarProps, 'size'>;
-declare const AvatarGroup: (props: AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;
-export default AvatarGroup;

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

@@ -1,48 +0,0 @@
-@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;
-  }
-}

package/esm/ui/Badge/Badge.d.ts

@@ -1,11 +0,0 @@
-import { ColorStatusType, ColorType, ShapeType } from '../../types/theme';
-import { ReactNode } from 'react';
-export type BadgeProps = {
-    color?: ColorType | ColorStatusType;
-    children: ReactNode | string;
-    shape?: ShapeType;
-    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
-    badgeText?: string;
-};
-declare function Badge(props: BadgeProps): import("react/jsx-runtime").JSX.Element;
-export default Badge;

package/esm/ui/Badge/Badge.module.scss

@@ -1,83 +0,0 @@
-@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;
-}

package/esm/ui/Button/Button.css

@@ -1,3 +0,0 @@
-.button{
-  background: red;
-}

package/esm/ui/Button/Button.d.ts

@@ -1,15 +0,0 @@
-import { ComponentPropsWithoutRef, ElementType, HTMLAttributes, ReactNode } from 'react';
-import { ColorThemeType, ColorType, SizeType, VariantType } from 'types/theme';
-type OwnProps<T extends ElementType = ElementType> = {
-    children: ReactNode;
-    size?: SizeType;
-    color?: ColorType | Exclude<ColorThemeType, 'white'>;
-    variant?: VariantType;
-    startAdornment?: string | ReactNode;
-    endAdornment?: string | ReactNode;
-    group?: 'inline' | 'column';
-    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;

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

@@ -1,298 +0,0 @@
-@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/esm/ui/Button/ButtonClasses.d.ts

@@ -1,3 +0,0 @@
-declare const ButtonClassesClean: string[];
-declare const ButtonClasses: Record<string, string>;
-export { ButtonClasses, ButtonClassesClean };

package/esm/ui/Button/ButtonClasses.js

@@ -1,7 +0,0 @@
-import { CSS_PREFIX } from 'lib/const/styles';
-const ButtonClassesClean = ['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 ButtonClasses = ButtonClassesClean.reduce((prev, current) => {
-  prev[current] = CSS_PREFIX + current;
-  return prev;
-}, {});
-export { ButtonClasses, ButtonClassesClean };

package/esm/ui/Button/ButtonGroup.d.ts

@@ -1,6 +0,0 @@
-import { HTMLAttributes } from 'react';
-type PropsType = {
-    orientation?: 'column' | 'inline';
-} & HTMLAttributes<HTMLDivElement>;
-declare const ButtonGroup: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
-export default ButtonGroup;

package/esm/ui/Card/Card.d.ts

@@ -1,4 +0,0 @@
-import { HTMLAttributes } from 'react';
-export type CardProps = HTMLAttributes<HTMLDivElement>;
-declare const Card: (props: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
-export default Card;

package/esm/ui/Card/Card.module.scss

@@ -1,7 +0,0 @@
-@import "../../assets/styles";
-
-.card{
-  padding: $size-step;
-  box-shadow: $box-shadow;
-  border-radius: $radius;
-}

package/esm/ui/Chip/Chip.d.ts

@@ -1,13 +0,0 @@
-import { ComponentPropsWithoutRef, ElementType, HTMLAttributes } from 'react';
-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;
-    text?: string;
-    onClose?: () => void;
-    icon?: string;
-    variant?: Exclude<VariantType, 'transparent'>;
-    as?: T;
-};
-declare function Chip<T extends ElementType>(props: ChipProps<T>): import("react/jsx-runtime").JSX.Element;
-export default Chip;