@mirohq/design-system-spinner 1.1.24 → 1.1.26
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/main.js +2 -5
- package/dist/main.js.map +1 -1
- package/dist/module.js +2 -5
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +13 -0
- package/package.json +3 -3
package/dist/main.js
CHANGED
|
@@ -30,16 +30,13 @@ const strokeAnimation = designSystemStitches.keyframes({
|
|
|
30
30
|
});
|
|
31
31
|
const StyledSpinner = designSystemStitches.styled(designSystemPrimitive.Primitive.svg, {
|
|
32
32
|
display: "block",
|
|
33
|
-
animation: "
|
|
33
|
+
animation: "".concat(rotateAnimation, " 2s linear infinite"),
|
|
34
34
|
transformOrigin: "center center",
|
|
35
35
|
stroke: "currentColor",
|
|
36
|
-
"@media (prefers-reduced-motion: no-preference)": {
|
|
37
|
-
animationName: rotateAnimation
|
|
38
|
-
},
|
|
39
36
|
"& [id=circle]": {
|
|
40
37
|
fill: "none",
|
|
41
38
|
strokeMiterlimit: "10",
|
|
42
|
-
strokeDasharray: "
|
|
39
|
+
strokeDasharray: "89, 200",
|
|
43
40
|
strokeDashoffset: 0,
|
|
44
41
|
animation: "animate 1.5s ease-in-out infinite",
|
|
45
42
|
strokeLinecap: "round",
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/spinner.styled.tsx","../src/spinner.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled, keyframes } from '@mirohq/design-system-stitches'\n\nconst rotateAnimation = keyframes({\n '100%': { transform: 'rotate(360deg)' },\n})\n\nconst strokeAnimation = keyframes({\n '0%': {\n strokeDasharray: '1, 200',\n strokeDashoffset: 0,\n },\n '50%': {\n strokeDasharray: '89, 200',\n strokeDashoffset: '-35px',\n },\n '100%': {\n strokeDasharray: '89, 200',\n strokeDashoffset: '-124px',\n },\n})\n\nexport const StyledSpinner = styled(Primitive.svg, {\n display: 'block',\n animation:
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/spinner.styled.tsx","../src/spinner.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled, keyframes } from '@mirohq/design-system-stitches'\n\nconst rotateAnimation = keyframes({\n '100%': { transform: 'rotate(360deg)' },\n})\n\nconst strokeAnimation = keyframes({\n '0%': {\n strokeDasharray: '1, 200',\n strokeDashoffset: 0,\n },\n '50%': {\n strokeDasharray: '89, 200',\n strokeDashoffset: '-35px',\n },\n '100%': {\n strokeDasharray: '89, 200',\n strokeDashoffset: '-124px',\n },\n})\n\nexport const StyledSpinner = styled(Primitive.svg, {\n display: 'block',\n animation: `${rotateAnimation} 2s linear infinite`,\n transformOrigin: 'center center',\n stroke: 'currentColor',\n '& [id=circle]': {\n fill: 'none',\n strokeMiterlimit: '10',\n strokeDasharray: '89, 200',\n strokeDashoffset: 0,\n animation: 'animate 1.5s ease-in-out infinite',\n strokeLinecap: 'round',\n '@media (prefers-reduced-motion: no-preference)': {\n animationName: strokeAnimation,\n },\n },\n variants: {\n size: {\n small: {\n width: '$4',\n height: '$4',\n '& [id=circle]': {\n strokeWidth: '6px',\n },\n },\n medium: {\n width: '$6',\n height: '$6',\n '& [id=circle]': {\n strokeWidth: '4px',\n },\n },\n },\n },\n})\n\nexport type StyledSpinnerProps = ComponentPropsWithRef<typeof StyledSpinner>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledSpinner } from './spinner.styled'\nimport type { StyledSpinnerProps } from './spinner.styled'\n\nexport interface SpinnerProps extends StyledSpinnerProps {\n /**\n * The size of the spinner.\n */\n size?: StyledSpinnerProps['size']\n}\n\nexport const Spinner = React.forwardRef<\n ElementRef<typeof StyledSpinner>,\n SpinnerProps\n>(({ size = 'medium', ...restProps }, forwardRef) => (\n <StyledSpinner\n {...restProps}\n viewBox='25 25 50 50'\n size={size}\n ref={forwardRef}\n >\n <circle id='circle' cx='50' cy='50' r='20' />\n </StyledSpinner>\n))\n"],"names":["keyframes","styled","Primitive","React","jsx"],"mappings":";;;;;;;;;;;;;AAIA,MAAM,kBAAkBA,8BAAU,CAAA;AAAA,EAChC,MAAA,EAAQ,EAAE,SAAA,EAAW,gBAAiB,EAAA;AACxC,CAAC,CAAA,CAAA;AAED,MAAM,kBAAkBA,8BAAU,CAAA;AAAA,EAChC,IAAM,EAAA;AAAA,IACJ,eAAiB,EAAA,QAAA;AAAA,IACjB,gBAAkB,EAAA,CAAA;AAAA,GACpB;AAAA,EACA,KAAO,EAAA;AAAA,IACL,eAAiB,EAAA,SAAA;AAAA,IACjB,gBAAkB,EAAA,OAAA;AAAA,GACpB;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,eAAiB,EAAA,SAAA;AAAA,IACjB,gBAAkB,EAAA,QAAA;AAAA,GACpB;AACF,CAAC,CAAA,CAAA;AAEY,MAAA,aAAA,GAAgBC,2BAAO,CAAAC,+BAAA,CAAU,GAAK,EAAA;AAAA,EACjD,OAAS,EAAA,OAAA;AAAA,EACT,SAAA,EAAW,GAAG,MAAe,CAAA,eAAA,EAAA,qBAAA,CAAA;AAAA,EAC7B,eAAiB,EAAA,eAAA;AAAA,EACjB,MAAQ,EAAA,cAAA;AAAA,EACR,eAAiB,EAAA;AAAA,IACf,IAAM,EAAA,MAAA;AAAA,IACN,gBAAkB,EAAA,IAAA;AAAA,IAClB,eAAiB,EAAA,SAAA;AAAA,IACjB,gBAAkB,EAAA,CAAA;AAAA,IAClB,SAAW,EAAA,mCAAA;AAAA,IACX,aAAe,EAAA,OAAA;AAAA,IACf,gDAAkD,EAAA;AAAA,MAChD,aAAe,EAAA,eAAA;AAAA,KACjB;AAAA,GACF;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,KAAO,EAAA;AAAA,QACL,KAAO,EAAA,IAAA;AAAA,QACP,MAAQ,EAAA,IAAA;AAAA,QACR,eAAiB,EAAA;AAAA,UACf,WAAa,EAAA,KAAA;AAAA,SACf;AAAA,OACF;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,KAAO,EAAA,IAAA;AAAA,QACP,MAAQ,EAAA,IAAA;AAAA,QACR,eAAiB,EAAA;AAAA,UACf,WAAa,EAAA,KAAA;AAAA,SACf;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;AC5CY,MAAA,OAAA,GAAUC,yBAAM,CAAA,UAAA,CAG3B,CAAC,EAAE,OAAO,QAAU,EAAA,GAAG,SAAU,EAAA,EAAG,UACpC,qBAAAC,cAAA;AAAA,EAAC,aAAA;AAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,OAAQ,EAAA,aAAA;AAAA,IACR,IAAA;AAAA,IACA,GAAK,EAAA,UAAA;AAAA,IAEL,QAAA,kBAAAA,cAAA,CAAC,YAAO,EAAG,EAAA,QAAA,EAAS,IAAG,IAAK,EAAA,EAAA,EAAG,IAAK,EAAA,CAAA,EAAE,IAAK,EAAA,CAAA;AAAA,GAAA;AAC7C,CACD;;;;"}
|
package/dist/module.js
CHANGED
|
@@ -22,16 +22,13 @@ const strokeAnimation = keyframes({
|
|
|
22
22
|
});
|
|
23
23
|
const StyledSpinner = styled(Primitive.svg, {
|
|
24
24
|
display: "block",
|
|
25
|
-
animation: "
|
|
25
|
+
animation: "".concat(rotateAnimation, " 2s linear infinite"),
|
|
26
26
|
transformOrigin: "center center",
|
|
27
27
|
stroke: "currentColor",
|
|
28
|
-
"@media (prefers-reduced-motion: no-preference)": {
|
|
29
|
-
animationName: rotateAnimation
|
|
30
|
-
},
|
|
31
28
|
"& [id=circle]": {
|
|
32
29
|
fill: "none",
|
|
33
30
|
strokeMiterlimit: "10",
|
|
34
|
-
strokeDasharray: "
|
|
31
|
+
strokeDasharray: "89, 200",
|
|
35
32
|
strokeDashoffset: 0,
|
|
36
33
|
animation: "animate 1.5s ease-in-out infinite",
|
|
37
34
|
strokeLinecap: "round",
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/spinner.styled.tsx","../src/spinner.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled, keyframes } from '@mirohq/design-system-stitches'\n\nconst rotateAnimation = keyframes({\n '100%': { transform: 'rotate(360deg)' },\n})\n\nconst strokeAnimation = keyframes({\n '0%': {\n strokeDasharray: '1, 200',\n strokeDashoffset: 0,\n },\n '50%': {\n strokeDasharray: '89, 200',\n strokeDashoffset: '-35px',\n },\n '100%': {\n strokeDasharray: '89, 200',\n strokeDashoffset: '-124px',\n },\n})\n\nexport const StyledSpinner = styled(Primitive.svg, {\n display: 'block',\n animation:
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/spinner.styled.tsx","../src/spinner.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled, keyframes } from '@mirohq/design-system-stitches'\n\nconst rotateAnimation = keyframes({\n '100%': { transform: 'rotate(360deg)' },\n})\n\nconst strokeAnimation = keyframes({\n '0%': {\n strokeDasharray: '1, 200',\n strokeDashoffset: 0,\n },\n '50%': {\n strokeDasharray: '89, 200',\n strokeDashoffset: '-35px',\n },\n '100%': {\n strokeDasharray: '89, 200',\n strokeDashoffset: '-124px',\n },\n})\n\nexport const StyledSpinner = styled(Primitive.svg, {\n display: 'block',\n animation: `${rotateAnimation} 2s linear infinite`,\n transformOrigin: 'center center',\n stroke: 'currentColor',\n '& [id=circle]': {\n fill: 'none',\n strokeMiterlimit: '10',\n strokeDasharray: '89, 200',\n strokeDashoffset: 0,\n animation: 'animate 1.5s ease-in-out infinite',\n strokeLinecap: 'round',\n '@media (prefers-reduced-motion: no-preference)': {\n animationName: strokeAnimation,\n },\n },\n variants: {\n size: {\n small: {\n width: '$4',\n height: '$4',\n '& [id=circle]': {\n strokeWidth: '6px',\n },\n },\n medium: {\n width: '$6',\n height: '$6',\n '& [id=circle]': {\n strokeWidth: '4px',\n },\n },\n },\n },\n})\n\nexport type StyledSpinnerProps = ComponentPropsWithRef<typeof StyledSpinner>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledSpinner } from './spinner.styled'\nimport type { StyledSpinnerProps } from './spinner.styled'\n\nexport interface SpinnerProps extends StyledSpinnerProps {\n /**\n * The size of the spinner.\n */\n size?: StyledSpinnerProps['size']\n}\n\nexport const Spinner = React.forwardRef<\n ElementRef<typeof StyledSpinner>,\n SpinnerProps\n>(({ size = 'medium', ...restProps }, forwardRef) => (\n <StyledSpinner\n {...restProps}\n viewBox='25 25 50 50'\n size={size}\n ref={forwardRef}\n >\n <circle id='circle' cx='50' cy='50' r='20' />\n </StyledSpinner>\n))\n"],"names":[],"mappings":";;;;;AAIA,MAAM,kBAAkB,SAAU,CAAA;AAAA,EAChC,MAAA,EAAQ,EAAE,SAAA,EAAW,gBAAiB,EAAA;AACxC,CAAC,CAAA,CAAA;AAED,MAAM,kBAAkB,SAAU,CAAA;AAAA,EAChC,IAAM,EAAA;AAAA,IACJ,eAAiB,EAAA,QAAA;AAAA,IACjB,gBAAkB,EAAA,CAAA;AAAA,GACpB;AAAA,EACA,KAAO,EAAA;AAAA,IACL,eAAiB,EAAA,SAAA;AAAA,IACjB,gBAAkB,EAAA,OAAA;AAAA,GACpB;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,eAAiB,EAAA,SAAA;AAAA,IACjB,gBAAkB,EAAA,QAAA;AAAA,GACpB;AACF,CAAC,CAAA,CAAA;AAEY,MAAA,aAAA,GAAgB,MAAO,CAAA,SAAA,CAAU,GAAK,EAAA;AAAA,EACjD,OAAS,EAAA,OAAA;AAAA,EACT,SAAA,EAAW,GAAG,MAAe,CAAA,eAAA,EAAA,qBAAA,CAAA;AAAA,EAC7B,eAAiB,EAAA,eAAA;AAAA,EACjB,MAAQ,EAAA,cAAA;AAAA,EACR,eAAiB,EAAA;AAAA,IACf,IAAM,EAAA,MAAA;AAAA,IACN,gBAAkB,EAAA,IAAA;AAAA,IAClB,eAAiB,EAAA,SAAA;AAAA,IACjB,gBAAkB,EAAA,CAAA;AAAA,IAClB,SAAW,EAAA,mCAAA;AAAA,IACX,aAAe,EAAA,OAAA;AAAA,IACf,gDAAkD,EAAA;AAAA,MAChD,aAAe,EAAA,eAAA;AAAA,KACjB;AAAA,GACF;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,KAAO,EAAA;AAAA,QACL,KAAO,EAAA,IAAA;AAAA,QACP,MAAQ,EAAA,IAAA;AAAA,QACR,eAAiB,EAAA;AAAA,UACf,WAAa,EAAA,KAAA;AAAA,SACf;AAAA,OACF;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,KAAO,EAAA,IAAA;AAAA,QACP,MAAQ,EAAA,IAAA;AAAA,QACR,eAAiB,EAAA;AAAA,UACf,WAAa,EAAA,KAAA;AAAA,SACf;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;AC5CY,MAAA,OAAA,GAAU,KAAM,CAAA,UAAA,CAG3B,CAAC,EAAE,OAAO,QAAU,EAAA,GAAG,SAAU,EAAA,EAAG,UACpC,qBAAA,GAAA;AAAA,EAAC,aAAA;AAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,OAAQ,EAAA,aAAA;AAAA,IACR,IAAA;AAAA,IACA,GAAK,EAAA,UAAA;AAAA,IAEL,QAAA,kBAAA,GAAA,CAAC,YAAO,EAAG,EAAA,QAAA,EAAS,IAAG,IAAK,EAAA,EAAA,EAAG,IAAK,EAAA,CAAA,EAAE,IAAK,EAAA,CAAA;AAAA,GAAA;AAC7C,CACD;;;;"}
|
package/dist/types.d.ts
CHANGED
|
@@ -123,6 +123,9 @@ declare const StyledSpinner: react.ForwardRefExoticComponent<Omit<Omit<{
|
|
|
123
123
|
"background-primary-subtle-pressed-hover"?: any;
|
|
124
124
|
"background-primary-subtle-selected"?: any;
|
|
125
125
|
"background-success"?: any;
|
|
126
|
+
"background-success-prominent"?: any;
|
|
127
|
+
"background-success-prominent-active"?: any;
|
|
128
|
+
"background-success-prominent-hover"?: any;
|
|
126
129
|
"background-warning-prominent"?: any;
|
|
127
130
|
"background-warning-subtle"?: any;
|
|
128
131
|
"border-danger"?: any;
|
|
@@ -151,6 +154,8 @@ declare const StyledSpinner: react.ForwardRefExoticComponent<Omit<Omit<{
|
|
|
151
154
|
"border-primary-hover"?: any;
|
|
152
155
|
"border-primary-inverted"?: any;
|
|
153
156
|
"border-success"?: any;
|
|
157
|
+
"border-success-active"?: any;
|
|
158
|
+
"border-success-hover"?: any;
|
|
154
159
|
"border-warning"?: any;
|
|
155
160
|
"icon-danger"?: any;
|
|
156
161
|
"icon-danger-active"?: any;
|
|
@@ -170,9 +175,12 @@ declare const StyledSpinner: react.ForwardRefExoticComponent<Omit<Omit<{
|
|
|
170
175
|
"icon-primary-inverted"?: any;
|
|
171
176
|
"icon-primary-selected"?: any;
|
|
172
177
|
"icon-success"?: any;
|
|
178
|
+
"icon-success-active"?: any;
|
|
179
|
+
"icon-success-hover"?: any;
|
|
173
180
|
"icon-success-inverted"?: any;
|
|
174
181
|
"icon-warning"?: any;
|
|
175
182
|
"icon-warning-prominent"?: any;
|
|
183
|
+
"icon-warning-subtle"?: any;
|
|
176
184
|
"text-danger"?: any;
|
|
177
185
|
"text-danger-active"?: any;
|
|
178
186
|
"text-danger-hover"?: any;
|
|
@@ -194,7 +202,11 @@ declare const StyledSpinner: react.ForwardRefExoticComponent<Omit<Omit<{
|
|
|
194
202
|
"text-primary-inverted-subtle"?: any;
|
|
195
203
|
"text-primary-selected"?: any;
|
|
196
204
|
"text-success"?: any;
|
|
205
|
+
"text-success-active"?: any;
|
|
206
|
+
"text-success-hover"?: any;
|
|
207
|
+
"text-success-inverted"?: any;
|
|
197
208
|
"text-warning"?: any;
|
|
209
|
+
"text-warning-subtle"?: any;
|
|
198
210
|
};
|
|
199
211
|
'font-sizes': {
|
|
200
212
|
readonly 150: "0.75rem";
|
|
@@ -237,6 +249,7 @@ declare const StyledSpinner: react.ForwardRefExoticComponent<Omit<Omit<{
|
|
|
237
249
|
};
|
|
238
250
|
space: {
|
|
239
251
|
readonly 0: "0px";
|
|
252
|
+
readonly 25: "2px";
|
|
240
253
|
readonly 50: "4px";
|
|
241
254
|
readonly 100: "8px";
|
|
242
255
|
readonly 150: "12px";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-spinner",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.26",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@mirohq/design-system-primitive": "^1.1.1",
|
|
30
|
-
"@mirohq/design-system-stitches": "^2.3.
|
|
31
|
-
"@mirohq/design-tokens": "^3.4.
|
|
30
|
+
"@mirohq/design-system-stitches": "^2.3.14",
|
|
31
|
+
"@mirohq/design-tokens": "^3.4.1"
|
|
32
32
|
},
|
|
33
33
|
"scripts": {
|
|
34
34
|
"build": "rollup -c ../../../rollup.config.js",
|