armtek-uikit-react 1.0.2 → 1.0.3

package/lib/Adornment/package.json

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

package/lib/Alert/package.json

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

package/lib/Avatar/package.json

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

package/lib/AvatarGroup/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/AvatarGroup",
+  "private": true,
+  "main": "..\\cjs\\AvatarGroup\\AvatarGroup.js",
+  "module": "..\\esm\\AvatarGroup\\AvatarGroup.js"
+}

package/lib/Badge/package.json

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

package/lib/Button/package.json

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

package/lib/ButtonGroup/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/ButtonGroup",
+  "private": true,
+  "main": "..\\cjs\\ButtonGroup\\ButtonGroup.js",
+  "module": "..\\esm\\ButtonGroup\\ButtonGroup.js"
+}

package/lib/ButtonIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/ButtonIcon",
+  "private": true,
+  "main": "..\\cjs\\ButtonIcon\\ButtonIcon.js",
+  "module": "..\\esm\\ButtonIcon\\ButtonIcon.js"
+}

package/lib/Card/package.json

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

package/lib/Checkbox/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/Checkbox",
+  "private": true,
+  "main": "..\\cjs\\Checkbox\\Checkbox.js",
+  "module": "..\\esm\\Checkbox\\Checkbox.js"
+}

package/lib/Chip/package.json

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

package/lib/DateField/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/DateField",
+  "private": true,
+  "main": "..\\cjs\\DateField\\DateField.js",
+  "module": "..\\esm\\DateField\\DateField.js"
+}

package/lib/DatePicker/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/DatePicker",
+  "private": true,
+  "main": "..\\cjs\\DatePicker\\DatePicker.js",
+  "module": "..\\esm\\DatePicker\\DatePicker.js"
+}

package/lib/DateService/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/DateService",
+  "private": true,
+  "main": "..\\cjs\\DateService\\DateService.js",
+  "module": "..\\esm\\DateService\\DateService.js"
+}

package/lib/HelperText/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/HelperText",
+  "private": true,
+  "main": "..\\cjs\\HelperText\\HelperText.js",
+  "module": "..\\esm\\HelperText\\HelperText.js"
+}

package/lib/Interval/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/Interval",
+  "private": true,
+  "main": "..\\cjs\\Interval\\Interval.js",
+  "module": "..\\esm\\Interval\\Interval.js"
+}

package/lib/IntervalSlide/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/IntervalSlide",
+  "private": true,
+  "main": "..\\cjs\\IntervalSlide\\IntervalSlide.js",
+  "module": "..\\esm\\IntervalSlide\\IntervalSlide.js"
+}

package/lib/ListItem/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/ListItem",
+  "private": true,
+  "main": "..\\cjs\\ListItem\\ListItem.js",
+  "module": "..\\esm\\ListItem\\ListItem.js"
+}

package/lib/Loader/package.json

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

package/lib/Logo/package.json

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

package/lib/Password/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/Password",
+  "private": true,
+  "main": "..\\cjs\\Password\\Password.js",
+  "module": "..\\esm\\Password\\Password.js"
+}

package/lib/Period/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/Period",
+  "private": true,
+  "main": "..\\cjs\\Period\\Period.js",
+  "module": "..\\esm\\Period\\Period.js"
+}

package/lib/PeriodSelect/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/PeriodSelect",
+  "private": true,
+  "main": "..\\cjs\\PeriodSelect\\PeriodSelect.js",
+  "module": "..\\esm\\PeriodSelect\\PeriodSelect.js"
+}

package/lib/Radio/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/Radio",
+  "private": true,
+  "main": "..\\cjs\\Radio\\Radio.js",
+  "module": "..\\esm\\Radio\\Radio.js"
+}

package/lib/Rating/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/Rating",
+  "private": true,
+  "main": "..\\cjs\\Rating\\Rating.js",
+  "module": "..\\esm\\Rating\\Rating.js"
+}

package/lib/RcSlider/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/RcSlider",
+  "private": true,
+  "main": "..\\cjs\\RcSlider\\RcSlider.js",
+  "module": "..\\esm\\RcSlider\\RcSlider.js"
+}

package/lib/Select/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/Select",
+  "private": true,
+  "main": "..\\cjs\\Select\\Select.js",
+  "module": "..\\esm\\Select\\Select.js"
+}

package/lib/Slider/package.json

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

package/lib/Status/package.json

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

package/lib/StepItem/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/StepItem",
+  "private": true,
+  "main": "..\\cjs\\StepItem\\StepItem.js",
+  "module": "..\\esm\\StepItem\\StepItem.js"
+}

