armtek-uikit-react 1.0.2 → 1.0.3

package/lib/esm/Form/Switch/Switch.module.scss

@@ -0,0 +1,69 @@
+@import "../../assets/styles";
+
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 34px;
+  height: 14px;
+}
+
+
+.switch__input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.switch__slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: $color-neutral-light;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 7px;
+}
+
+.switch__slider:before {
+  position: absolute;
+  content: "";
+  height: 20px;
+  width: 20px;
+  left: -3px;
+  bottom: -3px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 50%;
+  box-shadow: $box-shadow;
+}
+
+.switch__input:checked + .switch__slider {
+  background-color: $color-orange-400;
+}
+
+.switch__input:checked + .switch__slider:before {
+  -webkit-transform: translateX(22px);
+  -ms-transform: translateX(22px);
+  transform: translateX(22px);
+  background: $color-secondary;
+}
+
+.switch_small{
+  width: 26px;
+  height: 10px;
+  & .switch__slider:before{
+    width: 16px;
+    height: 16px;
+  }
+  & .switch__input:checked + .switch__slider:before {
+    -webkit-transform: translateX(20px);
+    -ms-transform: translateX(20px);
+    transform: translateX(18px);
+  }
+}

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

@@ -0,0 +1,4 @@
+import { TextFieldProps } from '../TextField/TextField';
+export type TextAreaProps = {} & TextFieldProps;
+declare const TextArea: (props: TextAreaProps) => import("react/jsx-runtime").JSX.Element;
+export default TextArea;

package/lib/esm/Form/TextArea/TextArea.js

@@ -0,0 +1,41 @@
+"use client";
+
+import TextField from '../TextField/TextField';
+import { useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import css from './TextArea.module.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const TextArea = props => {
+  var _textareaRef$current, _textareaRef$current2;
+  let {
+    onChange,
+    className,
+    ...restProps
+  } = props;
+  let [value, setValue] = useState('');
+  let [minHeight, setMinHeight] = useState(0);
+  let textareaRef = useRef();
+  const handleChange = e => {
+    setValue(e.target.value);
+    if (onChange) onChange(e);
+  };
+  useEffect(() => {
+    if (textareaRef.current) setMinHeight(textareaRef.current.clientHeight);
+  }, [textareaRef]);
+  let textHeight = (((_textareaRef$current = textareaRef.current) == null ? void 0 : _textareaRef$current.scrollHeight) || 0) < minHeight ? minHeight : (_textareaRef$current2 = textareaRef.current) == null ? void 0 : _textareaRef$current2.scrollHeight;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(TextField, {
+      ref: textareaRef,
+      value: value,
+      ...restProps,
+      className: clsx(css.textarea, css['size_' + restProps.size], className),
+      onChange: handleChange,
+      multiline: true,
+      style: {
+        height: textHeight + 'px'
+      }
+    })
+  });
+};
+export default TextArea;

package/lib/esm/Form/TextArea/TextArea.module.scss

@@ -0,0 +1,15 @@
+@import "../../assets/styles";
+
+.textarea{
+  font-family: $font-family;
+  height: auto;
+  min-height: $size-elarge;
+  &.size_small{
+    height: auto;
+    min-height: $size-large;
+  }
+  & textarea{
+    resize: none;
+    appearance: none;
+  }
+}

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

