@activecollab/components 1.0.118 → 1.0.121

package/dist/index.js

@@ -284,17 +284,17 @@
   }, function (props) {
     return props.size === "big" && styled.css(["height:40px;"]);
   }, function (props) {
-    return (props.variant === "primary" || props.variant === "contained") && styled.css(["padding:0 16px;background-color:var(--color-primary);border-radius:var(--ac-br-rounded);color:var(--page-paper-main);&:hover{box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"]);
+    return (props.variant === "primary" || props.variant === "contained") && styled.css(["padding:0 16px;background-color:var(--color-primary);border-radius:var(--ac-br-rounded);color:var(--page-paper-main);&:hover,&:focus{box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"]);
   }, function (props) {
-    return (props.variant === "secondary" || props.variant === "outlined") && styled.css(["padding:0 16px;background-color:transparent;border-radius:var(--ac-br-rounded);border:solid 1px var(--color-theme-700);color:var(--color-theme-700);&:hover{border-color:var(--color-primary);color:var(--color-primary);}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"]);
+    return (props.variant === "secondary" || props.variant === "outlined") && styled.css(["padding:0 16px;background-color:transparent;border-radius:var(--ac-br-rounded);border:solid 1px var(--color-theme-700);color:var(--color-theme-700);&:hover,&:focus{border-color:var(--color-primary);color:var(--color-primary);}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"]);
   }, function (props) {
-    return props.variant === "dark transparent" && styled.css(["padding:0 8px;background-color:rgba(0,0,0,0.5);border-radius:var(--ac-br-6);color:var(--only-white);&:hover{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
+    return props.variant === "dark transparent" && styled.css(["padding:0 8px;background-color:rgba(0,0,0,0.5);border-radius:var(--ac-br-6);color:var(--only-white);&:hover,&:focus{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
   }, function (props) {
-    return (props.variant === "tertiary" || props.variant === "text colored") && styled.css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-primary);&:hover{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
+    return (props.variant === "tertiary" || props.variant === "text colored") && styled.css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-primary);&:hover,&:focus{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
   }, function (props) {
-    return (props.variant === "option" || props.variant === "text gray") && styled.css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-theme-700);&:hover{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
+    return (props.variant === "option" || props.variant === "text gray") && styled.css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-theme-700);&:hover,&:focus{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
   }, function (props) {
-    return props.variant === "circle raised" && styled.css(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);transition:ease 0.3s all;&:hover{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
+    return props.variant === "circle raised" && styled.css(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);transition:ease 0.3s all;&:hover,&:focus{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
   }, function (props) {
     return props.iconOnly && styled.css(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", ";", " ", ""], (props.size === "small" || props.size === "big") && styled.css(["border-radius:var(--ac-br-rounded);"]), props.size === "small" && styled.css(["width:24px;"]), props.size === "big" && styled.css(["width:40px;"]));
   }, function (props) {
@@ -10418,22 +10418,31 @@
   var StyledProgressBar = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledProgressBar",
     componentId: "sc-k5nm08-0"
-  })(["", " ", ""], BoxSizingStyle, function (props) {
+  })(["", " ", " ", ""], BoxSizingStyle, function (props) {
+    return props.$width ? styled.css(["width:", "%;"], props.$width) : styled.css(["width:100%;"]);
+  }, function (props) {
     return props.$color ? styled.css(["background-color:", ";"], props.$color) : styled.css(["background-color:var(--color-theme-300);"]);
   });
   StyledProgressBar.displayName = "StyledProgressBar";
   var StyledProgressBarProgress = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledProgressBarProgress",
     componentId: "sc-k5nm08-1"
-  })(["height:3px;", ""], function (props) {
+  })(["", " ", ""], function (props) {
+    return props.$height ? styled.css(["height:", "px;"], props.$height) : styled.css(["height:3px;"]);
+  }, function (props) {
     return props.$color ? styled.css(["background-color:", ";"], props.$color) : styled.css(["background-color:var(--color-secondary);"]);
   });
   StyledProgressBarProgress.displayName = "StyledProgressBarProgress";
 
   var ProgressBar = function ProgressBar(_ref) {
-    var progress = _ref.progress,
+    var _ref$progress = _ref.progress,
+        progress = _ref$progress === void 0 ? 0 : _ref$progress,
         backgroundColor = _ref.backgroundColor,
-        progressColor = _ref.progressColor;
+        progressColor = _ref.progressColor,
+        _ref$stroke = _ref.stroke,
+        stroke = _ref$stroke === void 0 ? 3 : _ref$stroke,
+        _ref$width = _ref.width,
+        width = _ref$width === void 0 ? 100 : _ref$width;
     var progressNumber = React.useMemo(function () {
       var width = progress;
 
@@ -10447,14 +10456,38 @@
 
       return width;
     }, [progress]);
+    var widthPercent = React.useMemo(function () {
+      var width_percent = width;
+
+      if (width > 100) {
+        width_percent = 100;
+      }
+
+      if (width <= 0) {
+        width_percent = 100;
+      }
+
+      return width_percent;
+    }, [width]);
+    var height = React.useMemo(function () {
+      var stroke_min = stroke;
+
+      if (stroke <= 0) {
+        stroke_min = 3;
+      }
+
+      return stroke_min;
+    }, [stroke]);
     return /*#__PURE__*/React__default["default"].createElement(StyledProgressBar, {
       className: "c-progress-bar",
-      $color: backgroundColor
+      $color: backgroundColor,
+      $width: widthPercent
     }, /*#__PURE__*/React__default["default"].createElement(StyledProgressBarProgress, {
       className: "c-progress-bar__progress",
       style: {
         width: "".concat(progressNumber, "%")
       },
+      $height: height,
       $color: progressColor
     }));
   };