package/lib/StepItemIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/StepItemIcon",
+  "private": true,
+  "main": "..\\cjs\\StepItemIcon\\StepItemIcon.js",
+  "module": "..\\esm\\StepItemIcon\\StepItemIcon.js"
+}

package/lib/Stepper/package.json

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

package/lib/Switch/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/Switch",
+  "private": true,
+  "main": "..\\cjs\\Switch\\Switch.js",
+  "module": "..\\esm\\Switch\\Switch.js"
+}

package/lib/TextArea/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/TextArea",
+  "private": true,
+  "main": "..\\cjs\\TextArea\\TextArea.js",
+  "module": "..\\esm\\TextArea\\TextArea.js"
+}

package/lib/TextField/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/TextField",
+  "private": true,
+  "main": "..\\cjs\\TextField\\TextField.js",
+  "module": "..\\esm\\TextField\\TextField.js"
+}

package/lib/TimeField/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/TimeField",
+  "private": true,
+  "main": "..\\cjs\\TimeField\\TimeField.js",
+  "module": "..\\esm\\TimeField\\TimeField.js"
+}

package/lib/TimePicker/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "armtek-uikit-react/TimePicker",
+  "private": true,
+  "main": "..\\cjs\\TimePicker\\TimePicker.js",
+  "module": "..\\esm\\TimePicker\\TimePicker.js"
+}

package/lib/Tooltip/package.json

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

package/lib/cjs/Adornment/Adornment.d.ts

@@ -0,0 +1,7 @@
+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/lib/cjs/Adornment/Adornment.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = exports.AdornmentContainer = void 0;
+var _clsx = _interopRequireDefault(require("clsx"));
+var _jsxRuntime = require("react/jsx-runtime");
+// import css from './Adornment.module.scss'
+
+const Adornment = props => {
+  let {
+    children,
+    position = 'end',
+    className,
+    ...spanProps
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ...spanProps,
+      className: (0, _clsx.default)(className, {
+        'adornment_start': position === 'start',
+        'adornment_end': position !== 'start'
+      }),
+      children: children
+    })
+  });
+};
+const AdornmentContainer = props => {
+  let {
+    position = 'start',
+    className,
+    children,
+    ...inputProps
+  } = 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),
+      children: children
+    })
+  });
+};
+exports.AdornmentContainer = AdornmentContainer;
+var _default = Adornment;
+exports.default = _default;

package/lib/cjs/Adornment/Adornment.module.scss

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

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

@@ -0,0 +1,46 @@
+"use strict";
+
+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 _jsxRuntime = require("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__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ...restProps,
+      className: (0, _clsx.default)(_AlertModule.default.alert, _AlertModule.default['alert_' + status], className),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _clsx.default)(_AlertModule.default.alert__icon, 'material_icon'),
+        children: icon
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _AlertModule.default.alert__title,
+        children: props.title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: props.children
+      }), !!onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonIcon.default, {
+        onClick: onClose,
+        size: 'small',
+        color: 'neutral',
+        variant: 'transparent',
+        className: (0, _clsx.default)(_AlertModule.default.alert__close, 'material_icon'),
+        children: "close"
+      })]
+    })
+  });
+};
+var _default = Alert;
+exports.default = _default;
+module.exports = exports.default;

package/lib/cjs/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/cjs/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/cjs/Avatar/Avatar.js

@@ -0,0 +1,50 @@
+"use strict";
+
+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 _jsxRuntime = require("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__*/(0, _jsxRuntime.jsx)("img", {
+    src: props.photo,
+    className: _AvatarModule.default.avatar__img,
+    alt: props.name,
+    title: props.name
+  }) : props.name ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: _AvatarModule.default.avatar__name,
+    children: getLetters(props.name)
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: (0, _clsx.default)(_AvatarModule.default.avatar__icon, 'material_icon_solid'),
+    children: icon
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _clsx.default)(_AvatarModule.default.avatar, _AvatarModule.default['avatar_' + props.size]),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _AvatarModule.default.avatar__inner,
+        children: props.href ? /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+          href: props.href,
+          ...props.linkProps,
+          className: _AvatarModule.default.avatar__inner,
+          children: content
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: _AvatarModule.default.avatar__inner,
+          children: content
+        })
+      }), props.status && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _clsx.default)(_AvatarModule.default.avatar__status, _AvatarModule.default['avatar__status_' + props.status])
+      })]
+    })
+  });
+};
+var _default = Avatar;
+exports.default = _default;
+module.exports = exports.default;

package/lib/cjs/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/cjs/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;