armtek-uikit-react 1.0.2 → 1.0.4

package/lib/esm/Alert/Alert.d.ts

@@ -0,0 +1,10 @@
+import { ColorStatusType } from '../shared/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/lib/esm/Alert/Alert.js

@@ -0,0 +1,41 @@
+import css from './Alert.module.scss';
+import clsx from 'clsx';
+import ButtonIcon from '../Button/ButtonIcon';
+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 Alert = props => {
+  let {
+    title,
+    children,
+    status = 'info',
+    onClose,
+    className,
+    ...restProps
+  } = props;
+  let icon = 'info';
+  if (status === 'error') icon = 'bolt';else if (status === 'warning') icon = 'warning';else if (status === 'success') icon = 'task_alt';
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("div", {
+      ...restProps,
+      className: clsx(css.alert, css['alert_' + status], className),
+      children: [/*#__PURE__*/_jsx("span", {
+        className: clsx(css.alert__icon, 'material_icon'),
+        children: icon
+      }), /*#__PURE__*/_jsx("div", {
+        className: css.alert__title,
+        children: props.title
+      }), /*#__PURE__*/_jsx("div", {
+        children: props.children
+      }), !!onClose && /*#__PURE__*/_jsx(ButtonIcon, {
+        onClick: onClose,
+        size: 'small',
+        color: 'neutral',
+        variant: 'transparent',
+        className: clsx(css.alert__close, 'material_icon'),
+        children: "close"
+      })]
+    })
+  });
+};
+export default Alert;

package/lib/esm/Alert/Alert.module.scss

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

package/lib/esm/Avatar/Avatar.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'react';
+import { ColorStatusType, SizeType } from '../shared/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/lib/esm/Avatar/Avatar.js

@@ -0,0 +1,45 @@
+import css from './Avatar.module.scss';
+import clsx from 'clsx';
+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 getLetters = name => {
+  let nameParts = name.split(' ');
+  return nameParts[0].split('')[0] + (nameParts[1] ? nameParts[1].split('')[0] : '');
+};
+const Avatar = props => {
+  let icon = props.icon;
+  if (!props.icon && !props.name && !props.photo) icon = 'person';
+  let content = props.photo ? /*#__PURE__*/_jsx("img", {
+    src: props.photo,
+    className: css.avatar__img,
+    alt: props.name,
+    title: props.name
+  }) : props.name ? /*#__PURE__*/_jsx("span", {
+    className: css.avatar__name,
+    children: getLetters(props.name)
+  }) : /*#__PURE__*/_jsx("span", {
+    className: clsx(css.avatar__icon, 'material_icon_solid'),
+    children: icon
+  });
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: clsx(css.avatar, css['avatar_' + props.size]),
+      children: [/*#__PURE__*/_jsx("div", {
+        className: css.avatar__inner,
+        children: props.href ? /*#__PURE__*/_jsx("a", {
+          href: props.href,
+          ...props.linkProps,
+          className: css.avatar__inner,
+          children: content
+        }) : /*#__PURE__*/_jsx("span", {
+          className: css.avatar__inner,
+          children: content
+        })
+      }), props.status && /*#__PURE__*/_jsx("span", {
+        className: clsx(css.avatar__status, css['avatar__status_' + props.status])
+      })]
+    })
+  });
+};
+export default Avatar;

package/lib/esm/Avatar/Avatar.module.scss

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

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

@@ -0,0 +1,8 @@
+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/lib/esm/Avatar/AvatarGroup.js

@@ -0,0 +1,29 @@
+import { Children, cloneElement, isValidElement } from 'react';
+import css from './AvatarGroup.module.scss';
+import clsx from 'clsx';
+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 AvatarGroup = props => {
+  let arrChildren = Children.toArray(props.children);
+  let visiblePart = arrChildren.slice(0, props.limit || 3);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: clsx(css.avatarGroup, css['avatarGroup_' + props.size]),
+      children: [visiblePart.length < arrChildren.length && /*#__PURE__*/_jsxs("div", {
+        className: clsx(css.avatarGroup__item, css.avatarGroup__remains, css['avatarGroup__remains_' + props.size]),
+        children: ["+", arrChildren.length - visiblePart.length]
+      }), visiblePart.map((item, index) => {
+        return /*#__PURE__*/_jsx("div", {
+          className: css.avatarGroup__item,
+          children: /*#__PURE__*/isValidElement(item) && /*#__PURE__*/cloneElement(item, {
+            ...item.props,
+            size: props.size,
+            key: index
+          })
+        }, index);
+      })]
+    })
+  });
+};
+export default AvatarGroup;

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

@@ -0,0 +1,48 @@
+@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/lib/esm/Badge/Badge.d.ts

