labsense-ui-kit 1.0.18 → 1.0.19

package/dist/Buttons/Button.d.ts

@@ -22,6 +22,11 @@ export interface ButtonProps {
     iconSize?: number;
     disabled?: boolean;
     variant?: buttonVariant;
+    loaderProps?: {
+        loading?: boolean;
+        loaderPosition?: 'right' | 'left';
+        loaderColor?: string;
+    };
 }
 declare const ButtonComponent: React.FC<ButtonProps>;
 export default ButtonComponent;

package/dist/index.js

@@ -2140,29 +2140,51 @@ var GlobalFonts = {
   light: "NotoSans, sans-serif"
 };
 
-var _templateObject$2, _templateObject2$1;
-var StyledButton = styled__default.button(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  pointer-events: ", ";\n  cursor: ", ";\n  height: max-content;\n  min-height: max-content;\n  width: max-content;\n  box-sizing: border-box;\n  gap: ", ";\n  border-radius: ", ";\n  outline: none;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: ", ";\n\n  padding: ", ";\n\n  &:focus {\n    outline: none;\n  }\n\n\n  ", "\n"])), function (_ref) {
-  var disabled = _ref.disabled;
-  return disabled ? 'none' : 'auto';
+var _templateObject$2, _templateObject2$1, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6;
+var spin = styled.keyframes(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var Spinner = styled__default.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n  width: ", "px;\n  height: ", "px;\n  border: ", "px solid #ddd;\n  border-top-color: ", ";\n  border-radius: 50%;\n  animation: ", " 1s linear infinite;\n"])), function (_ref) {
+  var size = _ref.size;
+  return size;
 }, function (_ref2) {
-  var disabled = _ref2.disabled;
-  return disabled ? 'not-allowed' : 'pointer';
+  var size = _ref2.size;
+  return size;
 }, function (_ref3) {
-  var gap = _ref3.gap;
-  return gap || '4px';
+  var size = _ref3.size;
+  return size / 2;
 }, function (_ref4) {
-  var borderRadius = _ref4.borderRadius;
-  return borderRadius || '8px';
-}, function (_ref5) {
-  var iconPosition = _ref5.iconPosition;
-  return iconPosition === 'right' ? 'row-reverse' : 'row';
+  var color = _ref4.color;
+  return color;
+}, spin);
+var LoaderWrapper = styled__default.div(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (_ref5) {
+  var loaderPosition = _ref5.loaderPosition;
+  return loaderPosition === 'right' ? '4px' : '0';
 }, function (_ref6) {
-  var size = _ref6.size,
-    padding = _ref6.padding;
+  var loaderPosition = _ref6.loaderPosition;
+  return loaderPosition === 'left' ? '4px' : '0';
+});
+var Container = styled__default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: ", ";\n  gap: ", ";\n"])), function (_ref7) {
+  var iconPosition = _ref7.iconPosition;
+  return iconPosition === 'right' ? 'row-reverse' : 'row';
+}, function (_ref8) {
+  var gap = _ref8.gap;
+  return gap || '4px';
+});
+var StyledButton = styled__default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  pointer-events: ", ";\n  cursor: ", ";\n  height: max-content;\n  min-height: max-content;\n  width: max-content;\n  box-sizing: border-box;\n  border-radius: ", ";\n  outline: none;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  padding: ", ";\n\n  &:focus {\n    outline: none;\n  }\n\n\n  ", "\n"])), function (_ref9) {
+  var disabled = _ref9.disabled;
+  return disabled ? 'none' : 'auto';
+}, function (_ref10) {
+  var disabled = _ref10.disabled;
+  return disabled ? 'not-allowed' : 'pointer';
+}, function (_ref11) {
+  var borderRadius = _ref11.borderRadius;
+  return borderRadius || '8px';
+}, function (_ref12) {
+  var size = _ref12.size,
+    padding = _ref12.padding;
   return size === 'small' ? '8px 12.2px' : size === 'medium' ? '10px 19px' : size === 'large' ? '12px 24.5px' : size === 'custom' ? padding : '10px 16px';
-}, function (_ref7) {
-  var variant = _ref7.variant,
-    disabled = _ref7.disabled;
+}, function (_ref13) {
+  var variant = _ref13.variant,
+    disabled = _ref13.disabled;
   switch (variant) {
     case 'primary':
       return "\n          background: " + (disabled ? colorVariables.disabled.primary : colorVariables["default"].primary) + ";\n          color: " + colorVariables.text.white + ";\n          border: " + (disabled ? "1px solid " + colorVariables.disabled.primary : "1px solid " + colorVariables["default"].primary) + ";\n          &:hover {\n            background: " + colorVariables.hover.primary + ";\n            border: 1px solid " + colorVariables.hover.primary + ";\n          }\n        ";
@@ -2182,50 +2204,57 @@ var StyledButton = styled__default.button(_templateObject$2 || (_templateObject$
       return '';
   }
 });
-var ButtonText = styled__default.span(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n"])), function (_ref8) {
-  var fontFamily = _ref8.fontFamily;
+var ButtonText = styled__default.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n"])), function (_ref14) {
+  var fontFamily = _ref14.fontFamily;
   return fontFamily ? fontFamily : GlobalFonts.bold;
-}, function (_ref9) {
-  var size = _ref9.size,
-    fontSize = _ref9.fontSize;
+}, function (_ref15) {
+  var size = _ref15.size,
+    fontSize = _ref15.fontSize;
   return size === 'small' ? '14px' : size === 'medium' ? '16px' : size === 'large' ? '18px' : size === 'custom' ? fontSize : '16px';
-}, function (_ref10) {
-  var fontWeight = _ref10.fontWeight,
-    size = _ref10.size;
+}, function (_ref16) {
+  var fontWeight = _ref16.fontWeight,
+    size = _ref16.size;
   return size === 'custom' && fontWeight || '500';
-}, function (_ref11) {
-  var size = _ref11.size,
-    fontSize = _ref11.fontSize;
+}, function (_ref17) {
+  var size = _ref17.size,
+    fontSize = _ref17.fontSize;
   return size === 'small' ? '14px' : size === 'medium' ? '16px' : size === 'large' ? '18px' : size === 'custom' ? fontSize : '16px';
 });
