armtek-uikit-react 1.0.2 → 1.0.4

package/lib/cjs/Avatar/AvatarGroup.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _AvatarGroupModule = _interopRequireDefault(require("./AvatarGroup.module.scss"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _jsxRuntime = require("react/jsx-runtime");
+const AvatarGroup = props => {
+  let arrChildren = _react.Children.toArray(props.children);
+  let visiblePart = arrChildren.slice(0, props.limit || 3);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _clsx.default)(_AvatarGroupModule.default.avatarGroup, _AvatarGroupModule.default['avatarGroup_' + props.size]),
+      children: [visiblePart.length < arrChildren.length && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _clsx.default)(_AvatarGroupModule.default.avatarGroup__item, _AvatarGroupModule.default.avatarGroup__remains, _AvatarGroupModule.default['avatarGroup__remains_' + props.size]),
+        children: ["+", arrChildren.length - visiblePart.length]
+      }), visiblePart.map((item, index) => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: _AvatarGroupModule.default.avatarGroup__item,
+          children: /*#__PURE__*/(0, _react.isValidElement)(item) && /*#__PURE__*/(0, _react.cloneElement)(item, {
+            ...item.props,
+            size: props.size,
+            key: index
+          })
+        }, index);
+      })]
+    })
+  });
+};
+var _default = AvatarGroup;
+exports.default = _default;
+module.exports = exports.default;

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

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _BadgeModule = _interopRequireDefault(require("./Badge.module.scss"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _jsxRuntime = require("react/jsx-runtime");
+function Badge(props) {
+  let {
+    color,
+    shape,
+    position
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      className: _BadgeModule.default.badge,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: _BadgeModule.default.badge__content,
+        children: props.children
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _clsx.default)(_BadgeModule.default.badge__item, _BadgeModule.default['badge__item_' + color], _BadgeModule.default['badge__item_' + shape], _BadgeModule.default['badge__item_' + position], {
+          [_BadgeModule.default.badge__item_content]: !!props.badgeText && !shape,
+          [_BadgeModule.default.badge__item_content_circle]: !!props.badgeText && shape === 'circle',
+          [_BadgeModule.default.badge__item_content_square]: !!props.badgeText && shape === 'square'
+        }),
+        children: props.badgeText
+      })]
+    })
+  });
+}
+var _default = Badge;
+exports.default = _default;
+module.exports = exports.default;

package/lib/cjs/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/cjs/Button/Button.css

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

package/lib/cjs/{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/cjs/{ui/Button → Button}/Button.js

@@ -6,7 +6,6 @@ exports.default = void 0;
 var _ButtonModule = _interopRequireDefault(require("./Button.module.scss"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _jsxRuntime = require("react/jsx-runtime");
-_interopRequireDefault(require("./style.css"))
 const Button = props => {
   let {
     size = 'extraLarge',
@@ -24,16 +23,16 @@ const Button = props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, {
       ...restProps,
-      className: (0, _clsx.default)('button', 'button_' + size, 'button_' + variant, 'button_' + color, className, {
-        ['button_grouped_' + group]: group
+      className: (0, _clsx.default)(_ButtonModule.default.button, _ButtonModule.default['button_' + size], _ButtonModule.default['button_' + variant], _ButtonModule.default['button_' + color], className, {
+        [_ButtonModule.default['button_grouped_' + group]]: group
       }),
       children: [startAdornment && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _clsx.default)('button__adornment', 'button__adornment_start'),
+        className: (0, _clsx.default)(_ButtonModule.default.button__adornment, _ButtonModule.default.button__adornment_start),
         children: startAdornment
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         children: children
       }), endAdornment && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _clsx.default)('button__adornment', 'button__adornment_end'),
+        className: (0, _clsx.default)(_ButtonModule.default.button__adornment, _ButtonModule.default.button__adornment_end),
         children: endAdornment
       })]
     })

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

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

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

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _CardModule = _interopRequireDefault(require("./Card.module.scss"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _jsxRuntime = require("react/jsx-runtime");
+const Card = props => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ...props,
+      className: (0, _clsx.default)(_CardModule.default.card, props.className)
+    })
+  });
+};
+var _default = Card;
+exports.default = _default;
+module.exports = exports.default;

package/lib/cjs/Card/Card.module.scss

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

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

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _ChipModule = _interopRequireDefault(require("./Chip.module.scss"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _jsxRuntime = require("react/jsx-runtime");
+function Chip(props) {
+  let {
+    size,
+    text,
+    icon,
+    onClose,
+    as,
+    variant,
+    color,
+    children
+  } = props;
+  let Component = as || 'span';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+      className: (0, _clsx.default)(_ChipModule.default.chip, _ChipModule.default['chip_' + size], _ChipModule.default['chip_' + variant], _ChipModule.default['chip_' + color]),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        className: _ChipModule.default.chip__inner,
+        children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _clsx.default)('material_icon', _ChipModule.default.chip__icon, _ChipModule.default['chip__icon_' + size]),
+          children: icon
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: text || children
+        }), onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _clsx.default)('material_icon_solid', _ChipModule.default['chip__close_' + size], _ChipModule.default['chip__close_' + color], _ChipModule.default.chip__close),
+          children: "cancel"
+        })]
+      })
+    })
+  });
+}
+var _default = Chip;
+exports.default = _default;
+module.exports = exports.default;

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

package/lib/cjs/Form/Checkbox/Checkbox.js

@@ -0,0 +1,53 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _CheckboxModule = _interopRequireDefault(require("./Checkbox.module.scss"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+const Checkbox = props => {
+  let {
+    label,
+    intermediate,
+    color = 'primary',
+    size = 'large',
+    variant = 'outlined',
+    onChange,
+    className,
+    ...inputProps
+  } = props;
+  let [checked, setChecked] = (0, _react.useState)(!!props.defaultChecked);
+  const handleClick = e => {
+    if (!inputProps.disabled) {
+      if (inputProps.checked === undefined) setChecked(prev => !prev);
+      if (onChange) onChange(e);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _clsx.default)(_CheckboxModule.default.checkbox, className),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        className: _CheckboxModule.default.checkbox__input,
+        ...inputProps,
+        type: props.type || 'checkbox'
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+        onClick: handleClick,
+        className: (0, _clsx.default)(_CheckboxModule.default.checkbox__label, _CheckboxModule.default['checkbox_' + size], _CheckboxModule.default['checkbox_' + variant], _CheckboxModule.default['checkbox_' + color], {
+          [_CheckboxModule.default.checkbox__label_checked]: inputProps.checked !== undefined ? inputProps.checked : checked,
+          [_CheckboxModule.default.checkbox__label_intermediate]: !!intermediate,
+          [_CheckboxModule.default.checkbox__label_disabled]: !!inputProps.disabled
+        }),
+        children: label && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: _CheckboxModule.default.checkbox__text,
+          children: label
+        })
+      })]
+    })
+  });
+};
+var _default = Checkbox;
+exports.default = _default;
+module.exports = exports.default;