armtek-uikit-react 1.0.2 → 1.0.3

package/lib/cjs/Form/Switch/Switch.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _SwitchModule = _interopRequireDefault(require("./Switch.module.scss"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _jsxRuntime = require("react/jsx-runtime");
+const Switch = props => {
+  let {
+    onChange,
+    size,
+    ...restProps
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+      className: (0, _clsx.default)(_SwitchModule.default.switch, _SwitchModule.default['switch_' + props.size]),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        className: _SwitchModule.default.switch__input,
+        ...restProps,
+        type: "checkbox"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: _SwitchModule.default.switch__slider
+      })]
+    })
+  });
+};
+var _default = Switch;
+exports.default = _default;
+module.exports = exports.default;

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

@@ -0,0 +1,46 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _TextField = _interopRequireDefault(require("../TextField/TextField"));
+var _react = require("react");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _TextAreaModule = _interopRequireDefault(require("./TextArea.module.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
+const TextArea = props => {
+  var _textareaRef$current, _textareaRef$current2;
+  let {
+    onChange,
+    className,
+    ...restProps
+  } = props;
+  let [value, setValue] = (0, _react.useState)('');
+  let [minHeight, setMinHeight] = (0, _react.useState)(0);
+  let textareaRef = (0, _react.useRef)();
+  const handleChange = e => {
+    setValue(e.target.value);
+    if (onChange) onChange(e);
+  };
+  (0, _react.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__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+      ref: textareaRef,
+      value: value,
+      ...restProps,
+      className: (0, _clsx.default)(_TextAreaModule.default.textarea, _TextAreaModule.default['size_' + restProps.size], className),
+      onChange: handleChange,
+      multiline: true,
+      style: {
+        height: textHeight + 'px'
+      }
+    })
+  });
+};
+var _default = TextArea;
+exports.default = _default;
+module.exports = exports.default;

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

@@ -0,0 +1,152 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = exports.TextFieldInput = exports.TextFieldContainer = void 0;
+var _react = require("react");
+var _TextFieldModule = _interopRequireDefault(require("./TextField.module.scss"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _HelperText = _interopRequireDefault(require("../../Typography/HelperText/HelperText"));
+var _jsxRuntime = require("react/jsx-runtime");
+const TextField = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  let {
+    error,
+    success,
+    label,
+    helperText,
+    size = 'large',
+    variant = 'solid',
+    endAdornment,
+    className,
+    multiline = false,
+    ...inputProps
+  } = props;
+  let [value, setValue] = (0, _react.useState)('');
+  let [focused, setFocused] = (0, _react.useState)(false);
+  const inputRef = (0, _react.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__*/(0, _jsxRuntime.jsxs)("div", {
+    className: _TextFieldModule.default.textfield__adornment,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _TextFieldModule.default.textfield__icon,
+      children: endAdornment
+    }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _clsx.default)('material_icon', 'text_error', _TextFieldModule.default.textfield__icon),
+      children: "error_outline"
+    }), success && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _clsx.default)('material_icon', 'text_success', _TextFieldModule.default.textfield__icon),
+      children: "done"
+    })]
+  });
+  let endContentExists = endAdornment || error || success;
+  let Component = multiline ? 'textarea' : 'input';
+  let realRef = ref || inputRef;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_HelperText.default, {
+      className: _TextFieldModule.default.textfield__helperText,
+      error: error,
+      children: helperText
+    })]
+  });
+});
+const TextFieldContainer = props => {
+  let {
+    focused,
+    disabled,
+    variant,
+    size,
+    className,
+    children,
+    error,
+    ...restProps
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ...restProps,
+      className: (0, _clsx.default)(_TextFieldModule.default.textfield, _TextFieldModule.default['textfield_' + variant], _TextFieldModule.default['size_' + size], {
+        [_TextFieldModule.default._focused]: focused,
+        [_TextFieldModule.default._disabled]: disabled,
+        [_TextFieldModule.default._error]: error
+      }, className),
+      children: children
+    })
+  });
+};
+exports.TextFieldContainer = TextFieldContainer;
+const TextFieldInput = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  let {
+    Component = 'input',
+    size,
+    variant,
+    multiline,
+    error,
+    focused,
+    label,
+    value,
+    className,
+    ...inputProps
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _clsx.default)(_TextFieldModule.default.textfield__container, _TextFieldModule.default['size_' + size], {
+        [_TextFieldModule.default._label]: !!label,
+        [_TextFieldModule.default.textfield__container_outlined]: variant === 'outlined'
+      }),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+        ref: ref,
+        value: value,
+        ...inputProps,
+        className: (0, _clsx.default)(_TextFieldModule.default.textfield__input, _TextFieldModule.default['size_' + size], _TextFieldModule.default['textfield__input_' + variant], {
+          [_TextFieldModule.default._label]: !!label,
+          [_TextFieldModule.default._focused]: focused,
+          [_TextFieldModule.default._error]: !!error,
+          [_TextFieldModule.default.textarea]: multiline
+        }, className)
+      }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _clsx.default)(_TextFieldModule.default.textfield__label, {
+          [_TextFieldModule.default.textfield__label_focused]: focused || !!value || !!props.value,
+          [_TextFieldModule.default.textfield__label_small]: size === 'small',
+          [_TextFieldModule.default.textfield__label_error]: error
+        }),
+        children: label
+      })]
+    })
+  });
+});
+exports.TextFieldInput = TextFieldInput;
+var _default = TextField;
+exports.default = _default;

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

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _ListItemModule = _interopRequireDefault(require("./ListItem.module.scss"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Checkbox = _interopRequireDefault(require("../Form/Checkbox/Checkbox"));
+var _Adornment = _interopRequireWildcard(require("../Adornment/Adornment"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const ListItem = props => {
+  let {
+    children,
+    className,
+    active,
+    divider,
+    checked,
+    startAdornment,
+    endAdornment,
+    ...restProps
+  } = props;
+  let withStartAdornment = checked !== undefined || !!startAdornment;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+      ...restProps,
+      className: (0, _clsx.default)(_ListItemModule.default.listitem, className, {
+        [_ListItemModule.default.listitem_active]: !!active || !!checked,
+        [_ListItemModule.default.listitem_divider]: !!divider,
+        [_ListItemModule.default.listitem_endAdornment]: !!endAdornment,
+        [_ListItemModule.default.listitem_startAdornment]: withStartAdornment
+      }),
+      children: [withStartAdornment && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Adornment.AdornmentContainer, {
+        children: [checked !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Adornment.default, {
+          position: 'start',
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+            checked: checked,
+            size: 'small'
+          })
+        }), !!startAdornment && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Adornment.default, {
+          position: 'start',
+          children: startAdornment
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: _ListItemModule.default.listitemText,
+        children: children
+      }), !!endAdornment && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Adornment.AdornmentContainer, {
+        position: 'end',
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Adornment.default, {
+          position: 'end',
+          children: endAdornment
+        })
+      })]
+    })
+  });
+};
+var _default = ListItem;
+exports.default = _default;
+module.exports = exports.default;

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