@@ -0,0 +1,40 @@
+import { ElementType, HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
+import { SizeType, VariantType } from '../../shared/types/theme';
+export type TextFieldProps = {
+    label?: string;
+    size?: Exclude<SizeType, 'extraLarge' | 'medium'>;
+    variant?: VariantType;
+    error?: boolean;
+    success?: boolean;
+    helperText?: string;
+    endAdornment?: string | ReactNode;
+    multiline?: boolean;
+} & Omit<InputHTMLAttributes<any>, 'size'>;
+declare const TextField: import("react").ForwardRefExoticComponent<{
+    label?: string | undefined;
+    size?: "small" | "large" | undefined;
+    variant?: VariantType | undefined;
+    error?: boolean | undefined;
+    success?: boolean | undefined;
+    helperText?: string | undefined;
+    endAdornment?: string | ReactNode;
+    multiline?: boolean | undefined;
+} & Omit<InputHTMLAttributes<any>, "size"> & import("react").RefAttributes<unknown>>;
+type ContainerPropsType = {
+    focused?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    size?: TextFieldProps['size'];
+    variant?: TextFieldProps['variant'];
+} & HTMLAttributes<HTMLDivElement>;
+export declare const TextFieldContainer: (props: ContainerPropsType) => import("react/jsx-runtime").JSX.Element;
+export declare const TextFieldInput: import("react").ForwardRefExoticComponent<{
+    Component?: ElementType | undefined;
+    focused?: boolean | undefined;
+    size?: TextFieldProps['size'];
+    variant?: TextFieldProps['variant'];
+    multiline?: boolean | undefined;
+    error?: boolean | undefined;
+    label?: string | undefined;
+} & Omit<InputHTMLAttributes<any>, "size"> & import("react").RefAttributes<unknown>>;
+export default TextField;

package/lib/esm/Form/TextField/TextField.js

@@ -0,0 +1,147 @@
+"use client";
+
+import { forwardRef, useRef, useState } from 'react';
+import css from './TextField.module.scss';
+import clsx from 'clsx';
+import HelperText from '../../Typography/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";
+const TextField = /*#__PURE__*/forwardRef((props, ref) => {
+  let {
+    error,
+    success,
+    label,
+    helperText,
+    size = 'large',
+    variant = 'solid',
+    endAdornment,
+    className,
+    multiline = false,
+    ...inputProps
+  } = props;
+  let [value, setValue] = useState('');
+  let [focused, setFocused] = useState(false);
+  const inputRef = useRef();
+  const handleFocus = e => {
+    setFocused(true);
+    if (inputProps.onFocus) inputProps.onFocus(e);
+  };
+  const handleBlur = e => {
+    setFocused(false);
+    if (inputProps.onBlur) inputProps.onBlur(e);
+  };
+  let endContent = /*#__PURE__*/_jsxs("div", {
+    className: css.textfield__adornment,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: css.textfield__icon,
+      children: endAdornment
+    }), error && /*#__PURE__*/_jsx("div", {
+      className: clsx('material_icon', 'text_error', css.textfield__icon),
+      children: "error_outline"
+    }), success && /*#__PURE__*/_jsx("div", {
+      className: clsx('material_icon', 'text_success', css.textfield__icon),
+      children: "done"
+    })]
+  });
+  let endContentExists = endAdornment || error || success;
+  let Component = multiline ? 'textarea' : 'input';
+  let realRef = ref || inputRef;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(TextFieldContainer, {
+      size: size,
+      variant: variant,
+      disabled: inputProps.disabled,
+      focused: focused,
+      onClick: () => {
+        var _realRef$current;
+        return (_realRef$current = realRef.current) == null ? void 0 : _realRef$current.focus();
+      },
+      className: className,
+      error: error,
+      children: [/*#__PURE__*/_jsx(TextFieldInput, {
+        Component: Component,
+        ref: realRef,
+        value: value,
+        onChange: e => setValue(e.target.value),
+        size: size,
+        variant: variant,
+        label: label,
+        focused: focused,
+        error: error,
+        multiline: multiline,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        ...inputProps
+      }), endContentExists && endContent]
+    }), helperText && /*#__PURE__*/_jsx(HelperText, {
+      className: css.textfield__helperText,
+      error: error,
+      children: helperText
+    })]
+  });
+});
+export const TextFieldContainer = props => {
+  let {
+    focused,
+    disabled,
+    variant,
+    size,
+    className,
+    children,
+    error,
+    ...restProps
+  } = props;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx("div", {
+      ...restProps,
+      className: clsx(css.textfield, css['textfield_' + variant], css['size_' + size], {
+        [css._focused]: focused,
+        [css._disabled]: disabled,
+        [css._error]: error
+      }, className),
+      children: children
+    })
+  });
+};
+export const TextFieldInput = /*#__PURE__*/forwardRef((props, ref) => {
+  let {
+    Component = 'input',
+    size,
+    variant,
+    multiline,
+    error,
+    focused,
+    label,
+    value,
+    className,
+    ...inputProps
+  } = props;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: clsx(css.textfield__container, css['size_' + size], {
+        [css._label]: !!label,
+        [css.textfield__container_outlined]: variant === 'outlined'
+      }),
+      children: [/*#__PURE__*/_jsx(Component, {
+        ref: ref,
+        value: value,
+        ...inputProps,
+        className: clsx(css.textfield__input, css['size_' + size], css['textfield__input_' + variant], {
+          [css._label]: !!label,
+          [css._focused]: focused,
+          [css._error]: !!error,
+          [css.textarea]: multiline
+        }, className)
+      }), label && /*#__PURE__*/_jsx("span", {
+        className: clsx(css.textfield__label, {
+          [css.textfield__label_focused]: focused || !!value || !!props.value,
+          [css.textfield__label_small]: size === 'small',
+          [css.textfield__label_error]: error
+        }),
+        children: label
+      })]
+    })
+  });
+});
+export default TextField;

