@activecollab/components 1.0.128 → 1.0.131
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Loaders/Spinner/SpinnerLoader.js +8 -8
- package/dist/cjs/components/Loaders/Spinner/SpinnerLoader.js.map +1 -1
- package/dist/cjs/components/Loaders/Spinner/Styles.js +4 -4
- package/dist/cjs/components/Loaders/Spinner/Styles.js.map +1 -1
- package/dist/cjs/components/ProgressRing/ProgressRing.js +1 -1
- package/dist/cjs/components/ProgressRing/ProgressRing.js.map +1 -1
- package/dist/cjs/components/SelectTrigger/Styles.js +1 -1
- package/dist/cjs/components/SelectTrigger/Styles.js.map +1 -1
- package/dist/esm/components/Loaders/Spinner/SpinnerLoader.d.ts +1 -1
- package/dist/esm/components/Loaders/Spinner/SpinnerLoader.d.ts.map +1 -1
- package/dist/esm/components/Loaders/Spinner/SpinnerLoader.js +8 -8
- package/dist/esm/components/Loaders/Spinner/SpinnerLoader.js.map +1 -1
- package/dist/esm/components/Loaders/Spinner/Styles.d.ts +2 -2
- package/dist/esm/components/Loaders/Spinner/Styles.d.ts.map +1 -1
- package/dist/esm/components/Loaders/Spinner/Styles.js +4 -4
- package/dist/esm/components/Loaders/Spinner/Styles.js.map +1 -1
- package/dist/esm/components/ProgressRing/ProgressRing.js +1 -1
- package/dist/esm/components/ProgressRing/ProgressRing.js.map +1 -1
- package/dist/esm/components/SelectTrigger/Styles.d.ts.map +1 -1
- package/dist/esm/components/SelectTrigger/Styles.js +1 -1
- package/dist/esm/components/SelectTrigger/Styles.js.map +1 -1
- package/dist/index.js +14 -14
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
11
11
|
|
|
12
12
|
var _Styles = require("./Styles");
|
|
13
13
|
|
|
14
|
-
var _excluded = ["radius", "
|
|
14
|
+
var _excluded = ["radius", "stroke", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "rotateDurationInSeconds", "className"];
|
|
15
15
|
|
|
16
16
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
17
|
|
|
@@ -25,13 +25,13 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
25
25
|
|
|
26
26
|
var SpinnerLoader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
27
27
|
var _ref$radius = _ref.radius,
|
|
28
|
-
radius = _ref$radius === void 0 ?
|
|
29
|
-
_ref$
|
|
30
|
-
|
|
28
|
+
radius = _ref$radius === void 0 ? 10 : _ref$radius,
|
|
29
|
+
_ref$stroke = _ref.stroke,
|
|
30
|
+
stroke = _ref$stroke === void 0 ? 2 : _ref$stroke,
|
|
31
31
|
_ref$activeStrokeColo = _ref.activeStrokeColor,
|
|
32
|
-
activeStrokeColor = _ref$activeStrokeColo === void 0 ? "var(--color-
|
|
32
|
+
activeStrokeColor = _ref$activeStrokeColo === void 0 ? "var(--color-secondary)" : _ref$activeStrokeColo,
|
|
33
33
|
_ref$inactiveStrokeCo = _ref.inactiveStrokeColor,
|
|
34
|
-
inactiveStrokeColor = _ref$inactiveStrokeCo === void 0 ? "var(--color-theme-300)" : _ref$inactiveStrokeCo,
|
|
34
|
+
inactiveStrokeColor = _ref$inactiveStrokeCo === void 0 ? "var(--color-theme-transparent-300)" : _ref$inactiveStrokeCo,
|
|
35
35
|
_ref$activeColorPerce = _ref.activeColorPercentage,
|
|
36
36
|
activeColorPercentage = _ref$activeColorPerce === void 0 ? "25%" : _ref$activeColorPerce,
|
|
37
37
|
_ref$rotateDurationIn = _ref.rotateDurationInSeconds,
|
|
@@ -42,8 +42,8 @@ var SpinnerLoader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
42
42
|
return /*#__PURE__*/_react.default.createElement(_Styles.StyledSpinnerLoader, _extends({
|
|
43
43
|
ref: ref,
|
|
44
44
|
className: className,
|
|
45
|
-
$
|
|
46
|
-
$
|
|
45
|
+
$diameter: radius * 2,
|
|
46
|
+
$stroke: stroke,
|
|
47
47
|
$activeStrokeColor: activeStrokeColor,
|
|
48
48
|
$inactiveStrokeColor: inactiveStrokeColor,
|
|
49
49
|
$activeColorPercentage: activeColorPercentage,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/SpinnerLoader.tsx"],"names":["SpinnerLoader","ref","radius","
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/SpinnerLoader.tsx"],"names":["SpinnerLoader","ref","radius","stroke","activeStrokeColor","inactiveStrokeColor","activeColorPercentage","rotateDurationInSeconds","className","rest","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;;;;;AAiBO,IAAMA,aAAa,gBAAG,uBAI3B,gBAWEC,GAXF,EAYK;AAAA,yBAVDC,MAUC;AAAA,MAVDA,MAUC,4BAVQ,EAUR;AAAA,yBATDC,MASC;AAAA,MATDA,MASC,4BATQ,CASR;AAAA,mCARDC,iBAQC;AAAA,MARDA,iBAQC,sCARmB,wBAQnB;AAAA,mCAPDC,mBAOC;AAAA,MAPDA,mBAOC,sCAPqB,oCAOrB;AAAA,mCANDC,qBAMC;AAAA,MANDA,qBAMC,sCANuB,KAMvB;AAAA,mCALDC,uBAKC;AAAA,MALDA,uBAKC,sCALyB,IAKzB;AAAA,MAJDC,SAIC,QAJDA,SAIC;AAAA,MAHEC,IAGF;;AACH,sBACE,6BAAC,2BAAD;AACE,IAAA,GAAG,EAAER,GADP;AAEE,IAAA,SAAS,EAAEO,SAFb;AAGE,IAAA,SAAS,EAAEN,MAAM,GAAG,CAHtB;AAIE,IAAA,OAAO,EAAEC,MAJX;AAKE,IAAA,kBAAkB,EAAEC,iBALtB;AAME,IAAA,oBAAoB,EAAEC,mBANxB;AAOE,IAAA,sBAAsB,EAAEC,qBAP1B;AAQE,IAAA,wBAAwB,EAAEC;AAR5B,KASME,IATN,EADF;AAaD,CA9B0B,CAAtB;;AAiCPT,aAAa,CAACU,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { forwardRef } from \"react\";\nimport { StyledSpinnerLoader } from \"./Styles\";\n\nexport interface SpinnerLoaderProps {\n /** Loader circumference size */\n radius?: number;\n /** Stroke width of the loader */\n stroke?: number;\n /** Active color of spinning loader */\n activeStrokeColor?: string;\n /** Percentage of the circle which the active color takes */\n activeColorPercentage?: \"25%\" | \"50%\" | \"75%\";\n /** Inactive color of spinning loader */\n inactiveStrokeColor?: string;\n /** Rotate speed of animation in seconds */\n rotateDurationInSeconds?: number;\n}\n\nexport const SpinnerLoader = forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<\"div\"> & SpinnerLoaderProps\n>(\n (\n {\n radius = 10,\n stroke = 2,\n activeStrokeColor = \"var(--color-secondary)\",\n inactiveStrokeColor = \"var(--color-theme-transparent-300)\",\n activeColorPercentage = \"25%\",\n rotateDurationInSeconds = 0.75,\n className,\n ...rest\n },\n ref\n ) => {\n return (\n <StyledSpinnerLoader\n ref={ref}\n className={className}\n $diameter={radius * 2}\n $stroke={stroke}\n $activeStrokeColor={activeStrokeColor}\n $inactiveStrokeColor={inactiveStrokeColor}\n $activeColorPercentage={activeColorPercentage}\n $rotateDurationInSeconds={rotateDurationInSeconds}\n {...rest}\n />\n );\n }\n);\n\nSpinnerLoader.displayName = \"SpinnerLoader\";\n"],"file":"SpinnerLoader.js"}
|
|
@@ -21,13 +21,13 @@ var StyledSpinnerLoader = _styledComponents.default.div.withConfig({
|
|
|
21
21
|
displayName: "Styles__StyledSpinnerLoader",
|
|
22
22
|
componentId: "sc-1ht53g9-0"
|
|
23
23
|
})(["", " border-radius:100%;", " ", " ", " ", ""], _BoxSizingStyle.BoxSizingStyle, function (props) {
|
|
24
|
-
return (0, _styledComponents.css)(["width:", "px;height:", "px;animation:", " ", "s infinite linear;"], props.$
|
|
24
|
+
return (0, _styledComponents.css)(["width:", "px;height:", "px;animation:", " ", "s infinite linear;"], props.$diameter, props.$diameter, rotateAnimation, props.$rotateDurationInSeconds);
|
|
25
25
|
}, function (props) {
|
|
26
|
-
return props.$activeColorPercentage === "25%" && (0, _styledComponents.css)(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$
|
|
26
|
+
return props.$activeColorPercentage === "25%" && (0, _styledComponents.css)(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
|
|
27
27
|
}, function (props) {
|
|
28
|
-
return props.$activeColorPercentage === "50%" && (0, _styledComponents.css)(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$
|
|
28
|
+
return props.$activeColorPercentage === "50%" && (0, _styledComponents.css)(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
|
|
29
29
|
}, function (props) {
|
|
30
|
-
return props.$activeColorPercentage === "75%" && (0, _styledComponents.css)(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$
|
|
30
|
+
return props.$activeColorPercentage === "75%" && (0, _styledComponents.css)(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
|
|
31
31
|
});
|
|
32
32
|
|
|
33
33
|
exports.StyledSpinnerLoader = StyledSpinnerLoader;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/Styles.ts"],"names":["rotateAnimation","keyframes","StyledSpinnerLoader","styled","div","BoxSizingStyle","props","css","$
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/Styles.ts"],"names":["rotateAnimation","keyframes","StyledSpinnerLoader","styled","div","BoxSizingStyle","props","css","$diameter","$rotateDurationInSeconds","$activeColorPercentage","$stroke","$inactiveStrokeColor","$activeStrokeColor"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;AAEA,IAAMA,eAAe,OAAGC,2BAAH,iEAArB;;AAcO,IAAMC,mBAAmB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,oDAC5BC,8BAD4B,EAG5B,UAACC,KAAD;AAAA,aACAC,qBADA,wEAEWD,KAAK,CAACE,SAFjB,EAGYF,KAAK,CAACE,SAHlB,EAIeR,eAJf,EAIkCM,KAAK,CAACG,wBAJxC;AAAA,CAH4B,EAW5B,UAACH,KAAD;AAAA,SACAA,KAAK,CAACI,sBAAN,KAAiC,KAAjC,QACAH,qBADA,kIAEkBD,KAAK,CAACK,OAFxB,EAE2CL,KAAK,CAACM,oBAFjD,EAGmBN,KAAK,CAACK,OAHzB,EAG4CL,KAAK,CAACM,oBAHlD,EAIiBN,KAAK,CAACK,OAJvB,EAI0CL,KAAK,CAACM,oBAJhD,EAKgBN,KAAK,CAACK,OALtB,EAKyCL,KAAK,CAACO,kBAL/C,CADA;AAAA,CAX4B,EAoB5B,UAACP,KAAD;AAAA,SACAA,KAAK,CAACI,sBAAN,KAAiC,KAAjC,QACAH,qBADA,kIAEkBD,KAAK,CAACK,OAFxB,EAE2CL,KAAK,CAACO,kBAFjD,EAGmBP,KAAK,CAACK,OAHzB,EAG4CL,KAAK,CAACM,oBAHlD,EAIiBN,KAAK,CAACK,OAJvB,EAI0CL,KAAK,CAACM,oBAJhD,EAKgBN,KAAK,CAACK,OALtB,EAKyCL,KAAK,CAACO,kBAL/C,CADA;AAAA,CApB4B,EA6B1B,UAACP,KAAD;AAAA,SACFA,KAAK,CAACI,sBAAN,KAAiC,KAAjC,QACAH,qBADA,kIAEkBD,KAAK,CAACK,OAFxB,EAE2CL,KAAK,CAACO,kBAFjD,EAGmBP,KAAK,CAACK,OAHzB,EAG4CL,KAAK,CAACO,kBAHlD,EAIiBP,KAAK,CAACK,OAJvB,EAI0CL,KAAK,CAACM,oBAJhD,EAKgBN,KAAK,CAACK,OALtB,EAKyCL,KAAK,CAACO,kBAL/C,CADE;AAAA,CA7B0B,CAAzB","sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\n\nconst rotateAnimation = keyframes`\n from { transform: rotate(0deg); }\n to { transform: rotate(359deg); }\n`;\n\nexport interface StyledSpinnerLoaderProps {\n $diameter: number;\n $stroke: number;\n $activeStrokeColor: string;\n $inactiveStrokeColor: string;\n $activeColorPercentage: \"25%\" | \"50%\" | \"75%\";\n $rotateDurationInSeconds: number;\n}\n\nexport const StyledSpinnerLoader = styled.div<StyledSpinnerLoaderProps>`\n ${BoxSizingStyle}\n border-radius: 100%;\n ${(props) =>\n css`\n width: ${props.$diameter}px;\n height: ${props.$diameter}px;\n animation: ${rotateAnimation} ${props.$rotateDurationInSeconds}s infinite\n linear;\n `}\n\n ${(props) =>\n props.$activeColorPercentage === \"25%\" &&\n css`\n border-right: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n border-bottom: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n border-left: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n border-top: ${props.$stroke}px solid ${props.$activeStrokeColor};\n `}\n\n ${(props) =>\n props.$activeColorPercentage === \"50%\" &&\n css`\n border-right: ${props.$stroke}px solid ${props.$activeStrokeColor};\n border-bottom: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n border-left: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n border-top: ${props.$stroke}px solid ${props.$activeStrokeColor};\n `}\n\n ${(props) =>\n props.$activeColorPercentage === \"75%\" &&\n css`\n border-right: ${props.$stroke}px solid ${props.$activeStrokeColor};\n border-bottom: ${props.$stroke}px solid ${props.$activeStrokeColor};\n border-left: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n border-top: ${props.$stroke}px solid ${props.$activeStrokeColor};\n `}\n`;\n"],"file":"Styles.js"}
|
|
@@ -46,7 +46,7 @@ var ProgressRing = function ProgressRing(_ref) {
|
|
|
46
46
|
return width;
|
|
47
47
|
}, [progress]);
|
|
48
48
|
var normalizedRadius = (0, _react.useMemo)(function () {
|
|
49
|
-
return radius - stroke;
|
|
49
|
+
return radius - stroke / 2;
|
|
50
50
|
}, [radius, stroke]);
|
|
51
51
|
var circumference = (0, _react.useMemo)(function () {
|
|
52
52
|
return normalizedRadius * 2 * Math.PI;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ProgressRing/ProgressRing.tsx"],"names":["ProgressRing","backgroundColor","progressColor","progress","radius","stroke","className","showPercentage","fontSize","progressNumber","width","normalizedRadius","circumference","Math","PI","strokeDashoffsetOuter","strokeDashoffsetInner","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AAMA;;;;;;;;AAqBO,IAAMA,YAAoC,GAAG,SAAvCA,YAAuC,OAS9C;AAAA,MARJC,eAQI,QARJA,eAQI;AAAA,MAPJC,aAOI,QAPJA,aAOI;AAAA,2BANJC,QAMI;AAAA,MANJA,QAMI,8BANO,CAMP;AAAA,yBALJC,MAKI;AAAA,MALJA,MAKI,4BALK,EAKL;AAAA,yBAJJC,MAII;AAAA,MAJJA,MAII,4BAJK,CAIL;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,iCAFJC,cAEI;AAAA,MAFJA,cAEI,oCAFa,KAEb;AAAA,MADJC,QACI,QADJA,QACI;AACJ,MAAMC,cAAc,GAAG,oBAAQ,YAAM;AACnC,QAAIC,KAAK,GAAGP,QAAZ;;AACA,QAAIA,QAAQ,GAAG,GAAf,EAAoB;AAClBO,MAAAA,KAAK,GAAG,GAAR;AACD;;AACD,QAAIP,QAAQ,GAAG,CAAf,EAAkB;AAChBO,MAAAA,KAAK,GAAG,CAAR;AACD;;AACD,WAAOA,KAAP;AACD,GATsB,EASpB,CAACP,QAAD,CAToB,CAAvB;AAWA,MAAMQ,gBAAgB,GAAG,oBAAQ;AAAA,WAAMP,MAAM,GAAGC,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ProgressRing/ProgressRing.tsx"],"names":["ProgressRing","backgroundColor","progressColor","progress","radius","stroke","className","showPercentage","fontSize","progressNumber","width","normalizedRadius","circumference","Math","PI","strokeDashoffsetOuter","strokeDashoffsetInner","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AAMA;;;;;;;;AAqBO,IAAMA,YAAoC,GAAG,SAAvCA,YAAuC,OAS9C;AAAA,MARJC,eAQI,QARJA,eAQI;AAAA,MAPJC,aAOI,QAPJA,aAOI;AAAA,2BANJC,QAMI;AAAA,MANJA,QAMI,8BANO,CAMP;AAAA,yBALJC,MAKI;AAAA,MALJA,MAKI,4BALK,EAKL;AAAA,yBAJJC,MAII;AAAA,MAJJA,MAII,4BAJK,CAIL;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,iCAFJC,cAEI;AAAA,MAFJA,cAEI,oCAFa,KAEb;AAAA,MADJC,QACI,QADJA,QACI;AACJ,MAAMC,cAAc,GAAG,oBAAQ,YAAM;AACnC,QAAIC,KAAK,GAAGP,QAAZ;;AACA,QAAIA,QAAQ,GAAG,GAAf,EAAoB;AAClBO,MAAAA,KAAK,GAAG,GAAR;AACD;;AACD,QAAIP,QAAQ,GAAG,CAAf,EAAkB;AAChBO,MAAAA,KAAK,GAAG,CAAR;AACD;;AACD,WAAOA,KAAP;AACD,GATsB,EASpB,CAACP,QAAD,CAToB,CAAvB;AAWA,MAAMQ,gBAAgB,GAAG,oBAAQ;AAAA,WAAMP,MAAM,GAAGC,MAAM,GAAG,CAAxB;AAAA,GAAR,EAAmC,CAACD,MAAD,EAASC,MAAT,CAAnC,CAAzB;AACA,MAAMO,aAAa,GAAG,oBACpB;AAAA,WAAMD,gBAAgB,GAAG,CAAnB,GAAuBE,IAAI,CAACC,EAAlC;AAAA,GADoB,EAEpB,CAACH,gBAAD,CAFoB,CAAtB;AAIA,MAAMI,qBAAqB,GAAG,oBAC5B;AAAA,WAAMH,aAAa,GAAI,CAAC,MAAMH,cAAP,IAAyB,GAA1B,GAAiCG,aAAvD;AAAA,GAD4B,EAE5B,CAACA,aAAD,EAAgBH,cAAhB,CAF4B,CAA9B;AAIA,MAAMO,qBAAqB,GAAG,oBAC5B;AAAA,WAAMJ,aAAa,GAAIH,cAAc,GAAG,GAAlB,GAAyBG,aAA/C;AAAA,GAD4B,EAE5B,CAACA,aAAD,EAAgBH,cAAhB,CAF4B,CAA9B;AAKA,sBACE,6BAAC,iBAAD;AACE,IAAA,MAAM,EAAEL,MAAM,GAAG,CADnB;AAEE,IAAA,KAAK,EAAEA,MAAM,GAAG,CAFlB;AAGE,IAAA,SAAS,EAAE,yBAAWE,SAAX;AAHb,kBAKE,6BAAC,8BAAD;AACE,IAAA,MAAM,EAAEL,eADV;AAEE,IAAA,iBAAiB,EAAE,CAACc,qBAFtB;AAGE,IAAA,WAAW,EAAEV,MAHf;AAIE,IAAA,eAAe,YAAKO,aAAL,cAAsBA,aAAtB,CAJjB;AAKE,IAAA,CAAC,EAAED,gBALL;AAME,IAAA,EAAE,EAAEP,MANN;AAOE,IAAA,EAAE,EAAEA;AAPN,IALF,eAcE,6BAAC,8BAAD;AACE,IAAA,MAAM,EAAEF,aADV;AAEE,IAAA,iBAAiB,EAAEc,qBAFrB;AAGE,IAAA,WAAW,EAAEX,MAHf;AAIE,IAAA,eAAe,YAAKO,aAAL,cAAsBA,aAAtB,CAJjB;AAKE,IAAA,CAAC,EAAED,gBALL;AAME,IAAA,EAAE,EAAEP,MANN;AAOE,IAAA,EAAE,EAAEA;AAPN,IAdF,EAuBGG,cAAc,gBACb,6BAAC,oCAAD;AACE,IAAA,MAAM,EAAEL,aADV;AAEE,IAAA,SAAS,EAAEM,QAFb;AAGE,IAAA,CAAC,EAAC,KAHJ;AAIE,IAAA,CAAC,EAAC,MAJJ;AAKE,IAAA,gBAAgB,EAAC,SALnB;AAME,IAAA,UAAU,EAAC;AANb,KAQGC,cARH,MADa,GAWX,IAlCN,CADF;AAsCD,CAzEM;;;AA2EPT,YAAY,CAACiB,WAAb,GAA2B,cAA3B","sourcesContent":["import React, { FC, useMemo } from \"react\";\nimport {\n StyledBackgroundCircle,\n StyledForegroundCircle,\n StyledSvg,\n StyledProgressRingPercentage,\n} from \"./Styles\";\nimport classNames from \"classnames\";\n\nexport interface IProgressRingProps {\n /** Progress prop can be number. */\n progress?: number;\n /** Custom classname for styling. */\n backgroundColor?: string;\n /** Custom classname for styling. */\n progressColor?: string;\n /** Custom classname for styling. */\n radius?: number;\n /** Custom classname for styling. */\n stroke?: number;\n /** Applies passed classes */\n className?: string;\n /** Should the percentage be displayed inside ring or not */\n showPercentage?: boolean;\n /** Size of displayed percentage */\n fontSize?: number;\n}\n\nexport const ProgressRing: FC<IProgressRingProps> = ({\n backgroundColor,\n progressColor,\n progress = 0,\n radius = 20,\n stroke = 3,\n className,\n showPercentage = false,\n fontSize,\n}) => {\n const progressNumber = useMemo(() => {\n let width = progress;\n if (progress > 100) {\n width = 100;\n }\n if (progress < 0) {\n width = 0;\n }\n return width;\n }, [progress]);\n\n const normalizedRadius = useMemo(() => radius - stroke / 2, [radius, stroke]);\n const circumference = useMemo(\n () => normalizedRadius * 2 * Math.PI,\n [normalizedRadius]\n );\n const strokeDashoffsetOuter = useMemo(\n () => circumference - ((100 - progressNumber) / 100) * circumference,\n [circumference, progressNumber]\n );\n const strokeDashoffsetInner = useMemo(\n () => circumference - (progressNumber / 100) * circumference,\n [circumference, progressNumber]\n );\n\n return (\n <StyledSvg\n height={radius * 2}\n width={radius * 2}\n className={classNames(className)}\n >\n <StyledBackgroundCircle\n $color={backgroundColor}\n $strokeDashOffset={-strokeDashoffsetOuter}\n strokeWidth={stroke}\n strokeDasharray={`${circumference} ${circumference}`}\n r={normalizedRadius}\n cx={radius}\n cy={radius}\n />\n <StyledForegroundCircle\n $color={progressColor}\n $strokeDashOffset={strokeDashoffsetInner}\n strokeWidth={stroke}\n strokeDasharray={`${circumference} ${circumference}`}\n r={normalizedRadius}\n cx={radius}\n cy={radius}\n />\n {showPercentage ? (\n <StyledProgressRingPercentage\n $color={progressColor}\n $fontSize={fontSize}\n x=\"50%\"\n y=\"-50%\"\n dominantBaseline=\"central\"\n textAnchor=\"middle\"\n >\n {progressNumber}%\n </StyledProgressRingPercentage>\n ) : null}\n </StyledSvg>\n );\n};\n\nProgressRing.displayName = \"ProgressRing\";\n"],"file":"ProgressRing.js"}
|
|
@@ -26,7 +26,7 @@ var StyledSelectTrigger = (0, _styledComponents.default)(_Trigger.Trigger).withC
|
|
|
26
26
|
}, function (_ref2) {
|
|
27
27
|
var $invalid = _ref2.$invalid,
|
|
28
28
|
disabled = _ref2.disabled;
|
|
29
|
-
return !$invalid && !disabled && (0, _styledComponents.css)(["&:hover{border-color:var(--color-primary-700);}"]);
|
|
29
|
+
return !$invalid && !disabled && (0, _styledComponents.css)(["&:hover,&:focus{border-color:var(--color-primary-700);}"]);
|
|
30
30
|
}, function (_ref3) {
|
|
31
31
|
var $invalid = _ref3.$invalid;
|
|
32
32
|
return $invalid && (0, _styledComponents.css)(["", " &:hover{", "}"], {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/SelectTrigger/Styles.ts"],"names":["StyledSelectTrigger","Trigger","disabled","css","$invalid","$size","displayName","StyledCaretIcon","CollapseExpandSingleIcon"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;;;;;AAGO,IAAMA,mBAAmB,GAAG,+BAAOC,gBAAP,CAAH;AAAA;AAAA;AAAA,yMAY5B;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,SACAA,QAAQ,QACRC,qBADQ,kCADR;AAAA,CAZ4B,EAmB5B;AAAA,MAAGC,QAAH,SAAGA,QAAH;AAAA,MAAaF,QAAb,SAAaA,QAAb;AAAA,SACA,CAACE,QAAD,IACA,CAACF,QADD,QAEAC,qBAFA,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/SelectTrigger/Styles.ts"],"names":["StyledSelectTrigger","Trigger","disabled","css","$invalid","$size","displayName","StyledCaretIcon","CollapseExpandSingleIcon"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;;;;;AAGO,IAAMA,mBAAmB,GAAG,+BAAOC,gBAAP,CAAH;AAAA;AAAA;AAAA,yMAY5B;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,SACAA,QAAQ,QACRC,qBADQ,kCADR;AAAA,CAZ4B,EAmB5B;AAAA,MAAGC,QAAH,SAAGA,QAAH;AAAA,MAAaF,QAAb,SAAaA,QAAb;AAAA,SACA,CAACE,QAAD,IACA,CAACF,QADD,QAEAC,qBAFA,8DADA;AAAA,CAnB4B,EA6B5B;AAAA,MAAGC,QAAH,SAAGA,QAAH;AAAA,SACAA,QAAQ,QACRD,qBADQ,0BAEF;AAAA;AAAA,GAFE,EAKA;AAAA;AAAA,GALA,CADR;AAAA,CA7B4B,EAuC5B;AAAA,MAAGE,KAAH,SAAGA,KAAH;AAAA,SACAA,KAAK,KAAK,OAAV,QACAF,qBADA,gDADA;AAAA,CAvC4B,EA8C5B;AAAA,MAAGE,KAAH,SAAGA,KAAH;AAAA,SACAA,KAAK,KAAK,SAAV,QACAF,qBADA,gDADA;AAAA,CA9C4B,EAqD1B;AAAA,MAAGE,KAAH,SAAGA,KAAH;AAAA,SACFA,KAAK,KAAK,KAAV,QACAF,qBADA,gDADE;AAAA,CArD0B,CAAzB;;AA6DPH,mBAAmB,CAACM,WAApB,GAAkC,qBAAlC;AAEO,IAAMC,eAAe,GAAG,+BAAOC,+BAAP,CAAH;AAAA;AAAA;AAAA,+DAArB;;AAMPD,eAAe,CAACD,WAAhB,GAA8B,iBAA9B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { CollapseExpandSingleIcon } from \"../Icons\";\nimport { Trigger } from \"../Trigger\";\nimport { Size } from \"./SelectTrigger\";\n\nexport const StyledSelectTrigger = styled(Trigger)<{\n $size?: Size;\n $invalid?: boolean;\n}>`\n display: flex;\n align-items: center;\n justify-content: space-between;\n border: 1px solid var(--color-theme-500);\n padding: 0 8px;\n width: 300px;\n transition: border-color 0.3s ease;\n\n ${({ disabled }) =>\n disabled &&\n css`\n opacity: 50%;\n cursor: default;\n `}\n\n ${({ $invalid, disabled }) =>\n !$invalid &&\n !disabled &&\n css`\n &:hover,\n &:focus {\n border-color: var(--color-primary-700);\n }\n `}\n\n ${({ $invalid }) =>\n $invalid &&\n css`\n ${tw`tw-border-alert`}\n\n &:hover {\n ${tw`tw-border-alert`}\n }\n `}\n\n ${({ $size }) =>\n $size === \"small\" &&\n css`\n height: 24px;\n border-radius: var(--ac-br-6);\n `}\n\n ${({ $size }) =>\n $size === \"regular\" &&\n css`\n height: 32px;\n border-radius: var(--ac-br-8);\n `}\n\n ${({ $size }) =>\n $size === \"big\" &&\n css`\n height: 40px;\n border-radius: var(--ac-br-8);\n `};\n`;\n\nStyledSelectTrigger.displayName = \"StyledSelectTrigger\";\n\nexport const StyledCaretIcon = styled(CollapseExpandSingleIcon)`\n transform: rotate(180deg);\n margin-left: 8px;\n flex-shrink: 0;\n`;\n\nStyledCaretIcon.displayName = \"StyledCaretIcon\";\n"],"file":"Styles.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SpinnerLoader.d.ts","sourceRoot":"","sources":["../../../../../src/components/Loaders/Spinner/SpinnerLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,MAAM,WAAW,kBAAkB;IAEjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,
|
|
1
|
+
{"version":3,"file":"SpinnerLoader.d.ts","sourceRoot":"","sources":["../../../../../src/components/Loaders/Spinner/SpinnerLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,MAAM,WAAW,kBAAkB;IAEjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,qBAAqB,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IAE9C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAED,eAAO,MAAM,aAAa,qOA+BzB,CAAC"}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["radius", "
|
|
3
|
+
var _excluded = ["radius", "stroke", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "rotateDurationInSeconds", "className"];
|
|
4
4
|
import React, { forwardRef } from "react";
|
|
5
5
|
import { StyledSpinnerLoader } from "./Styles";
|
|
6
6
|
export var SpinnerLoader = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
7
7
|
var _ref$radius = _ref.radius,
|
|
8
|
-
radius = _ref$radius === void 0 ?
|
|
9
|
-
_ref$
|
|
10
|
-
|
|
8
|
+
radius = _ref$radius === void 0 ? 10 : _ref$radius,
|
|
9
|
+
_ref$stroke = _ref.stroke,
|
|
10
|
+
stroke = _ref$stroke === void 0 ? 2 : _ref$stroke,
|
|
11
11
|
_ref$activeStrokeColo = _ref.activeStrokeColor,
|
|
12
|
-
activeStrokeColor = _ref$activeStrokeColo === void 0 ? "var(--color-
|
|
12
|
+
activeStrokeColor = _ref$activeStrokeColo === void 0 ? "var(--color-secondary)" : _ref$activeStrokeColo,
|
|
13
13
|
_ref$inactiveStrokeCo = _ref.inactiveStrokeColor,
|
|
14
|
-
inactiveStrokeColor = _ref$inactiveStrokeCo === void 0 ? "var(--color-theme-300)" : _ref$inactiveStrokeCo,
|
|
14
|
+
inactiveStrokeColor = _ref$inactiveStrokeCo === void 0 ? "var(--color-theme-transparent-300)" : _ref$inactiveStrokeCo,
|
|
15
15
|
_ref$activeColorPerce = _ref.activeColorPercentage,
|
|
16
16
|
activeColorPercentage = _ref$activeColorPerce === void 0 ? "25%" : _ref$activeColorPerce,
|
|
17
17
|
_ref$rotateDurationIn = _ref.rotateDurationInSeconds,
|
|
@@ -22,8 +22,8 @@ export var SpinnerLoader = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
22
22
|
return /*#__PURE__*/React.createElement(StyledSpinnerLoader, _extends({
|
|
23
23
|
ref: ref,
|
|
24
24
|
className: className,
|
|
25
|
-
$
|
|
26
|
-
$
|
|
25
|
+
$diameter: radius * 2,
|
|
26
|
+
$stroke: stroke,
|
|
27
27
|
$activeStrokeColor: activeStrokeColor,
|
|
28
28
|
$inactiveStrokeColor: inactiveStrokeColor,
|
|
29
29
|
$activeColorPercentage: activeColorPercentage,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/SpinnerLoader.tsx"],"names":["React","forwardRef","StyledSpinnerLoader","SpinnerLoader","ref","radius","
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/SpinnerLoader.tsx"],"names":["React","forwardRef","StyledSpinnerLoader","SpinnerLoader","ref","radius","stroke","activeStrokeColor","inactiveStrokeColor","activeColorPercentage","rotateDurationInSeconds","className","rest","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,mBAAT,QAAoC,UAApC;AAiBA,OAAO,IAAMC,aAAa,gBAAGF,UAAU,CAIrC,gBAWEG,GAXF,EAYK;AAAA,yBAVDC,MAUC;AAAA,MAVDA,MAUC,4BAVQ,EAUR;AAAA,yBATDC,MASC;AAAA,MATDA,MASC,4BATQ,CASR;AAAA,mCARDC,iBAQC;AAAA,MARDA,iBAQC,sCARmB,wBAQnB;AAAA,mCAPDC,mBAOC;AAAA,MAPDA,mBAOC,sCAPqB,oCAOrB;AAAA,mCANDC,qBAMC;AAAA,MANDA,qBAMC,sCANuB,KAMvB;AAAA,mCALDC,uBAKC;AAAA,MALDA,uBAKC,sCALyB,IAKzB;AAAA,MAJDC,SAIC,QAJDA,SAIC;AAAA,MAHEC,IAGF;;AACH,sBACE,oBAAC,mBAAD;AACE,IAAA,GAAG,EAAER,GADP;AAEE,IAAA,SAAS,EAAEO,SAFb;AAGE,IAAA,SAAS,EAAEN,MAAM,GAAG,CAHtB;AAIE,IAAA,OAAO,EAAEC,MAJX;AAKE,IAAA,kBAAkB,EAAEC,iBALtB;AAME,IAAA,oBAAoB,EAAEC,mBANxB;AAOE,IAAA,sBAAsB,EAAEC,qBAP1B;AAQE,IAAA,wBAAwB,EAAEC;AAR5B,KASME,IATN,EADF;AAaD,CA9BoC,CAAhC;AAiCPT,aAAa,CAACU,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { forwardRef } from \"react\";\nimport { StyledSpinnerLoader } from \"./Styles\";\n\nexport interface SpinnerLoaderProps {\n /** Loader circumference size */\n radius?: number;\n /** Stroke width of the loader */\n stroke?: number;\n /** Active color of spinning loader */\n activeStrokeColor?: string;\n /** Percentage of the circle which the active color takes */\n activeColorPercentage?: \"25%\" | \"50%\" | \"75%\";\n /** Inactive color of spinning loader */\n inactiveStrokeColor?: string;\n /** Rotate speed of animation in seconds */\n rotateDurationInSeconds?: number;\n}\n\nexport const SpinnerLoader = forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<\"div\"> & SpinnerLoaderProps\n>(\n (\n {\n radius = 10,\n stroke = 2,\n activeStrokeColor = \"var(--color-secondary)\",\n inactiveStrokeColor = \"var(--color-theme-transparent-300)\",\n activeColorPercentage = \"25%\",\n rotateDurationInSeconds = 0.75,\n className,\n ...rest\n },\n ref\n ) => {\n return (\n <StyledSpinnerLoader\n ref={ref}\n className={className}\n $diameter={radius * 2}\n $stroke={stroke}\n $activeStrokeColor={activeStrokeColor}\n $inactiveStrokeColor={inactiveStrokeColor}\n $activeColorPercentage={activeColorPercentage}\n $rotateDurationInSeconds={rotateDurationInSeconds}\n {...rest}\n />\n );\n }\n);\n\nSpinnerLoader.displayName = \"SpinnerLoader\";\n"],"file":"SpinnerLoader.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Loaders/Spinner/Styles.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,wBAAwB;IACvC,
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Loaders/Spinner/Styles.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,sBAAsB,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IAC9C,wBAAwB,EAAE,MAAM,CAAC;CAClC;AAED,eAAO,MAAM,mBAAmB,0FAqC/B,CAAC"}
|
|
@@ -5,12 +5,12 @@ export var StyledSpinnerLoader = styled.div.withConfig({
|
|
|
5
5
|
displayName: "Styles__StyledSpinnerLoader",
|
|
6
6
|
componentId: "sc-1ht53g9-0"
|
|
7
7
|
})(["", " border-radius:100%;", " ", " ", " ", ""], BoxSizingStyle, function (props) {
|
|
8
|
-
return css(["width:", "px;height:", "px;animation:", " ", "s infinite linear;"], props.$
|
|
8
|
+
return css(["width:", "px;height:", "px;animation:", " ", "s infinite linear;"], props.$diameter, props.$diameter, rotateAnimation, props.$rotateDurationInSeconds);
|
|
9
9
|
}, function (props) {
|
|
10
|
-
return props.$activeColorPercentage === "25%" && css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$
|
|
10
|
+
return props.$activeColorPercentage === "25%" && css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
|
|
11
11
|
}, function (props) {
|
|
12
|
-
return props.$activeColorPercentage === "50%" && css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$
|
|
12
|
+
return props.$activeColorPercentage === "50%" && css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
|
|
13
13
|
}, function (props) {
|
|
14
|
-
return props.$activeColorPercentage === "75%" && css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$
|
|
14
|
+
return props.$activeColorPercentage === "75%" && css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
|
|
15
15
|
});
|
|
16
16
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/Styles.ts"],"names":["styled","css","keyframes","BoxSizingStyle","rotateAnimation","StyledSpinnerLoader","div","props","$
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/Styles.ts"],"names":["styled","css","keyframes","BoxSizingStyle","rotateAnimation","StyledSpinnerLoader","div","props","$diameter","$rotateDurationInSeconds","$activeColorPercentage","$stroke","$inactiveStrokeColor","$activeStrokeColor"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,EAAsBC,SAAtB,QAAuC,mBAAvC;AACA,SAASC,cAAT,QAA+B,sBAA/B;AAEA,IAAMC,eAAe,GAAGF,SAAH,gEAArB;AAcA,OAAO,IAAMG,mBAAmB,GAAGL,MAAM,CAACM,GAAV;AAAA;AAAA;AAAA,oDAC5BH,cAD4B,EAG5B,UAACI,KAAD;AAAA,SACAN,GADA,uEAEWM,KAAK,CAACC,SAFjB,EAGYD,KAAK,CAACC,SAHlB,EAIeJ,eAJf,EAIkCG,KAAK,CAACE,wBAJxC;AAAA,CAH4B,EAW5B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,sBAAN,KAAiC,KAAjC,IACAT,GADA,iIAEkBM,KAAK,CAACI,OAFxB,EAE2CJ,KAAK,CAACK,oBAFjD,EAGmBL,KAAK,CAACI,OAHzB,EAG4CJ,KAAK,CAACK,oBAHlD,EAIiBL,KAAK,CAACI,OAJvB,EAI0CJ,KAAK,CAACK,oBAJhD,EAKgBL,KAAK,CAACI,OALtB,EAKyCJ,KAAK,CAACM,kBAL/C,CADA;AAAA,CAX4B,EAoB5B,UAACN,KAAD;AAAA,SACAA,KAAK,CAACG,sBAAN,KAAiC,KAAjC,IACAT,GADA,iIAEkBM,KAAK,CAACI,OAFxB,EAE2CJ,KAAK,CAACM,kBAFjD,EAGmBN,KAAK,CAACI,OAHzB,EAG4CJ,KAAK,CAACK,oBAHlD,EAIiBL,KAAK,CAACI,OAJvB,EAI0CJ,KAAK,CAACK,oBAJhD,EAKgBL,KAAK,CAACI,OALtB,EAKyCJ,KAAK,CAACM,kBAL/C,CADA;AAAA,CApB4B,EA6B1B,UAACN,KAAD;AAAA,SACFA,KAAK,CAACG,sBAAN,KAAiC,KAAjC,IACAT,GADA,iIAEkBM,KAAK,CAACI,OAFxB,EAE2CJ,KAAK,CAACM,kBAFjD,EAGmBN,KAAK,CAACI,OAHzB,EAG4CJ,KAAK,CAACM,kBAHlD,EAIiBN,KAAK,CAACI,OAJvB,EAI0CJ,KAAK,CAACK,oBAJhD,EAKgBL,KAAK,CAACI,OALtB,EAKyCJ,KAAK,CAACM,kBAL/C,CADE;AAAA,CA7B0B,CAAzB","sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\n\nconst rotateAnimation = keyframes`\n from { transform: rotate(0deg); }\n to { transform: rotate(359deg); }\n`;\n\nexport interface StyledSpinnerLoaderProps {\n $diameter: number;\n $stroke: number;\n $activeStrokeColor: string;\n $inactiveStrokeColor: string;\n $activeColorPercentage: \"25%\" | \"50%\" | \"75%\";\n $rotateDurationInSeconds: number;\n}\n\nexport const StyledSpinnerLoader = styled.div<StyledSpinnerLoaderProps>`\n ${BoxSizingStyle}\n border-radius: 100%;\n ${(props) =>\n css`\n width: ${props.$diameter}px;\n height: ${props.$diameter}px;\n animation: ${rotateAnimation} ${props.$rotateDurationInSeconds}s infinite\n linear;\n `}\n\n ${(props) =>\n props.$activeColorPercentage === \"25%\" &&\n css`\n border-right: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n border-bottom: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n border-left: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n border-top: ${props.$stroke}px solid ${props.$activeStrokeColor};\n `}\n\n ${(props) =>\n props.$activeColorPercentage === \"50%\" &&\n css`\n border-right: ${props.$stroke}px solid ${props.$activeStrokeColor};\n border-bottom: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n border-left: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n border-top: ${props.$stroke}px solid ${props.$activeStrokeColor};\n `}\n\n ${(props) =>\n props.$activeColorPercentage === \"75%\" &&\n css`\n border-right: ${props.$stroke}px solid ${props.$activeStrokeColor};\n border-bottom: ${props.$stroke}px solid ${props.$activeStrokeColor};\n border-left: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n border-top: ${props.$stroke}px solid ${props.$activeStrokeColor};\n `}\n`;\n"],"file":"Styles.js"}
|
|
@@ -28,7 +28,7 @@ export var ProgressRing = function ProgressRing(_ref) {
|
|
|
28
28
|
return width;
|
|
29
29
|
}, [progress]);
|
|
30
30
|
var normalizedRadius = useMemo(function () {
|
|
31
|
-
return radius - stroke;
|
|
31
|
+
return radius - stroke / 2;
|
|
32
32
|
}, [radius, stroke]);
|
|
33
33
|
var circumference = useMemo(function () {
|
|
34
34
|
return normalizedRadius * 2 * Math.PI;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ProgressRing/ProgressRing.tsx"],"names":["React","useMemo","StyledBackgroundCircle","StyledForegroundCircle","StyledSvg","StyledProgressRingPercentage","classNames","ProgressRing","backgroundColor","progressColor","progress","radius","stroke","className","showPercentage","fontSize","progressNumber","width","normalizedRadius","circumference","Math","PI","strokeDashoffsetOuter","strokeDashoffsetInner","displayName"],"mappings":"AAAA,OAAOA,KAAP,IAAoBC,OAApB,QAAmC,OAAnC;AACA,SACEC,sBADF,EAEEC,sBAFF,EAGEC,SAHF,EAIEC,4BAJF,QAKO,UALP;AAMA,OAAOC,UAAP,MAAuB,YAAvB;AAqBA,OAAO,IAAMC,YAAoC,GAAG,SAAvCA,YAAuC,OAS9C;AAAA,MARJC,eAQI,QARJA,eAQI;AAAA,MAPJC,aAOI,QAPJA,aAOI;AAAA,2BANJC,QAMI;AAAA,MANJA,QAMI,8BANO,CAMP;AAAA,yBALJC,MAKI;AAAA,MALJA,MAKI,4BALK,EAKL;AAAA,yBAJJC,MAII;AAAA,MAJJA,MAII,4BAJK,CAIL;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,iCAFJC,cAEI;AAAA,MAFJA,cAEI,oCAFa,KAEb;AAAA,MADJC,QACI,QADJA,QACI;AACJ,MAAMC,cAAc,GAAGf,OAAO,CAAC,YAAM;AACnC,QAAIgB,KAAK,GAAGP,QAAZ;;AACA,QAAIA,QAAQ,GAAG,GAAf,EAAoB;AAClBO,MAAAA,KAAK,GAAG,GAAR;AACD;;AACD,QAAIP,QAAQ,GAAG,CAAf,EAAkB;AAChBO,MAAAA,KAAK,GAAG,CAAR;AACD;;AACD,WAAOA,KAAP;AACD,GAT6B,EAS3B,CAACP,QAAD,CAT2B,CAA9B;AAWA,MAAMQ,gBAAgB,GAAGjB,OAAO,CAAC;AAAA,WAAMU,MAAM,GAAGC,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ProgressRing/ProgressRing.tsx"],"names":["React","useMemo","StyledBackgroundCircle","StyledForegroundCircle","StyledSvg","StyledProgressRingPercentage","classNames","ProgressRing","backgroundColor","progressColor","progress","radius","stroke","className","showPercentage","fontSize","progressNumber","width","normalizedRadius","circumference","Math","PI","strokeDashoffsetOuter","strokeDashoffsetInner","displayName"],"mappings":"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","sourcesContent":["import React, { FC, useMemo } from \"react\";\nimport {\n StyledBackgroundCircle,\n StyledForegroundCircle,\n StyledSvg,\n StyledProgressRingPercentage,\n} from \"./Styles\";\nimport classNames from \"classnames\";\n\nexport interface IProgressRingProps {\n /** Progress prop can be number. */\n progress?: number;\n /** Custom classname for styling. */\n backgroundColor?: string;\n /** Custom classname for styling. */\n progressColor?: string;\n /** Custom classname for styling. */\n radius?: number;\n /** Custom classname for styling. */\n stroke?: number;\n /** Applies passed classes */\n className?: string;\n /** Should the percentage be displayed inside ring or not */\n showPercentage?: boolean;\n /** Size of displayed percentage */\n fontSize?: number;\n}\n\nexport const ProgressRing: FC<IProgressRingProps> = ({\n backgroundColor,\n progressColor,\n progress = 0,\n radius = 20,\n stroke = 3,\n className,\n showPercentage = false,\n fontSize,\n}) => {\n const progressNumber = useMemo(() => {\n let width = progress;\n if (progress > 100) {\n width = 100;\n }\n if (progress < 0) {\n width = 0;\n }\n return width;\n }, [progress]);\n\n const normalizedRadius = useMemo(() => radius - stroke / 2, [radius, stroke]);\n const circumference = useMemo(\n () => normalizedRadius * 2 * Math.PI,\n [normalizedRadius]\n );\n const strokeDashoffsetOuter = useMemo(\n () => circumference - ((100 - progressNumber) / 100) * circumference,\n [circumference, progressNumber]\n );\n const strokeDashoffsetInner = useMemo(\n () => circumference - (progressNumber / 100) * circumference,\n [circumference, progressNumber]\n );\n\n return (\n <StyledSvg\n height={radius * 2}\n width={radius * 2}\n className={classNames(className)}\n >\n <StyledBackgroundCircle\n $color={backgroundColor}\n $strokeDashOffset={-strokeDashoffsetOuter}\n strokeWidth={stroke}\n strokeDasharray={`${circumference} ${circumference}`}\n r={normalizedRadius}\n cx={radius}\n cy={radius}\n />\n <StyledForegroundCircle\n $color={progressColor}\n $strokeDashOffset={strokeDashoffsetInner}\n strokeWidth={stroke}\n strokeDasharray={`${circumference} ${circumference}`}\n r={normalizedRadius}\n cx={radius}\n cy={radius}\n />\n {showPercentage ? (\n <StyledProgressRingPercentage\n $color={progressColor}\n $fontSize={fontSize}\n x=\"50%\"\n y=\"-50%\"\n dominantBaseline=\"central\"\n textAnchor=\"middle\"\n >\n {progressNumber}%\n </StyledProgressRingPercentage>\n ) : null}\n </StyledSvg>\n );\n};\n\nProgressRing.displayName = \"ProgressRing\";\n"],"file":"ProgressRing.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectTrigger/Styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,eAAO,MAAM,mBAAmB;;;
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectTrigger/Styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,eAAO,MAAM,mBAAmB;;;SA2D/B,CAAC;AAIF,eAAO,MAAM,eAAe,wqPAI3B,CAAC"}
|
|
@@ -10,7 +10,7 @@ export var StyledSelectTrigger = styled(Trigger).withConfig({
|
|
|
10
10
|
}, function (_ref2) {
|
|
11
11
|
var $invalid = _ref2.$invalid,
|
|
12
12
|
disabled = _ref2.disabled;
|
|
13
|
-
return !$invalid && !disabled && css(["&:hover{border-color:var(--color-primary-700);}"]);
|
|
13
|
+
return !$invalid && !disabled && css(["&:hover,&:focus{border-color:var(--color-primary-700);}"]);
|
|
14
14
|
}, function (_ref3) {
|
|
15
15
|
var $invalid = _ref3.$invalid;
|
|
16
16
|
return $invalid && css(["", " &:hover{", "}"], {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/SelectTrigger/Styles.ts"],"names":["styled","css","CollapseExpandSingleIcon","Trigger","StyledSelectTrigger","disabled","$invalid","$size","displayName","StyledCaretIcon"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAEA,SAASC,wBAAT,QAAyC,UAAzC;AACA,SAASC,OAAT,QAAwB,YAAxB;AAGA,OAAO,IAAMC,mBAAmB,GAAGJ,MAAM,CAACG,OAAD,CAAT;AAAA;AAAA;AAAA,yMAY5B;AAAA,MAAGE,QAAH,QAAGA,QAAH;AAAA,SACAA,QAAQ,IACRJ,GADQ,iCADR;AAAA,CAZ4B,EAmB5B;AAAA,MAAGK,QAAH,SAAGA,QAAH;AAAA,MAAaD,QAAb,SAAaA,QAAb;AAAA,SACA,CAACC,QAAD,IACA,CAACD,QADD,IAEAJ,GAFA,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/SelectTrigger/Styles.ts"],"names":["styled","css","CollapseExpandSingleIcon","Trigger","StyledSelectTrigger","disabled","$invalid","$size","displayName","StyledCaretIcon"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAEA,SAASC,wBAAT,QAAyC,UAAzC;AACA,SAASC,OAAT,QAAwB,YAAxB;AAGA,OAAO,IAAMC,mBAAmB,GAAGJ,MAAM,CAACG,OAAD,CAAT;AAAA;AAAA;AAAA,yMAY5B;AAAA,MAAGE,QAAH,QAAGA,QAAH;AAAA,SACAA,QAAQ,IACRJ,GADQ,iCADR;AAAA,CAZ4B,EAmB5B;AAAA,MAAGK,QAAH,SAAGA,QAAH;AAAA,MAAaD,QAAb,SAAaA,QAAb;AAAA,SACA,CAACC,QAAD,IACA,CAACD,QADD,IAEAJ,GAFA,6DADA;AAAA,CAnB4B,EA6B5B;AAAA,MAAGK,QAAH,SAAGA,QAAH;AAAA,SACAA,QAAQ,IACRL,GADQ,yBAEF;AAAA;AAAA,GAFE,EAKA;AAAA;AAAA,GALA,CADR;AAAA,CA7B4B,EAuC5B;AAAA,MAAGM,KAAH,SAAGA,KAAH;AAAA,SACAA,KAAK,KAAK,OAAV,IACAN,GADA,+CADA;AAAA,CAvC4B,EA8C5B;AAAA,MAAGM,KAAH,SAAGA,KAAH;AAAA,SACAA,KAAK,KAAK,SAAV,IACAN,GADA,+CADA;AAAA,CA9C4B,EAqD1B;AAAA,MAAGM,KAAH,SAAGA,KAAH;AAAA,SACFA,KAAK,KAAK,KAAV,IACAN,GADA,+CADE;AAAA,CArD0B,CAAzB;AA6DPG,mBAAmB,CAACI,WAApB,GAAkC,qBAAlC;AAEA,OAAO,IAAMC,eAAe,GAAGT,MAAM,CAACE,wBAAD,CAAT;AAAA;AAAA;AAAA,+DAArB;AAMPO,eAAe,CAACD,WAAhB,GAA8B,iBAA9B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { CollapseExpandSingleIcon } from \"../Icons\";\nimport { Trigger } from \"../Trigger\";\nimport { Size } from \"./SelectTrigger\";\n\nexport const StyledSelectTrigger = styled(Trigger)<{\n $size?: Size;\n $invalid?: boolean;\n}>`\n display: flex;\n align-items: center;\n justify-content: space-between;\n border: 1px solid var(--color-theme-500);\n padding: 0 8px;\n width: 300px;\n transition: border-color 0.3s ease;\n\n ${({ disabled }) =>\n disabled &&\n css`\n opacity: 50%;\n cursor: default;\n `}\n\n ${({ $invalid, disabled }) =>\n !$invalid &&\n !disabled &&\n css`\n &:hover,\n &:focus {\n border-color: var(--color-primary-700);\n }\n `}\n\n ${({ $invalid }) =>\n $invalid &&\n css`\n ${tw`tw-border-alert`}\n\n &:hover {\n ${tw`tw-border-alert`}\n }\n `}\n\n ${({ $size }) =>\n $size === \"small\" &&\n css`\n height: 24px;\n border-radius: var(--ac-br-6);\n `}\n\n ${({ $size }) =>\n $size === \"regular\" &&\n css`\n height: 32px;\n border-radius: var(--ac-br-8);\n `}\n\n ${({ $size }) =>\n $size === \"big\" &&\n css`\n height: 40px;\n border-radius: var(--ac-br-8);\n `};\n`;\n\nStyledSelectTrigger.displayName = \"StyledSelectTrigger\";\n\nexport const StyledCaretIcon = styled(CollapseExpandSingleIcon)`\n transform: rotate(180deg);\n margin-left: 8px;\n flex-shrink: 0;\n`;\n\nStyledCaretIcon.displayName = \"StyledCaretIcon\";\n"],"file":"Styles.js"}
|
package/dist/index.js
CHANGED
|
@@ -6188,25 +6188,25 @@
|
|
|
6188
6188
|
displayName: "Styles__StyledSpinnerLoader",
|
|
6189
6189
|
componentId: "sc-1ht53g9-0"
|
|
6190
6190
|
})(["", " border-radius:100%;", " ", " ", " ", ""], BoxSizingStyle, function (props) {
|
|
6191
|
-
return styled.css(["width:", "px;height:", "px;animation:", " ", "s infinite linear;"], props.$
|
|
6191
|
+
return styled.css(["width:", "px;height:", "px;animation:", " ", "s infinite linear;"], props.$diameter, props.$diameter, rotateAnimation, props.$rotateDurationInSeconds);
|
|
6192
6192
|
}, function (props) {
|
|
6193
|
-
return props.$activeColorPercentage === "25%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$
|
|
6193
|
+
return props.$activeColorPercentage === "25%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
|
|
6194
6194
|
}, function (props) {
|
|
6195
|
-
return props.$activeColorPercentage === "50%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$
|
|
6195
|
+
return props.$activeColorPercentage === "50%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
|
|
6196
6196
|
}, function (props) {
|
|
6197
|
-
return props.$activeColorPercentage === "75%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$
|
|
6197
|
+
return props.$activeColorPercentage === "75%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
|
|
6198
6198
|
});
|
|
6199
6199
|
|
|
6200
|
-
var _excluded$z = ["radius", "
|
|
6200
|
+
var _excluded$z = ["radius", "stroke", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "rotateDurationInSeconds", "className"];
|
|
6201
6201
|
var SpinnerLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
6202
6202
|
var _ref$radius = _ref.radius,
|
|
6203
|
-
radius = _ref$radius === void 0 ?
|
|
6204
|
-
_ref$
|
|
6205
|
-
|
|
6203
|
+
radius = _ref$radius === void 0 ? 10 : _ref$radius,
|
|
6204
|
+
_ref$stroke = _ref.stroke,
|
|
6205
|
+
stroke = _ref$stroke === void 0 ? 2 : _ref$stroke,
|
|
6206
6206
|
_ref$activeStrokeColo = _ref.activeStrokeColor,
|
|
6207
|
-
activeStrokeColor = _ref$activeStrokeColo === void 0 ? "var(--color-
|
|
6207
|
+
activeStrokeColor = _ref$activeStrokeColo === void 0 ? "var(--color-secondary)" : _ref$activeStrokeColo,
|
|
6208
6208
|
_ref$inactiveStrokeCo = _ref.inactiveStrokeColor,
|
|
6209
|
-
inactiveStrokeColor = _ref$inactiveStrokeCo === void 0 ? "var(--color-theme-300)" : _ref$inactiveStrokeCo,
|
|
6209
|
+
inactiveStrokeColor = _ref$inactiveStrokeCo === void 0 ? "var(--color-theme-transparent-300)" : _ref$inactiveStrokeCo,
|
|
6210
6210
|
_ref$activeColorPerce = _ref.activeColorPercentage,
|
|
6211
6211
|
activeColorPercentage = _ref$activeColorPerce === void 0 ? "25%" : _ref$activeColorPerce,
|
|
6212
6212
|
_ref$rotateDurationIn = _ref.rotateDurationInSeconds,
|
|
@@ -6217,8 +6217,8 @@
|
|
|
6217
6217
|
return /*#__PURE__*/React__default["default"].createElement(StyledSpinnerLoader, _extends({
|
|
6218
6218
|
ref: ref,
|
|
6219
6219
|
className: className,
|
|
6220
|
-
$
|
|
6221
|
-
$
|
|
6220
|
+
$diameter: radius * 2,
|
|
6221
|
+
$stroke: stroke,
|
|
6222
6222
|
$activeStrokeColor: activeStrokeColor,
|
|
6223
6223
|
$inactiveStrokeColor: inactiveStrokeColor,
|
|
6224
6224
|
$activeColorPercentage: activeColorPercentage,
|
|
@@ -10262,7 +10262,7 @@
|
|
|
10262
10262
|
}, function (_ref2) {
|
|
10263
10263
|
var $invalid = _ref2.$invalid,
|
|
10264
10264
|
disabled = _ref2.disabled;
|
|
10265
|
-
return !$invalid && !disabled && styled.css(["&:hover{border-color:var(--color-primary-700);}"]);
|
|
10265
|
+
return !$invalid && !disabled && styled.css(["&:hover,&:focus{border-color:var(--color-primary-700);}"]);
|
|
10266
10266
|
}, function (_ref3) {
|
|
10267
10267
|
var $invalid = _ref3.$invalid;
|
|
10268
10268
|
return $invalid && styled.css(["", " &:hover{", "}"], {
|
|
@@ -11044,7 +11044,7 @@
|
|
|
11044
11044
|
return width;
|
|
11045
11045
|
}, [progress]);
|
|
11046
11046
|
var normalizedRadius = React.useMemo(function () {
|
|
11047
|
-
return radius - stroke;
|
|
11047
|
+
return radius - stroke / 2;
|
|
11048
11048
|
}, [radius, stroke]);
|
|
11049
11049
|
var circumference = React.useMemo(function () {
|
|
11050
11050
|
return normalizedRadius * 2 * Math.PI;
|