armtek-uikit-react 1.0.2 → 1.0.3

package/lib/esm/Status/Status.module.scss

@@ -0,0 +1,45 @@
+@import "../assets/styles";
+
+.status{
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 8px 1px;
+  border-radius: 4px;
+}
+.status_primary{
+  background: rgba($color-primary-dark, 0.2);
+  color: $color-primary-dark;
+}
+.status_secondary{
+  background: rgba($color-secondary-dark, 0.2);
+  color: $color-secondary-dark;
+}
+.status_neutral{
+  background: rgba(#4D5359, 0.2);
+  color: rgba(#212529, 0.7);
+}
+.status_error{
+  background: rgba($color-error-dark, 0.2);
+  color: $color-error-dark;
+}
+.status_warning{
+  background: rgba(#FFC61A, 0.2);
+  color: $color-secondary-dark;
+}
+.status_info{
+  background: rgba(#0D46FF, 0.2);
+  color: $color-primary-dark;
+}
+.status_success{
+  background: rgba(#0BD998, 0.2);
+  color: $color-success-dark;
+}
+.status__content{
+  font-size: 14px;
+  line-height: 1;
+}
+.status__icon{
+  margin-left: 4px;
+  font-size: 14px;
+  line-height: 1.5;
+}

package/lib/esm/Stepper/StepItem.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { StepItemIconProps } from './StepItemIcon';
+import { ButtonProps } from '../Button/Button';
+export type StepItemProps = {
+    title: string;
+    children?: ReactNode | string;
+    content?: ReactNode | string;
+    button?: string;
+    buttonProps?: ButtonProps;
+    last?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+} & StepItemIconProps;
+declare const StepItem: (props: StepItemProps) => import("react/jsx-runtime").JSX.Element;
+export default StepItem;

package/lib/esm/Stepper/StepItem.js

@@ -0,0 +1,51 @@
+import StepItemIcon from './StepItemIcon';
+import css from './StepItem.module.scss';
+import clsx from 'clsx';
+import Button from '../Button/Button';
+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 StepItem = props => {
+  let {
+    title,
+    children,
+    content,
+    button,
+    buttonProps,
+    last,
+    orientation = 'horizontal',
+    ...iconProps
+  } = props;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: clsx(css.stepItem, css['stepItem_' + props.size], {
+        [css.stepItem_last]: last,
+        [css.stepItem_horizontal]: orientation === 'horizontal'
+      }),
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: css.stepItem__inner,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: css.stepItem__icon,
+          children: /*#__PURE__*/_jsx(StepItemIcon, {
+            ...iconProps
+          })
+        }), !!title && /*#__PURE__*/_jsx("p", {
+          className: clsx(css.stepItem__title, {
+            [css.stepItem__title_error]: iconProps.error
+          }),
+          children: title
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: css.stepItem__content,
+        children: [content || children, !!button && /*#__PURE__*/_jsx("div", {
+          className: css.stepItem__button,
+          children: /*#__PURE__*/_jsx(Button, {
+            ...buttonProps,
+            children: button
+          })
+        })]
+      })]
+    })
+  });
+};
+export default StepItem;

package/lib/esm/Stepper/StepItem.module.scss

@@ -0,0 +1,67 @@
+@import "../assets/styles";
+
+.stepItem__inner{
+  @include flex(flex-start, flex-start)
+}
+
+.stepItem__title{
+  font-weight: 700;
+  margin: 2px 0 0 $size-step;
+  position: relative;
+  background: #fff;
+  padding-right: 5px;
+}
+.stepItem__title_error{
+  color: $color-error-dark
+}
+
+.stepItem__content{
+  padding-left: 23px;
+  border-left: 1px solid #B1BCC6;
+  margin-left: 11px;
+  margin-top:5px;
+  position: relative;
+}
+.stepItem__button{
+  margin-top: $size-step;
+}
+
+
+.stepItem_small{
+  & .stepItem__content,
+  & .stepItem__title{
+    font-size: 14px;
+  }
+  & .stepItem__content{
+    padding-left: 19px;
+    margin-left: 10px;
+  }
+  &.stepItem_horizontal{
+    & .stepItem__content:before{
+      top: -15px;
+    }
+  }
+}
+.stepItem_last{
+  & .stepItem__content{
+    border-color:transparent;
+    &:before{
+      display: none;
+    }
+  }
+}
+.stepItem_horizontal{
+  & .stepItem__content{
+    border-color:transparent;
+  }
+  & .stepItem__content:before{
+    content: '';
+    position: absolute;
+    top: -19px;
+    width: 100%;
+    left: 22px;
+    height: 1px;
+    background: #B1BCC6;
+    z-index: -1;
+  }
+}