-var ButtonComponent = function ButtonComponent(_ref12) {
-  var onClick = _ref12.onClick,
-    text = _ref12.text,
-    size = _ref12.size,
-    background = _ref12.background,
-    _ref12$color = _ref12.color,
-    color = _ref12$color === void 0 ? '#FFFFFF' : _ref12$color,
-    border = _ref12.border,
-    borderRadius = _ref12.borderRadius,
-    fontWeight = _ref12.fontWeight,
-    fontSize = _ref12.fontSize,
-    fontFamily = _ref12.fontFamily,
-    padding = _ref12.padding,
-    icon = _ref12.icon,
-    gap = _ref12.gap,
-    _ref12$variant = _ref12.variant,
-    variant = _ref12$variant === void 0 ? 'primary' : _ref12$variant,
-    _ref12$iconPosition = _ref12.iconPosition,
-    iconPosition = _ref12$iconPosition === void 0 ? 'right' : _ref12$iconPosition,
-    _ref12$iconWeight = _ref12.iconWeight,
-    iconWeight = _ref12$iconWeight === void 0 ? '2' : _ref12$iconWeight,
-    iconSize = _ref12.iconSize,
-    _ref12$disabled = _ref12.disabled,
-    disabled = _ref12$disabled === void 0 ? false : _ref12$disabled;
+var ButtonComponent = function ButtonComponent(_ref18) {
+  var onClick = _ref18.onClick,
+    text = _ref18.text,
+    size = _ref18.size,
+    background = _ref18.background,
+    _ref18$color = _ref18.color,
+    color = _ref18$color === void 0 ? colorVariables.text.white : _ref18$color,
+    border = _ref18.border,
+    borderRadius = _ref18.borderRadius,
+    fontWeight = _ref18.fontWeight,
+    fontSize = _ref18.fontSize,
+    fontFamily = _ref18.fontFamily,
+    padding = _ref18.padding,
+    icon = _ref18.icon,
+    gap = _ref18.gap,
+    _ref18$variant = _ref18.variant,
+    variant = _ref18$variant === void 0 ? 'primary' : _ref18$variant,
+    _ref18$iconPosition = _ref18.iconPosition,
+    iconPosition = _ref18$iconPosition === void 0 ? 'right' : _ref18$iconPosition,
+    _ref18$iconWeight = _ref18.iconWeight,
+    iconWeight = _ref18$iconWeight === void 0 ? '2' : _ref18$iconWeight,
+    iconSize = _ref18.iconSize,
+    _ref18$disabled = _ref18.disabled,
+    disabled = _ref18$disabled === void 0 ? false : _ref18$disabled,
+    _ref18$loaderProps = _ref18.loaderProps,
+    loaderProps = _ref18$loaderProps === void 0 ? {
+      loading: false,
+      loaderPosition: 'right',
+      loaderColor: colorVariables.text.white
+    } : _ref18$loaderProps;
   var _useState = React.useState(false),
     isHovered = _useState[0],
     setIsHovered = _useState[1];
   var iconPos = iconPosition || 'left';
+  var loaderPos = loaderProps.loaderPosition || 'right';
   return React__default.createElement(StyledButton, {
     disabled: disabled,
     onClick: onClick,
@@ -2235,15 +2264,16 @@ var ButtonComponent = function ButtonComponent(_ref12) {
     size: size,
     color: color,
     padding: padding,
-    gap: gap,
     variant: variant,
-    iconPosition: iconPos,
     onMouseEnter: function onMouseEnter() {
       return setIsHovered(true);
     },
     onMouseLeave: function onMouseLeave() {
       return setIsHovered(false);
     }
+  }, React__default.createElement(Container, {
+    iconPosition: iconPos,
+    gap: gap
   }, icon && React__default.createElement(Icon, {
     icon: icon,
     weight: iconWeight,
@@ -2255,10 +2285,15 @@ var ButtonComponent = function ButtonComponent(_ref12) {
     fontFamily: fontFamily,
     fontSize: fontSize,
     fontWeight: fontWeight
-  }, text));
+  }, text)), loaderProps.loading && React__default.createElement(LoaderWrapper, {
+    loaderPosition: loaderPos
+  }, React__default.createElement(Spinner, {
+    size: size === 'small' ? 6 : size === 'medium' ? 8 : 9,
+    color: loaderProps.loaderColor || color
+  })));
 };
 