package/lib/esm/Form/TextField/TextField.module.scss

@@ -0,0 +1,160 @@
+@import "../../assets/styles";
+
+.textfield{
+  position: relative;
+  overflow: hidden;
+  border-radius: $radius;
+  border: 1px solid $color-gray-400;
+  background-color: #fff;
+  height: $size-elarge;
+  @include flex();
+  &:hover{
+    border-color: $color-gray-600;
+  }
+  &._focused{
+    border-color: $color-gray-800;
+  }
+  &._disabled{
+    pointer-events: none;
+    background: $color-gray-100;
+    border-color: transparent;
+    & .textfield__label{
+      color: $color-gray-600;
+    }
+  }
+  &.size_small{
+    height: $size-large;
+    font-size: 14px;
+  }
+  &_outlined{
+    border-top:none;
+    border-left: none;
+    border-right: none;
+    border-radius: 0;
+  }
+}
+.textfield__container{
+  cursor: text;
+  position: relative;
+  padding: 11px 12px 8px;
+  width: 100%;
+  &._label{
+    padding: 25px 12px 8px;
+  }
+  &.size_small{
+    &._label{
+      padding: 18px 12px 4px
+    }
+  }
+}
+.textfield__container_outlined{
+  padding-left: 0 !important;
+  & .textfield__label{
+    padding-left: 0;
+  }
+}
+.textfield__input{
+  display: block;
+  width: 100%;
+  font-size: 16px;
+  outline: none;
+  background: transparent;
+  border: none;
+  padding: 0;
+  height: 23px;
+  &:focus{
+    border-color: $color-gray-800;
+  }
+  &.size_small{
+    font-size: 14px;
+    height: 20px;
+  }
+  &._label::placeholder{
+    opacity: 0;
+  }
+}
+._error{
+  border-color: $color-error-dark;
+}
+
+.textfield__label_small{
+  font-size: 14px;
+}
+.textfield__label{
+  pointer-events: none;
+  color: $color-gray-600;
+  position: absolute;
+  top: 12px;
+  padding-left: 12px;
+  left: 1px;
+  font-size: 16px;
+  transition: 0.2s all ease;
+  width: calc(100% - 2px);
+  padding-top:8px;
+  &_small{
+    top: 4px;
+  }
+  &_focused{
+    font-size: 12px;
+    transform: none;
+    top: 1px;
+    &.textfield__label_small{
+      padding-top:4px
+    }
+  }
+}
+
+.textfield__input_outlined{
+  border-left:none;
+  border-top:none;
+  border-right: none;
+  padding-left: 0 !important;
+  &:focus,
+  &:hover{
+    border-left:none;
+    border-top:none;
+    border-right: none;
+  }
+  border-radius: 0;
+  & + .textfield__label{
+    left:0;
+  }
+  &:disabled{
+    border-bottom-color: $color-gray-400;
+    border-bottom-style: dotted;
+    background: transparent;
+    & + .textfield__label{
+      color: $color-gray-400;
+    }
+  }
+}
+
+.textfield__label_error{
+  color: $color-error-dark;
+}
+.textfield__adornment{
+  @include flex();
+  position: relative;
+  z-index: 5;
+  height: 100%;
+  padding-right: 10px;
+  & > *{
+    margin-left: $size-step;
+  }
+}
+.textfield__helperText{
+  margin-top: calc($size-step / 2);
+}
+._disabled{
+  & + .textfield__helperText{
+    color: $color-gray-600;
+  }
+  & .textfield_outlined{
+    & .textfield__helperText{
+      color: $color-gray-400;
+    }
+  }
+  & .textfield__icon{
+    color: $color-gray-400;
+  }
+}