@@ -0,0 +1,11 @@
+import { ColorStatusType, ColorType, ShapeType } from '../shared/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/lib/esm/Badge/Badge.js

@@ -0,0 +1,29 @@
+import css from './Badge.module.scss';
+import clsx from 'clsx';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function Badge(props) {
+  let {
+    color,
+    shape,
+    position
+  } = props;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("span", {
+      className: css.badge,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: css.badge__content,
+        children: props.children
+      }), /*#__PURE__*/_jsx("span", {
+        className: clsx(css.badge__item, css['badge__item_' + color], css['badge__item_' + shape], css['badge__item_' + position], {
+          [css.badge__item_content]: !!props.badgeText && !shape,
+          [css.badge__item_content_circle]: !!props.badgeText && shape === 'circle',
+          [css.badge__item_content_square]: !!props.badgeText && shape === 'square'
+        }),
+        children: props.badgeText
+      })]
+    })
+  });
+}
+export default Badge;

package/lib/esm/Badge/Badge.module.scss

@@ -0,0 +1,83 @@
+@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/lib/esm/Button/Button.css

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

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

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

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

@@ -1,4 +1,4 @@
-import './style.css'
+import css from './Button.module.scss';
 import clsx from 'clsx';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -20,16 +20,16 @@ const Button = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs(Component, {
       ...restProps,
-      className: clsx('button', 'button_' + size, 'button_' + variant, 'button_' + color, className, {
-        ['button_grouped_' + group]: group
+      className: clsx(css.button, css['button_' + size], css['button_' + variant], css['button_' + color], className, {
+        [css['button_grouped_' + group]]: group
       }),
       children: [startAdornment && /*#__PURE__*/_jsx("div", {
-        className: clsx('button__adornment', 'button__adornment_start'),
+        className: clsx(css.button__adornment, css.button__adornment_start),
         children: startAdornment
       }), /*#__PURE__*/_jsx("div", {
         children: children
       }), endAdornment && /*#__PURE__*/_jsx("div", {
-        className: clsx('button__adornment', 'button__adornment_end'),
+        className: clsx(css.button__adornment, css.button__adornment_end),
         children: endAdornment
       })]
     })

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

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

package/lib/esm/Card/Card.d.ts

@@ -0,0 +1,4 @@
+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/lib/esm/Card/Card.js

@@ -0,0 +1,13 @@
+import css from './Card.module.scss';
+import clsx from 'clsx';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const Card = props => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx("div", {
+      ...props,
+      className: clsx(css.card, props.className)
+    })
+  });
+};
+export default Card;

package/lib/esm/Card/Card.module.scss

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

package/lib/esm/Chip/Chip.d.ts

@@ -0,0 +1,13 @@
+import { ComponentPropsWithoutRef, ElementType, HTMLAttributes } from 'react';
+import { ColorType, SizeType, VariantType } from '../shared/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;

package/lib/esm/Chip/Chip.js

@@ -0,0 +1,36 @@
+import css from './Chip.module.scss';
+import clsx from 'clsx';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function Chip(props) {
+  let {
+    size,
+    text,
+    icon,
+    onClose,
+    as,
+    variant,
+    color,
+    children
+  } = props;
+  let Component = as || 'span';
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(Component, {
+      className: clsx(css.chip, css['chip_' + size], css['chip_' + variant], css['chip_' + color]),
+      children: /*#__PURE__*/_jsxs("span", {
+        className: css.chip__inner,
+        children: [icon && /*#__PURE__*/_jsx("span", {
+          className: clsx('material_icon', css.chip__icon, css['chip__icon_' + size]),
+          children: icon
+        }), /*#__PURE__*/_jsx("span", {
+          children: text || children
+        }), onClose && /*#__PURE__*/_jsx("span", {
+          className: clsx('material_icon_solid', css['chip__close_' + size], css['chip__close_' + color], css.chip__close),
+          children: "cancel"
+        })]
+      })
+    })
+  });
+}
+export default Chip;

package/lib/esm/Chip/Chip.module.scss

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

package/lib/esm/Form/Checkbox/Checkbox.d.ts

@@ -0,0 +1,12 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { ColorType, SizeType, VariantType } from '../../shared/types/theme';
+type BaseCheckboxPropsType = {
+    label?: string | ReactNode;
+    size?: Exclude<SizeType, 'extraLarge'>;
+    color?: ColorType;
+    variant?: Exclude<VariantType, 'transparent'>;
+    intermediate?: boolean;
+};
+export type CheckboxPropsType = BaseCheckboxPropsType & Omit<InputHTMLAttributes<any>, 'size'>;
+declare const Checkbox: (props: CheckboxPropsType) => import("react/jsx-runtime").JSX.Element;
+export default Checkbox;