package/lib/esm/Stepper/StepItemIcon.d.ts

@@ -0,0 +1,11 @@
+import { SizeType } from '../shared/types/theme';
+export type StepItemIconProps = {
+    number?: string | number;
+    size?: Exclude<SizeType, 'extraLarge' | 'medium'>;
+    active?: boolean;
+    error?: boolean;
+    complete?: boolean;
+    icon?: string;
+};
+declare const StepItemIcon: (props: StepItemIconProps) => import("react/jsx-runtime").JSX.Element;
+export default StepItemIcon;

package/lib/esm/Stepper/StepItemIcon.js

@@ -0,0 +1,34 @@
+import css from './StepItemIcon.module.scss';
+import clsx from 'clsx';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const StepItemIcon = props => {
+  let icon = '';
+  if (!props.number) {
+    if (props.active) icon = 'schedule';else if (props.complete) icon = 'done';
+  }
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx("div", {
+      className: clsx(css.stepItemIcon, css['stepItemIcon_' + props.size], {
+        [css.stepItemIcon_active]: props.active,
+        [css.stepItemIcon_error]: props.error,
+        [css.stepItemIcon_complete]: props.complete,
+        [css.stepItemIcon_icon]: !props.icon
+      }),
+      children: /*#__PURE__*/_jsx("span", {
+        className: css.stepItemIcon__inner,
+        children: !props.error ? !props.number ? /*#__PURE__*/_jsx("span", {
+          className: 'material_icon_solid',
+          children: icon
+        }) : /*#__PURE__*/_jsx("span", {
+          className: css.stepItemIcon__number,
+          children: props.number
+        }) : /*#__PURE__*/_jsx("span", {
+          className: 'material_icon_solid',
+          children: "warning"
+        })
+      })
+    })
+  });
+};
+export default StepItemIcon;

package/lib/esm/Stepper/StepItemIcon.module.scss

@@ -0,0 +1,47 @@
+@import "../assets/styles";
+
+.stepItemIcon{
+  @include flex(center);
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 1px solid;
+  & .stepItemIcon__number{
+    font-size: 16px;
+  }
+  &_small{
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    & .stepItemIcon__number{
+      font-size: 14px;
+    }
+  }
+  border-color: $color-primary;
+  color: $color-primary;
+}
+
+.stepItemIcon__inner{
+  font-size: 0;
+}
+
+.stepItemIcon_active{
+  color: #fff;
+  background: $color-primary;
+  &.stepItemIcon_icon{
+    background: transparent;
+    color: $color-primary;
+    border: none;
+  }
+}
+.stepItemIcon_complete{
+  color: #fff;
+  background: $color-success;
+  border-color: $color-success;
+}
+.stepItemIcon_error{
+  color: $color-error-dark !important;
+  background: transparent;
+  border-color: transparent;
+}

package/lib/esm/Stepper/Stepper.d.ts

@@ -0,0 +1,11 @@
+import { StepItemProps } from './StepItem';
+export type StepperProps = {
+    steps: Array<StepItemProps | string | number>;
+    active?: number;
+    error?: number;
+    complete?: number;
+    orientation?: 'vertical' | 'horizontal';
+    size?: StepItemProps['size'];
+};
+declare const Stepper: (props: StepperProps) => import("react/jsx-runtime").JSX.Element;
+export default Stepper;

package/lib/esm/Stepper/Stepper.js

@@ -0,0 +1,40 @@
+import StepItem from './StepItem';
+import css from './Stepper.module.scss';
+import clsx from 'clsx';
+import { Fragment } from 'react';
+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 Stepper = props => {
+  var _props$steps;
+  let {
+    orientation = 'horizontal'
+  } = props;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx("div", {
+      className: clsx(css.stepper, css['stepper_' + props.size], {
+        [css.stepper_horizontal]: orientation === 'horizontal'
+      }),
+      children: (_props$steps = props.steps) == null ? void 0 : _props$steps.map((item, index) => {
+        var _props$steps2;
+        let title = typeof item === 'string' || typeof item === 'number' ? String(item) : item.title;
+        let params = typeof item === 'string' || typeof item === 'number' ? {} : item;
+        return /*#__PURE__*/_jsxs(Fragment, {
+          children: [/*#__PURE__*/_jsx(StepItem, {
+            error: index + 1 === props.error,
+            active: index + 1 === props.active,
+            complete: index + 1 === props.complete || index + 1 < (props.active || 0),
+            ...params,
+            title: title,
+            last: index + 1 === ((_props$steps2 = props.steps) == null ? void 0 : _props$steps2.length),
+            orientation: orientation,
+            size: props.size
+          }), index + 1 < props.steps.length && /*#__PURE__*/_jsx("div", {
+            className: css.stepper__connector
+          })]
+        }, index);
+      })
+    })
+  });
+};
+export default Stepper;

