@ssa-ui-kit/core 2.21.3 → 2.22.0

package/dist/components/ProgressCircle/ProgressCircle.d.ts

@@ -1,3 +1,3 @@
 import { ProgressCircleProps } from './types';
-declare const ProgressCircle: ({ max, currentValue, color, size, infoContent, }: ProgressCircleProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const ProgressCircle: ({ max, currentValue, color, size, infoContent, mode, classnames, }: ProgressCircleProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default ProgressCircle;

package/dist/components/ProgressCircle/ProgressCircleBase.d.ts

@@ -7,4 +7,5 @@ export declare const ProgressCircleBase: import("@emotion/styled").StyledCompone
     svgOffset: number;
     color: string;
     size: number;
+    mode: "default" | "infinite";
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/ProgressCircle/types.d.ts

@@ -4,4 +4,12 @@ export interface ProgressCircleProps {
     size?: number;
     color?: keyof MainColors;
     infoContent?: React.ReactNode | string;
+    mode?: 'default' | 'infinite';
+    classnames?: {
+        root?: string;
+        outer?: string;
+        inner?: string;
+        svg?: string;
+        svgCircle?: string;
+    };
 }

package/dist/index.js

@@ -6334,13 +6334,23 @@ const generateGradient = svgOffset => (0,react_namespaceObject.keyframes)`
     stroke-dashoffset: ${svgOffset};
   }
 `;
+const generateInfinite = () => (0,react_namespaceObject.keyframes)`
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+`;
 const ProgressCircleBase = /*#__PURE__*/base_default()("div",  true ? {
   target: "eok4i9s0"
 } : 0)("width:", ({
   size
 }) => size, "px;height:", ({
   size
-}) => size, "px;position:relative;svg{position:absolute;top:0;left:0;filter:", ({
+}) => size, "px;position:relative;animation:", () => generateInfinite(), " 2s linear infinite forwards;animation:", ({
+  mode
+}) => mode === 'default' && 'none', ";svg{position:absolute;top:0;left:0;filter:", ({
   theme,
   color
 }) => `drop-shadow(3px 5px 10px ${theme.colors[`${color}Lighter40`] || theme.colors[color]})`, ";}circle{fill:none;stroke:url(#", ({
@@ -6353,7 +6363,11 @@ const ProgressCircleBase = /*#__PURE__*/base_default()("div",  true ? {
   fullStroke
 }) => fullStroke, ";animation:", ({
   svgOffset
-}) => generateGradient(svgOffset), " 1s linear forwards;}" + ( true ? "" : 0));
+}) => generateGradient(svgOffset), " 1s linear forwards;animation-direction:", ({
+  mode
+}) => mode === 'infinite' && 'reverse !important', ";animation-play-state:", ({
+  mode
+}) => mode === 'infinite' && 'paused !important', ";}" + ( true ? "" : 0));
 ;// ./src/components/ProgressCircle/ProgressCircleOuter.tsx
 
 const ProgressCircleOuter = /*#__PURE__*/base_default()("div",  true ? {
@@ -6388,7 +6402,9 @@ const ProgressCircle = ({
   currentValue,
   color = 'green',
   size = 160,
-  infoContent
+  infoContent,
+  mode = 'default',
+  classnames
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
   const gradientId = (0,external_react_namespaceObject.useId)();
@@ -6405,10 +6421,14 @@ const ProgressCircle = ({
     svgOffset: svgOffset,
     color: color,
     size: size,
+    mode: mode,
+    className: classnames?.root,
     children: [(0,jsx_runtime_namespaceObject.jsx)(ProgressCircleOuter, {
       size: size,
+      className: classnames?.outer,
       children: (0,jsx_runtime_namespaceObject.jsx)(ProgressCircleInner, {
         size: size,
+        className: classnames?.inner,
         children: infoContent
       })
     }), (0,jsx_runtime_namespaceObject.jsxs)("svg", {
@@ -6418,6 +6438,7 @@ const ProgressCircle = ({
       preserveAspectRatio: "xMinYMin slice",
       width: "100%",
       height: "100%",
+      className: classnames?.svg,
       children: [(0,jsx_runtime_namespaceObject.jsx)("defs", {
         children: (0,jsx_runtime_namespaceObject.jsxs)("linearGradient", {
           id: gradientId,
@@ -6432,7 +6453,8 @@ const ProgressCircle = ({
       }), (0,jsx_runtime_namespaceObject.jsx)("circle", {
         cx: size / 2,
         cy: size / 2,
-        r: size / 2 - barStroke
+        r: size / 2 - barStroke,
+        className: classnames?.svgCircle
       })]
     })]
   });