armtek-uikit-react 1.0.67 → 1.0.69

package/assets/Button.scss

@@ -47,7 +47,7 @@
       background: $color-blue-800;
     }
     &:disabled{
-      background: $color-primary-light;
+      background: $color-blue-400;
     }
   }
   &.button_secondary {

package/assets/Link.scss

@@ -0,0 +1,36 @@
+@import "./../assets/variables";
+
+.link{
+  transition: 0.2s all ease;
+  cursor: pointer;
+  display: inline;
+  color: var(--color-primary);
+  outline: none;
+  background-color: transparent;
+  padding: 0;
+  font-size: 16px;
+  font-family: inherit;
+}
+.link_disabled{
+  opacity: 0.7;
+  pointer-events: none;
+}
+.link_border{
+  border-color: inherit;
+  border-top:0;
+  border-left: 0;
+  border-right: 0;
+  border-bottom-width: 1px;
+  &:hover{
+    border-color: transparent;
+  }
+}
+.link_border_solid{
+  border-style: solid;
+}
+.link_border_dashed{
+  border-style: dashed;
+}
+.link_border_dotted{
+  border-style: dotted;
+}

package/assets/Stack.scss

@@ -0,0 +1,29 @@
+@import "./../assets/variables";
+
+.stack{
+  display: flex;
+}
+.stack_spacing_small{
+  margin: 0 calc(var(--size-step) / 2 * -1)
+}
+.stack_spacing_medium{
+  margin: 0 calc(var(--size-step) / 2 * -2)
+}
+.stack_spacing_large{
+  margin: 0 calc(var(--size-step) / 2 * -3)
+}
+.stack_spacing_extraLarge{
+  margin: 0 calc(var(--size-step) / 2 * -4)
+}
+.stackItem_spacing_small{
+  margin: 0 calc(var(--size-step) / 2 * 1)
+}
+.stackItem_spacing_medium{
+  margin: 0 calc(var(--size-step) / 2 * 2)
+}
+.stackItem_spacing_large{
+  margin: 0 calc(var(--size-step) / 2 * 3)
+}
+.stackItem_spacing_extraLarge{
+  margin: 0 calc(var(--size-step) / 2 * 4)
+}

package/assets/global.css

@@ -97,6 +97,106 @@ body{
     --box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.1);
 }
 
