@mirohq/design-system-spinner 2.1.2 → 2.2.0-fix-stitches-types.0
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 +1 -7
- package/dist/main.js.map +1 -1
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +27 -7
- package/package.json +3 -3
package/dist/main.js
CHANGED
|
@@ -1,16 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
4
|
var React = require('react');
|
|
7
5
|
var designSystemPrimitive = require('@mirohq/design-system-primitive');
|
|
8
6
|
var designSystemStitches = require('@mirohq/design-system-stitches');
|
|
9
7
|
|
|
10
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
|
-
|
|
12
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
|
-
|
|
14
8
|
const rotateAnimation = designSystemStitches.keyframes({
|
|
15
9
|
"100%": { transform: "rotate(360deg)" }
|
|
16
10
|
});
|
|
@@ -64,7 +58,7 @@ const StyledSpinner = designSystemStitches.styled(designSystemPrimitive.Primitiv
|
|
|
64
58
|
}
|
|
65
59
|
});
|
|
66
60
|
|
|
67
|
-
const Spinner =
|
|
61
|
+
const Spinner = React.forwardRef(({ size = "medium", ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
68
62
|
StyledSpinner,
|
|
69
63
|
{
|
|
70
64
|
...restProps,
|
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: `${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 * @default 'medium'\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","
|
|
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 * @default 'medium'\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","jsx"],"mappings":";;;;;;;AAIA,MAAM,kBAAkBA,8BAAA,CAAU;AAAA,EAChC,MAAA,EAAQ,EAAE,SAAA,EAAW,gBAAA;AACvB,CAAC,CAAA;AAED,MAAM,kBAAkBA,8BAAA,CAAU;AAAA,EAChC,IAAA,EAAM;AAAA,IACJ,eAAA,EAAiB,QAAA;AAAA,IACjB,gBAAA,EAAkB;AAAA,GACpB;AAAA,EACA,KAAA,EAAO;AAAA,IACL,eAAA,EAAiB,SAAA;AAAA,IACjB,gBAAA,EAAkB;AAAA,GACpB;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,eAAA,EAAiB,SAAA;AAAA,IACjB,gBAAA,EAAkB;AAAA;AAEtB,CAAC,CAAA;AAEM,MAAM,aAAA,GAAgBC,2BAAA,CAAOC,+BAAA,CAAU,GAAA,EAAK;AAAA,EACjD,OAAA,EAAS,OAAA;AAAA,EACT,SAAA,EAAW,GAAG,MAAA,CAAA,eAAA,EAAe,qBAAA,CAAA;AAAA,EAC7B,eAAA,EAAiB,eAAA;AAAA,EACjB,MAAA,EAAQ,cAAA;AAAA,EACR,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,MAAA;AAAA,IACN,gBAAA,EAAkB,IAAA;AAAA,IAClB,eAAA,EAAiB,SAAA;AAAA,IACjB,gBAAA,EAAkB,CAAA;AAAA,IAClB,SAAA,EAAW,mCAAA;AAAA,IACX,aAAA,EAAe,OAAA;AAAA,IACf,gDAAA,EAAkD;AAAA,MAChD,aAAA,EAAe;AAAA;AACjB,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,KAAA,EAAO;AAAA,QACL,KAAA,EAAO,IAAA;AAAA,QACP,MAAA,EAAQ,IAAA;AAAA,QACR,eAAA,EAAiB;AAAA,UACf,WAAA,EAAa;AAAA;AACf,OACF;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,KAAA,EAAO,IAAA;AAAA,QACP,MAAA,EAAQ,IAAA;AAAA,QACR,eAAA,EAAiB;AAAA,UACf,WAAA,EAAa;AAAA;AACf;AACF;AACF;AAEJ,CAAC,CAAA;;AC3CM,MAAM,OAAA,GAAU,KAAA,CAAM,UAAA,CAG3B,CAAC,EAAE,OAAO,QAAA,EAAU,GAAG,SAAA,EAAU,EAAG,UAAA,qBACpCC,cAAA;AAAA,EAAC,aAAA;AAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,OAAA,EAAQ,aAAA;AAAA,IACR,IAAA;AAAA,IACA,GAAA,EAAK,UAAA;AAAA,IAEL,QAAA,kBAAAA,cAAA,CAAC,YAAO,EAAA,EAAG,QAAA,EAAS,IAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,CAAA,EAAE,IAAA,EAAK;AAAA;AAC7C,CACD;;;;"}
|
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: `${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 * @default 'medium'\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,
|
|
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 * @default 'medium'\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,SAAA,CAAU;AAAA,EAChC,MAAA,EAAQ,EAAE,SAAA,EAAW,gBAAA;AACvB,CAAC,CAAA;AAED,MAAM,kBAAkB,SAAA,CAAU;AAAA,EAChC,IAAA,EAAM;AAAA,IACJ,eAAA,EAAiB,QAAA;AAAA,IACjB,gBAAA,EAAkB;AAAA,GACpB;AAAA,EACA,KAAA,EAAO;AAAA,IACL,eAAA,EAAiB,SAAA;AAAA,IACjB,gBAAA,EAAkB;AAAA,GACpB;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,eAAA,EAAiB,SAAA;AAAA,IACjB,gBAAA,EAAkB;AAAA;AAEtB,CAAC,CAAA;AAEM,MAAM,aAAA,GAAgB,MAAA,CAAO,SAAA,CAAU,GAAA,EAAK;AAAA,EACjD,OAAA,EAAS,OAAA;AAAA,EACT,SAAA,EAAW,GAAG,MAAA,CAAA,eAAA,EAAe,qBAAA,CAAA;AAAA,EAC7B,eAAA,EAAiB,eAAA;AAAA,EACjB,MAAA,EAAQ,cAAA;AAAA,EACR,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,MAAA;AAAA,IACN,gBAAA,EAAkB,IAAA;AAAA,IAClB,eAAA,EAAiB,SAAA;AAAA,IACjB,gBAAA,EAAkB,CAAA;AAAA,IAClB,SAAA,EAAW,mCAAA;AAAA,IACX,aAAA,EAAe,OAAA;AAAA,IACf,gDAAA,EAAkD;AAAA,MAChD,aAAA,EAAe;AAAA;AACjB,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,KAAA,EAAO;AAAA,QACL,KAAA,EAAO,IAAA;AAAA,QACP,MAAA,EAAQ,IAAA;AAAA,QACR,eAAA,EAAiB;AAAA,UACf,WAAA,EAAa;AAAA;AACf,OACF;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,KAAA,EAAO,IAAA;AAAA,QACP,MAAA,EAAQ,IAAA;AAAA,QACR,eAAA,EAAiB;AAAA,UACf,WAAA,EAAa;AAAA;AACf;AACF;AACF;AAEJ,CAAC,CAAA;;AC3CM,MAAM,OAAA,GAAU,KAAA,CAAM,UAAA,CAG3B,CAAC,EAAE,OAAO,QAAA,EAAU,GAAG,SAAA,EAAU,EAAG,UAAA,qBACpC,GAAA;AAAA,EAAC,aAAA;AAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,OAAA,EAAQ,aAAA;AAAA,IACR,IAAA;AAAA,IACA,GAAA,EAAK,UAAA;AAAA,IAEL,QAAA,kBAAA,GAAA,CAAC,YAAO,EAAA,EAAG,QAAA,EAAS,IAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,CAAA,EAAE,IAAA,EAAK;AAAA;AAC7C,CACD;;;;"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,12 +1,31 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import
|
|
3
|
-
import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import React__default, { ComponentPropsWithRef } from 'react';
|
|
4
3
|
import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
|
|
5
4
|
import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
|
|
6
5
|
|
|
7
|
-
|
|
6
|
+
/* Utilities */
|
|
7
|
+
/* ========================================================================== */
|
|
8
|
+
|
|
9
|
+
/** Returns a string with the given prefix followed by the given values. */
|
|
10
|
+
type Prefixed<K extends string, T> = `${K}${Extract<T, boolean | number | string>}`
|
|
11
|
+
|
|
12
|
+
type TransformProps<Props, Media> = {
|
|
13
|
+
[K in keyof Props]: (
|
|
14
|
+
| Props[K]
|
|
15
|
+
| (
|
|
16
|
+
& {
|
|
17
|
+
[KMedia in Prefixed<'@', 'initial' | keyof Media>]?: Props[K]
|
|
18
|
+
}
|
|
19
|
+
& {
|
|
20
|
+
[KMedia in string]: Props[K]
|
|
21
|
+
}
|
|
22
|
+
)
|
|
23
|
+
)
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
declare const StyledSpinner: React.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<React.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"svg">>>, "size"> & TransformProps<{
|
|
8
27
|
size?: "small" | "medium" | undefined;
|
|
9
|
-
}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> &
|
|
28
|
+
}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & React.RefAttributes<SVGSVGElement>> & _mirohq_design_system_stitches.StitchesInternals<React.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"svg">>, {
|
|
10
29
|
size?: "small" | "medium" | undefined;
|
|
11
30
|
}, {}>;
|
|
12
31
|
type StyledSpinnerProps = ComponentPropsWithRef<typeof StyledSpinner>;
|
|
@@ -18,6 +37,7 @@ interface SpinnerProps extends StyledSpinnerProps {
|
|
|
18
37
|
*/
|
|
19
38
|
size?: StyledSpinnerProps['size'];
|
|
20
39
|
}
|
|
21
|
-
declare const Spinner:
|
|
40
|
+
declare const Spinner: React__default.ForwardRefExoticComponent<Omit<SpinnerProps, "ref"> & React__default.RefAttributes<SVGSVGElement>>;
|
|
22
41
|
|
|
23
|
-
export { Spinner
|
|
42
|
+
export { Spinner };
|
|
43
|
+
export type { SpinnerProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-spinner",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0-fix-stitches-types.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"react": "^16.14 || ^17 || ^18 || ^19"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@mirohq/design-system-primitive": "^2.
|
|
30
|
-
"@mirohq/design-system-stitches": "^3.
|
|
29
|
+
"@mirohq/design-system-primitive": "^2.2.0-fix-stitches-types.0",
|
|
30
|
+
"@mirohq/design-system-stitches": "^3.2.0-fix-stitches-types.0"
|
|
31
31
|
},
|
|
32
32
|
"scripts": {
|
|
33
33
|
"build": "rollup -c ../../../rollup.config.js",
|