package/lib/esm/Stepper/Stepper.module.scss

@@ -0,0 +1,34 @@
+@import "../assets/styles";
+
+.stepper{
+
+}
+.stepper_horizontal{
+  display: flex;
+}
+.stepper__connector{
+  padding-left: 23px;
+  border-left: 1px solid #B1BCC6;
+  margin-left: 11px;
+  height: 25px;
+  margin-bottom: 5px;
+}
+.stepper_small{
+  & .stepper__connector{
+    padding-left: 19px;
+    margin-left: 10px;
+  }
+}
+.stepper_horizontal{
+  & .stepper__connector{
+    height: 1px;
+    width: auto;
+    margin-right: 5px;
+    margin-bottom: 0;
+    padding-left: 0;
+    border-left:none;
+    border-top: 1px solid #B1BCC6;
+    flex: 1 1 0;
+    margin-top:10px;
+  }
+}

package/lib/esm/Tooltip/Tooltip.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export type TooltipProps = {
+    text: string;
+    children: ReactNode;
+};
+declare function Tooltip(props: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export default Tooltip;

package/lib/esm/Tooltip/Tooltip.js

@@ -0,0 +1,28 @@
+"use client";
+
+import css from './Tooltip.module.scss';
+import { useState } from 'react';
+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 Tooltip(props) {
+  let {
+    text,
+    children
+  } = props;
+  let [visible, setVisible] = useState(false);
+  const handleEnter = () => setVisible(true);
+  const handleLeave = () => setVisible(false);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("span", {
+      className: css.tooltip,
+      onMouseEnter: handleEnter,
+      onMouseLeave: handleLeave,
+      children: [children, visible && /*#__PURE__*/_jsx("span", {
+        className: css.tooltip__item,
+        children: text
+      })]
+    })
+  });
+}
+export default Tooltip;

package/lib/esm/Tooltip/Tooltip.module.scss

@@ -0,0 +1,18 @@
+@import "../assets/styles";
+
+.tooltip{
+  display: inline-block;
+  position: relative;
+}
+.tooltip__item{
+  position: absolute;
+  padding: $size-step;
+  border-radius: $radius;
+  background: $color-gray-700;
+  color: #fff;
+  font-weight: 500;
+  font-size: 12px;
+  left: 50%;
+  bottom: 100%;
+  transform: translateX(-50%);
+}

package/lib/esm/Typography/HelperText/HelperText.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+type PropsType = {
+    error?: boolean;
+} & HTMLAttributes<HTMLSpanElement>;
+declare const HelperText: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
+export default HelperText;

package/lib/esm/Typography/HelperText/HelperText.js

@@ -0,0 +1,22 @@
+import css from './HelperText.module.scss';
+import clsx from 'clsx';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const HelperText = props => {
+  let {
+    className,
+    error,
+    children,
+    ...restProps
+  } = props;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx("span", {
+      ...restProps,
+      className: clsx(css.helperText, {
+        [css.helperText_error]: !!error
+      }, className),
+      children: children
+    })
+  });
+};
+export default HelperText;

package/lib/esm/Typography/HelperText/HelperText.module.scss

@@ -0,0 +1,10 @@
+@import "../../assets/styles";
+
+.helperText{
+  color: $color-gray-600;
+  font-size: 12px;
+  display: block;
+}
+.helperText_error{
+  color: $color-error-dark;
+}

package/lib/esm/assets/fonts.scss

@@ -1,20 +1,2 @@
 
 
-.material_icon {
-  font-family: 'Material Symbols Outlined';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-  &_solid {
-    font-weight: 700;
-  }
-}

package/lib/esm/assets/global.css

@@ -33,3 +33,39 @@ body{
     src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v134/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1p-p_4MrImHCIJIZrDBIG-ej.woff2) format('woff2');
 }
 
+.text_error{
+    color: #CC2935;
+}
+.text_success{
+    color: #0BD998;
+}
+.material_icon {
+    font-family: 'Material Symbols Outlined';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+}
+.material_icon_solid{
+    font-family: 'Material Symbols Outlined';
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+    font-weight: 700;
+}

package/lib/esm/assets/styles.scss

@@ -1,7 +1,6 @@
 //@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 "fonts.scss";
 
 $font-family: 'Roboto';
 