+.flex{display: flex}
+.items-center {align-items: center}
+.flex-wrap {flex-wrap: wrap}
+.justify-center {justify-content: center}
+
+.color-primary{color: var(--color-primary)}
+.color-primary-dark{color: var(--color-primary-dark)}
+.color-primary-light{color: var(--color-primary-light)}
+.color-blue-800{color: var(--color-blue-800)}
+.color-blue-A100{color: var(--color-blue-A100)}
+.color-blue-50{color: var(--color-blue-50)}
+.color-info{color: var(--color-info)}
+.color-info-dark{color: var(--color-info-dark)}
+.color-secondary{color: var(--color-secondary)}
+.color-secondary-dark{color: var(--color-secondary-dark)}
+.color-secondary-light{color: var(--color-secondary-light)}
+.color-orange-800{color: var(--color-orange-800)}
+.color-orange-400{color: var(--color-orange-400)}
+.color-orange-300{color: var(--color-orange-300)}
+.color-orange-100{color: var(--color-orange-100)}
+.color-orange-50{color: var(--color-orange-50)}
+.color-neutral{color: var(--color-neutral)}
+.color-neutral-dark{color: var(--color-neutral-dark)}
+.color-neutral-light{color: var(--color-neutral-light)}
+.color-gray-900{color: var(--color-gray-900)}
+.color-gray-800{color: var(--color-gray-800)}
+.color-gray-700{color: var(--color-gray-700)}
+.color-gray-600{color: var(--color-gray-600)}
+.color-gray-500{color: var(--color-gray-500)}
+.color-gray-400{color: var(--color-gray-400)}
+.color-gray-300{color: var(--color-gray-300)}
+.color-gray-200{color: var(--color-gray-200)}
+.color-gray-100{color: var(--color-gray-100)}
+.color-gray-50{color: var(--color-gray-50)}
+.color-green-50{color: var(--color-green-50)}
+.color-success{color: var(--color-success)}
+.color-success-dark{color: var(--color-success-dark)}
+.color-error{color: var(--color-error)}
+.color-error-dark{color: var(--color-error-dark)}
+.color-warning{color: var(--color-warning)}
+.color-warning-dark{color: var(--color-warning-dark)}
+.color-red-50{color: var(--color-red-50)}
+
+.mt-1{margin-top:var(--size-step)}
+.mt-2{margin-top:calc(var(--size-step) * 2)}
+.mt-3{margin-top:calc(var(--size-step) * 3)}
+.mt-4{margin-top:calc(var(--size-step) * 4)}
+.mt-5{margin-top:calc(var(--size-step) * 5)}
+.mt-6{margin-top:calc(var(--size-step) * 6)}
+
+.mb-1{margin-bottom:var(--size-step)}
+.mb-2{margin-bottom:calc(var(--size-step) * 2)}
+.mb-3{margin-bottom:calc(var(--size-step) * 3)}
+.mb-4{margin-bottom:calc(var(--size-step) * 4)}
+.mb-5{margin-bottom:calc(var(--size-step) * 5)}
+.mb-6{margin-bottom:calc(var(--size-step) * 6)}
+
+.ml-1{margin-left:var(--size-step)}
+.ml-2{margin-left:calc(var(--size-step) * 2)}
+.ml-3{margin-left:calc(var(--size-step) * 3)}
+.ml-4{margin-left:calc(var(--size-step) * 4)}
+.ml-5{margin-left:calc(var(--size-step) * 5)}
+.ml-6{margin-left:calc(var(--size-step) * 6)}
+
+.mr-1{margin-right:var(--size-step)}
+.mr-2{margin-right:calc(var(--size-step) * 2)}
+.mr-3{margin-right:calc(var(--size-step) * 3)}
+.mr-4{margin-right:calc(var(--size-step) * 4)}
+.mr-5{margin-right:calc(var(--size-step) * 5)}
+.mr-6{margin-right:calc(var(--size-step) * 6)}
+
+.pt-1{padding-top:var(--size-step)}
+.pt-2{padding-top:calc(var(--size-step) * 2)}
+.pt-3{padding-top:calc(var(--size-step) * 3)}
+.pt-4{padding-top:calc(var(--size-step) * 4)}
+.pt-5{padding-top:calc(var(--size-step) * 5)}
+.pt-6{padding-top:calc(var(--size-step) * 6)}
+
+.pb-1{padding-bottom:var(--size-step)}
+.pb-2{padding-bottom:calc(var(--size-step) * 2)}
+.pb-3{padding-bottom:calc(var(--size-step) * 3)}
+.pb-4{padding-bottom:calc(var(--size-step) * 4)}
+.pb-5{padding-bottom:calc(var(--size-step) * 5)}
+.pb-6{padding-bottom:calc(var(--size-step) * 6)}
+
+.pl-1{padding-left:var(--size-step)}
+.pl-2{padding-left:calc(var(--size-step) * 2)}
+.pl-3{padding-left:calc(var(--size-step) * 3)}
+.pl-4{padding-left:calc(var(--size-step) * 4)}
+.pl-5{padding-left:calc(var(--size-step) * 5)}
+.pl-6{padding-left:calc(var(--size-step) * 6)}
+
+.pr-1{padding-right:var(--size-step)}
+.pr-2{padding-right:calc(var(--size-step) * 2)}
+.pr-3{padding-right:calc(var(--size-step) * 3)}
+.pr-4{padding-right:calc(var(--size-step) * 4)}
+.pr-5{padding-right:calc(var(--size-step) * 5)}
+.pr-6{padding-right:calc(var(--size-step) * 6)}
+
+.mi,
 .material_icon {
     font-family: 'Material Symbols Outlined';
     font-weight: normal;
@@ -112,6 +212,7 @@ body{
     -webkit-font-feature-settings: 'liga';
     -webkit-font-smoothing: antialiased;
 }
+.mis,
 .material_icon_solid{
     font-family: 'Material Symbols Outlined';
     font-style: normal;

package/assets/variables.scss

@@ -13,6 +13,7 @@ $color-primary-light: #0B3CD9;
 $color-blue-A100: #D9E2FF;
 $color-blue-50: #F2F5FF;
 $color-blue-100: #DFF0FF;
+$color-blue-400: #99C2FF;
 $color-blue-800: #406DFF;
 
 $color-info: #0D46FF;

package/package.json

@@ -1 +1 @@
-{"name":"armtek-uikit-react","version":"1.0.67","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
+{"name":"armtek-uikit-react","version":"1.0.69","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}

package/ui/Button/Button.d.ts

@@ -1,7 +1,7 @@
-import { ComponentPropsWithoutRef, ElementType, HTMLAttributes, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
 import { ColorThemeType, ColorType, SizeType, VariantType } from '../../types/theme';
-type OwnProps<T extends ElementType = ElementType<HTMLAttributes<HTMLButtonElement>>> = {
-    children: ReactNode;
+type BtnType = 'button';
+type OwnProps<T extends ElementType = BtnType> = {
     size?: SizeType;
     color?: ColorType | Exclude<ColorThemeType, 'white'>;
     variant?: VariantType;
@@ -12,6 +12,6 @@ type OwnProps<T extends ElementType = ElementType<HTMLAttributes<HTMLButtonEleme
     asIcon?: boolean;
     as?: T;
 };
-export type ButtonProps<T extends ElementType = ElementType<HTMLAttributes<HTMLButtonElement>>> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps<T>>;
-declare const Button: <T extends ElementType>(props: ButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
+export type ButtonProps<T extends ElementType = BtnType> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps<T>>;
+declare const Button: <T extends ElementType = "button">(props: ButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/ui/Link/Link.d.ts

@@ -0,0 +1,10 @@
+import { ComponentPropsWithoutRef, ElementType } from 'react';
+type LinkType = 'a';
+type OwnProps<T extends ElementType = LinkType> = {
+    border?: 'solid' | 'dotted' | 'dashed';
+    as?: T;
+    disabled?: boolean;
+};
+export type LinkProps<T extends ElementType = LinkType> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps<T>>;
+declare const Link: <T extends ElementType = "a">(props: LinkProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default Link;

package/ui/Link/Link.js

@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+import css from "./Link.module.scss";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const Link = props => {
+  let {
+    border = 'solid',
+    children,
+    disabled,
+    className,
+    as,
+    ...restProps
+  } = props;
+  let Component = as || 'a';
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(Component, {
+      ...restProps,
+      className: clsx('Arm-link', css.link, {
+        [css.link_border]: !!border,
+        [css.link_disabled]: !!disabled
+      }, css['link_border_' + border], className),
+      children: children
+    })
+  });
+};
+export default Link;

package/ui/Link/Link.module.scss

@@ -0,0 +1 @@
+@import "./../../assets/Link";

package/ui/Link/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Link';
+export * from './Link';

package/ui/Link/index.js

@@ -0,0 +1,2 @@
+export { default } from "./Link";
+export * from "./Link";

package/ui/Stack/Stack.d.ts

@@ -0,0 +1,10 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { SizeType } from '../../types/theme';
+type OwnProps = {
+    spacing?: SizeType;
+    wrap?: boolean;
+    center?: boolean;
+};
+export type StackProps = OwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof OwnProps>;
+declare const Stack: (props: StackProps) => import("react/jsx-runtime").JSX.Element;
+export default Stack;

package/ui/Stack/Stack.js

@@ -0,0 +1,51 @@
+import { cloneElement } from 'react';
+import clsx from 'clsx';
+import css from "./Stack.module.scss";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const Stack = props => {
+  const {
+    className,
+    children,
+    spacing = 'small',
+    wrap,
+    center,
+    ...divProps
+  } = props;
+  let childrenProp;
+  if (Array.isArray(children)) {
+    childrenProp = children.map((child, index) => {
+      return /*#__PURE__*/cloneElement( /*#__PURE__*/_jsx(StackItem, {
+        spacing: spacing,
+        children: child
+      }, index));
+    });
+  } else childrenProp = /*#__PURE__*/_jsx(StackItem, {
+    spacing: spacing,
+    children: children
+  });
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx("div", {
+      ...divProps,
+      className: clsx('Arm-Stack', 'flex', className, {
+        'flex-wrap': !!wrap,
+        'items-center': center,
+        [css['stack_spacing_' + spacing]]: !!spacing
+      }),
+      children: childrenProp
+    })
+  });
+};
+const StackItem = props => {
+  const {
+    children,
+    spacing
+  } = props;
+  return /*#__PURE__*/_jsx("div", {
+    className: clsx({
+      [css['stackItem_spacing_' + spacing]]: !!spacing
+    }),
+    children: children
+  });
+};
+export default Stack;

package/ui/Stack/Stack.module.scss

@@ -0,0 +1 @@
+@import "../../assets/Stack";

package/ui/Stack/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Stack';
+export * from './Stack';

package/ui/Stack/index.js

@@ -0,0 +1,2 @@
+export { default } from "./Stack";
+export * from "./Stack";