-var _templateObject$3, _templateObject2$2, _templateObject3$1;
+var _templateObject$3, _templateObject2$2, _templateObject3$2;
 var InputContainer = styled__default.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  position: relative; \n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  border: 1px solid ", ";\n  background: ", ";\n  display: flex; \n  flex-direction : column;\n  justify-content : center; \n"])), function (_ref) {
   var width = _ref.width;
   return width || "100%";
@@ -2279,7 +2314,7 @@ var WrittenTextAfterInput = styled__default.p(_templateObject2$2 || (_templateOb
   var show = _ref6.show;
   return show ? "visible" : "hidden";
 });
-var InputBlock = styled__default.input(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  border: 1px solid ", ";\n  background: ", ";\n  color: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n  font-family: NotoSans, sans-serif;\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-align: left;\n  outline: none;\n\n  ::placeholder {\n    color: ", ";\n  }\n"])), function (_ref7) {
+var InputBlock = styled__default.input(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  border: 1px solid ", ";\n  background: ", ";\n  color: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n  font-family: NotoSans, sans-serif;\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-align: left;\n  outline: none;\n\n  ::placeholder {\n    color: ", ";\n  }\n"])), function (_ref7) {
   var width = _ref7.width;
   return width || "100%";
 }, function (_ref8) {
@@ -2411,8 +2446,8 @@ var ProgressBar = function ProgressBar(_ref) {
   })));
 };
 
-var _templateObject$4, _templateObject2$3, _templateObject3$2, _templateObject4;
-var spin = styled.keyframes(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  0% { opacity: 1; }\n  100% { opacity: 0.3; }\n"])));
+var _templateObject$4, _templateObject2$3, _templateObject3$3, _templateObject4$1;
+var spin$1 = styled.keyframes(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  0% { opacity: 1; }\n  100% { opacity: 0.3; }\n"])));
 var getDotPosition = function getDotPosition(index, size) {
   var angle = index * 360 / 8;
   var radius = size / 2.5;
@@ -2435,7 +2470,7 @@ var Dot = styled__default.div.attrs(function (_ref3) {
       transform: getDotPosition(index, size)
     }
   };
-})(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 50%;\n  animation: ", " ", "s linear infinite;\n  animation-delay: ", "s;\n"])), function (_ref4) {
+})(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 50%;\n  animation: ", " ", "s linear infinite;\n  animation-delay: ", "s;\n"])), function (_ref4) {
   var dotSize = _ref4.dotSize;
   return dotSize;
 }, function (_ref5) {
@@ -2444,7 +2479,7 @@ var Dot = styled__default.div.attrs(function (_ref3) {
 }, function (_ref6) {
   var color = _ref6.color;
   return color;
-}, spin, function (_ref7) {
+}, spin$1, function (_ref7) {
   var speed = _ref7.speed;
   return speed;
 }, function (_ref8) {
@@ -2452,7 +2487,7 @@ var Dot = styled__default.div.attrs(function (_ref3) {
     speed = _ref8.speed;
   return index * speed / 8;
 });
-var SpinnerWrapper = styled__default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: max-content;\n"])));
+var SpinnerWrapper = styled__default.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: max-content;\n"])));
 var sizeMap = {
   small: {
     size: 32