@@ -105,15 +104,6 @@ $box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.1);
 // }
 
 
-.text_error{
-  color: $color-error-dark;
-}
-
-.text_success{
-  color: $color-success;
-}
-
-
 .adornmentContainer{
   display: flex;
 }

package/lib/esm/index.d.ts

@@ -1,29 +1,29 @@
-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 Alert } from './ui/Alert/Alert';
-export type { AlertProps } from './ui/Alert/Alert';
-export { default as Avatar } from './ui/Avatar/Avatar';
-export type { AvatarProps } from './ui/Avatar/Avatar';
-export { default as AvatarGroup } from './ui/Avatar/AvatarGroup';
-export type { AvatarGroupProps } from './ui/Avatar/AvatarGroup';
-export { default as Badge } from './ui/Badge/Badge';
-export type { BadgeProps } from './ui/Badge/Badge';
-export { default as Card } from './ui/Card/Card';
-export type { CardProps } from './ui/Card/Card';
-export { default as Chip } from './ui/Chip/Chip';
-export type { ChipProps } from './ui/Chip/Chip';
-export { default as ListItem } from './ui/List/ListItem';
-export type { ListItemProps } from './ui/List/ListItem';
-export { default as Loader } from './ui/Loader/Loader';
-export type { LoaderProps } from './ui/Loader/Loader';
-export { default as Logo } from './ui/Logo/Logo';
-export type { LogoProps } from './ui/Logo/Logo';
-export { default as Slider } from './ui/Slider/Slider';
-export type { SliderProps } from './ui/Slider/Slider';
-export { default as Status } from './ui/Status/Status';
-export type { StatusProps } from './ui/Status/Status';
-export { default as Stepper } from './ui/Stepper/Stepper';
-export type { StepperProps } from './ui/Stepper/Stepper';
-export { default as Tooltip } from './ui/Tooltip/Tooltip';
-export type { TooltipProps } from './ui/Tooltip/Tooltip';
+export { default as Button } from './Button/Button';
+export { default as ButtonIcon } from './Button/ButtonIcon';
+export type { ButtonProps } from './Button/Button';
+export { default as Alert } from './Alert/Alert';
+export type { AlertProps } from './Alert/Alert';
+export { default as Avatar } from './Avatar/Avatar';
+export type { AvatarProps } from './Avatar/Avatar';
+export { default as AvatarGroup } from './Avatar/AvatarGroup';
+export type { AvatarGroupProps } from './Avatar/AvatarGroup';
+export { default as Badge } from './Badge/Badge';
+export type { BadgeProps } from './Badge/Badge';
+export { default as Card } from './Card/Card';
+export type { CardProps } from './Card/Card';
+export { default as Chip } from './Chip/Chip';
+export type { ChipProps } from './Chip/Chip';
+export { default as ListItem } from './List/ListItem';
+export type { ListItemProps } from './List/ListItem';
+export { default as Loader } from './Loader/Loader';
+export type { LoaderProps } from './Loader/Loader';
+export { default as Logo } from './Logo/Logo';
+export type { LogoProps } from './Logo/Logo';
+export { default as Slider } from './Slider/Slider';
+export type { SliderProps } from './Slider/Slider';
+export { default as Status } from './Status/Status';
+export type { StatusProps } from './Status/Status';
+export { default as Stepper } from './Stepper/Stepper';
+export type { StepperProps } from './Stepper/Stepper';
+export { default as Tooltip } from './Tooltip/Tooltip';
+export type { TooltipProps } from './Tooltip/Tooltip';

package/lib/esm/index.js

@@ -1 +1,15 @@
-export { default as Button } from './ui/Button/Button';
+export { default as Button } from './Button/Button';
+export { default as ButtonIcon } from './Button/ButtonIcon';
+export { default as Alert } from './Alert/Alert';
+export { default as Avatar } from './Avatar/Avatar';
+export { default as AvatarGroup } from './Avatar/AvatarGroup';
+export { default as Badge } from './Badge/Badge';
+export { default as Card } from './Card/Card';
+export { default as Chip } from './Chip/Chip';
+export { default as ListItem } from './List/ListItem';
+export { default as Loader } from './Loader/Loader';
+export { default as Logo } from './Logo/Logo';
+export { default as Slider } from './Slider/Slider';
+export { default as Status } from './Status/Status';
+export { default as Stepper } from './Stepper/Stepper';
+export { default as Tooltip } from './Tooltip/Tooltip';

package/lib/helpers/package.json

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

package/lib/theme/package.json

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

package/lib/useClickOutside/package.json

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