package/lib/esm/List/ListItem.d.ts

@@ -0,0 +1,10 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export type ListItemProps = {
+    active?: boolean;
+    checked?: boolean;
+    divider?: boolean;
+    endAdornment?: string | ReactNode;
+    startAdornment?: string | ReactNode;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+declare const ListItem: (props: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+export default ListItem;

package/lib/esm/List/ListItem.js

@@ -0,0 +1,53 @@
+import css from './ListItem.module.scss';
+import clsx from 'clsx';
+import Checkbox from '../Form/Checkbox/Checkbox';
+import Adornment, { AdornmentContainer } from '../Adornment/Adornment';
+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 ListItem = props => {
+  let {
+    children,
+    className,
+    active,
+    divider,
+    checked,
+    startAdornment,
+    endAdornment,
+    ...restProps
+  } = props;
+  let withStartAdornment = checked !== undefined || !!startAdornment;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("button", {
+      ...restProps,
+      className: clsx(css.listitem, className, {
+        [css.listitem_active]: !!active || !!checked,
+        [css.listitem_divider]: !!divider,
+        [css.listitem_endAdornment]: !!endAdornment,
+        [css.listitem_startAdornment]: withStartAdornment
+      }),
+      children: [withStartAdornment && /*#__PURE__*/_jsxs(AdornmentContainer, {
+        children: [checked !== undefined && /*#__PURE__*/_jsx(Adornment, {
+          position: 'start',
+          children: /*#__PURE__*/_jsx(Checkbox, {
+            checked: checked,
+            size: 'small'
+          })
+        }), !!startAdornment && /*#__PURE__*/_jsx(Adornment, {
+          position: 'start',
+          children: startAdornment
+        })]
+      }), /*#__PURE__*/_jsx("span", {
+        className: css.listitemText,
+        children: children
+      }), !!endAdornment && /*#__PURE__*/_jsx(AdornmentContainer, {
+        position: 'end',
+        children: /*#__PURE__*/_jsx(Adornment, {
+          position: 'end',
+          children: endAdornment
+        })
+      })]
+    })
+  });
+};
+export default ListItem;

package/lib/esm/List/ListItem.module.scss

@@ -0,0 +1,34 @@
+@import "../assets/styles";
+
+.listitem{
+  outline: none;
+  padding: calc($size-step * 1.5) calc($size-step * 2);
+  color: $color-neutral;
+  background: transparent;
+  @include transition(0.3s, background);
+  @include flex();
+  width: 100%;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  &:hover{
+    background: $color-gray-50;
+  }
+  &.listitem_active,
+  &:active{
+    background: rgba($color-primary, 0.1);
+  }
+}
+.listitem_startAdornment{
+
+}
+.listitem_endAdornment{
+
+}
+.listitem_divider{
+  border-bottom: 1px solid $color-gray-200;
+}
+.listitemText{
+  display: block;
+  margin: 0 calc($size-step * 2);
+}

package/lib/esm/Loader/Loader.d.ts

@@ -0,0 +1,6 @@
+import { SizeType } from '../shared/types/theme';
+export type LoaderProps = {
+    size?: SizeType;
+};
+declare const Loader: (props: LoaderProps) => import("react/jsx-runtime").JSX.Element;
+export default Loader;