@mirohq/design-system-styles 3.1.3 → 3.2.1

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.
Files changed (6) hide show
  1. package/dist/main.js +54 -2
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +54 -3
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +22 -5
  6. package/package.json +2 -2
package/dist/main.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  var designSystemStitches = require('@mirohq/design-system-stitches');
4
4
 
5
- const css = (style) => {
5
+ const css$1 = (style) => {
6
6
  const styleWithOutline = {
7
7
  // use `as any` to workaround TS2742 error
8
8
  ...style,
@@ -19,7 +19,7 @@ const css = (style) => {
19
19
 
20
20
  var focus = /*#__PURE__*/Object.freeze({
21
21
  __proto__: null,
22
- css: css
22
+ css: css$1
23
23
  });
24
24
 
25
25
  const fadeInScaled = designSystemStitches.keyframes({
@@ -48,6 +48,58 @@ var animations = /*#__PURE__*/Object.freeze({
48
48
  fadeOutScaled: fadeOutScaled
49
49
  });
50
50
 
51
+ const defaultAnimation = {
52
+ in: fadeInScaled,
53
+ out: fadeOutScaled
54
+ };
55
+ const floatingAnimation = ({
56
+ in: animIn,
57
+ out: animOut
58
+ }) => ({
59
+ "@media (prefers-reduced-motion: no-preference)": {
60
+ animationDuration: "150ms",
61
+ animationTimingFunction: "cubic-bezier(0.25, 0.5, 0.5, 0.9)",
62
+ willChange: "transform, opacity",
63
+ '&[data-state="open"]': { animationName: animIn },
64
+ '&[data-state="closed"]': { animationName: animOut },
65
+ '&[data-side="top"]': {
66
+ '&[data-align="start"]': { transformOrigin: "bottom left" },
67
+ '&[data-align="center"]': { transformOrigin: "bottom center" },
68
+ '&[data-align="end"]': { transformOrigin: "bottom right" }
69
+ },
70
+ '&[data-side="right"]': {
71
+ '&[data-align="start"]': { transformOrigin: "top left" },
72
+ '&[data-align="center"]': { transformOrigin: "center left" },
73
+ '&[data-align="end"]': { transformOrigin: "bottom left" }
74
+ },
75
+ '&[data-side="bottom"]': {
76
+ '&[data-align="start"]': { transformOrigin: "top left" },
77
+ '&[data-align="center"]': { transformOrigin: "top center" },
78
+ '&[data-align="end"]': { transformOrigin: "top right" }
79
+ },
80
+ '&[data-side="left"]': {
81
+ '&[data-align="start"]': { transformOrigin: "top right" },
82
+ '&[data-align="center"]': { transformOrigin: "center right" },
83
+ '&[data-align="end"]': { transformOrigin: "bottom right" }
84
+ }
85
+ }
86
+ });
87
+ const css = ({
88
+ radius = "$100",
89
+ shadow = "$elevation-200",
90
+ animation = defaultAnimation
91
+ } = {}) => ({
92
+ borderRadius: radius,
93
+ boxShadow: shadow,
94
+ ...animation !== false ? floatingAnimation(animation) : {}
95
+ });
96
+
97
+ var floating = /*#__PURE__*/Object.freeze({
98
+ __proto__: null,
99
+ css: css
100
+ });
101
+
51
102
  exports.animations = animations;
103
+ exports.floating = floating;
52
104
  exports.focus = focus;
53
105
  //# sourceMappingURL=main.js.map
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sources":["../src/focus.ts","../src/animations.ts"],"sourcesContent":["import type { CSS } from '@mirohq/design-system-stitches'\n\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\nexport const css = (style: CSS) => {\n // Manage focus outline for Windows High Contrast Mode\n const styleWithOutline = {\n // use `as any` to workaround TS2742 error\n ...(style as any),\n\n '@media (forced-colors: active)': {\n outline: 'Highlight solid',\n },\n }\n\n return {\n '&:focus-visible': styleWithOutline,\n '&[data-focused]': styleWithOutline,\n '&[data-focus-visible]': styleWithOutline,\n }\n}\n","import { keyframes } from '@mirohq/design-system-stitches'\n\nexport const fadeInScaled = keyframes({\n '0%': { opacity: 0, transform: 'scale(0.8)' },\n '100%': { opacity: 1, transform: 'scale(1)' },\n})\n\nexport const fadeOutScaled = keyframes({\n '0%': { opacity: 1, transform: 'scale(1)' },\n '100%': { opacity: 0, transform: 'scale(0.8)' },\n})\n\nexport const fadeIn = keyframes({\n '0%': { opacity: 0 },\n '50%': { opacity: 0.7 },\n '100%': { opacity: 1 },\n})\n\nexport const fadeOut = keyframes({\n '0%': { opacity: 1 },\n '100%': { opacity: 0 },\n})\n"],"names":["keyframes"],"mappings":";;;;AAGO,MAAM,GAAA,GAAM,CAAC,KAAA,KAAe;AAEjC,EAAA,MAAM,gBAAA,GAAmB;AAAA;AAAA,IAEvB,GAAI,KAAA;AAAA,IAEJ,gCAAA,EAAkC;AAAA,MAChC,OAAA,EAAS;AAAA;AACX,GACF;AAEA,EAAA,OAAO;AAAA,IACL,iBAAA,EAAmB,gBAAA;AAAA,IACnB,iBAAA,EAAmB,gBAAA;AAAA,IACnB,uBAAA,EAAyB;AAAA,GAC3B;AACF,CAAA;;;;;;;ACjBO,MAAM,eAAeA,8BAAA,CAAU;AAAA,EACpC,IAAA,EAAM,EAAE,OAAA,EAAS,CAAA,EAAG,WAAW,YAAA,EAAa;AAAA,EAC5C,MAAA,EAAQ,EAAE,OAAA,EAAS,CAAA,EAAG,WAAW,UAAA;AACnC,CAAC,CAAA;AAEM,MAAM,gBAAgBA,8BAAA,CAAU;AAAA,EACrC,IAAA,EAAM,EAAE,OAAA,EAAS,CAAA,EAAG,WAAW,UAAA,EAAW;AAAA,EAC1C,MAAA,EAAQ,EAAE,OAAA,EAAS,CAAA,EAAG,WAAW,YAAA;AACnC,CAAC,CAAA;AAEM,MAAM,SAASA,8BAAA,CAAU;AAAA,EAC9B,IAAA,EAAM,EAAE,OAAA,EAAS,CAAA,EAAE;AAAA,EACnB,KAAA,EAAO,EAAE,OAAA,EAAS,GAAA,EAAI;AAAA,EACtB,MAAA,EAAQ,EAAE,OAAA,EAAS,CAAA;AACrB,CAAC,CAAA;AAEM,MAAM,UAAUA,8BAAA,CAAU;AAAA,EAC/B,IAAA,EAAM,EAAE,OAAA,EAAS,CAAA,EAAE;AAAA,EACnB,MAAA,EAAQ,EAAE,OAAA,EAAS,CAAA;AACrB,CAAC,CAAA;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"main.js","sources":["../src/focus.ts","../src/animations.ts","../src/floating.ts"],"sourcesContent":["import type { CSS } from '@mirohq/design-system-stitches'\n\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\nexport const css = (style: CSS) => {\n // Manage focus outline for Windows High Contrast Mode\n const styleWithOutline = {\n // use `as any` to workaround TS2742 error\n ...(style as any),\n\n '@media (forced-colors: active)': {\n outline: 'Highlight solid',\n },\n }\n\n return {\n '&:focus-visible': styleWithOutline,\n '&[data-focused]': styleWithOutline,\n '&[data-focus-visible]': styleWithOutline,\n }\n}\n","import { keyframes } from '@mirohq/design-system-stitches'\n\nexport const fadeInScaled = keyframes({\n '0%': { opacity: 0, transform: 'scale(0.8)' },\n '100%': { opacity: 1, transform: 'scale(1)' },\n})\n\nexport const fadeOutScaled = keyframes({\n '0%': { opacity: 1, transform: 'scale(1)' },\n '100%': { opacity: 0, transform: 'scale(0.8)' },\n})\n\nexport const fadeIn = keyframes({\n '0%': { opacity: 0 },\n '50%': { opacity: 0.7 },\n '100%': { opacity: 1 },\n})\n\nexport const fadeOut = keyframes({\n '0%': { opacity: 1 },\n '100%': { opacity: 0 },\n})\n","import type { keyframes, CSS } from '@mirohq/design-system-stitches'\n\nimport { fadeInScaled, fadeOutScaled } from './animations'\n\ntype Keyframes = ReturnType<typeof keyframes>\n\ninterface FloatingAnimation {\n in?: Keyframes\n out?: Keyframes\n}\n\nconst defaultAnimation: FloatingAnimation = {\n in: fadeInScaled,\n out: fadeOutScaled,\n}\n\n// Sets transform-origin per side/align combination so the scale animation\n// originates from the trigger point rather than the element's centre.\nconst floatingAnimation = ({\n in: animIn,\n out: animOut,\n}: FloatingAnimation): CSS => ({\n '@media (prefers-reduced-motion: no-preference)': {\n animationDuration: '150ms',\n animationTimingFunction: 'cubic-bezier(0.25, 0.5, 0.5, 0.9)',\n willChange: 'transform, opacity',\n '&[data-state=\"open\"]': { animationName: animIn },\n '&[data-state=\"closed\"]': { animationName: animOut },\n '&[data-side=\"top\"]': {\n '&[data-align=\"start\"]': { transformOrigin: 'bottom left' },\n '&[data-align=\"center\"]': { transformOrigin: 'bottom center' },\n '&[data-align=\"end\"]': { transformOrigin: 'bottom right' },\n },\n '&[data-side=\"right\"]': {\n '&[data-align=\"start\"]': { transformOrigin: 'top left' },\n '&[data-align=\"center\"]': { transformOrigin: 'center left' },\n '&[data-align=\"end\"]': { transformOrigin: 'bottom left' },\n },\n '&[data-side=\"bottom\"]': {\n '&[data-align=\"start\"]': { transformOrigin: 'top left' },\n '&[data-align=\"center\"]': { transformOrigin: 'top center' },\n '&[data-align=\"end\"]': { transformOrigin: 'top right' },\n },\n '&[data-side=\"left\"]': {\n '&[data-align=\"start\"]': { transformOrigin: 'top right' },\n '&[data-align=\"center\"]': { transformOrigin: 'center right' },\n '&[data-align=\"end\"]': { transformOrigin: 'bottom right' },\n },\n },\n})\n\nexport const css = ({\n radius = '$100',\n shadow = '$elevation-200',\n animation = defaultAnimation,\n}: {\n radius?: CSS['borderRadius']\n shadow?: CSS['boxShadow']\n animation?: FloatingAnimation | false\n} = {}): CSS => ({\n borderRadius: radius,\n boxShadow: shadow,\n ...(animation !== false ? floatingAnimation(animation) : {}),\n})\n"],"names":["css","keyframes"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { keyframes } from '@mirohq/design-system-stitches';
2
2
 
3
- const css = (style) => {
3
+ const css$1 = (style) => {
4
4
  const styleWithOutline = {
5
5
  // use `as any` to workaround TS2742 error
6
6
  ...style,
@@ -17,7 +17,7 @@ const css = (style) => {
17
17
 
18
18
  var focus = /*#__PURE__*/Object.freeze({
19
19
  __proto__: null,
20
- css: css
20
+ css: css$1
21
21
  });
22
22
 
23
23
  const fadeInScaled = keyframes({
@@ -46,5 +46,56 @@ var animations = /*#__PURE__*/Object.freeze({
46
46
  fadeOutScaled: fadeOutScaled
47
47
  });
48
48
 
49
- export { animations, focus };
49
+ const defaultAnimation = {
50
+ in: fadeInScaled,
51
+ out: fadeOutScaled
52
+ };
53
+ const floatingAnimation = ({
54
+ in: animIn,
55
+ out: animOut
56
+ }) => ({
57
+ "@media (prefers-reduced-motion: no-preference)": {
58
+ animationDuration: "150ms",
59
+ animationTimingFunction: "cubic-bezier(0.25, 0.5, 0.5, 0.9)",
60
+ willChange: "transform, opacity",
61
+ '&[data-state="open"]': { animationName: animIn },
62
+ '&[data-state="closed"]': { animationName: animOut },
63
+ '&[data-side="top"]': {
64
+ '&[data-align="start"]': { transformOrigin: "bottom left" },
65
+ '&[data-align="center"]': { transformOrigin: "bottom center" },
66
+ '&[data-align="end"]': { transformOrigin: "bottom right" }
67
+ },
68
+ '&[data-side="right"]': {
69
+ '&[data-align="start"]': { transformOrigin: "top left" },
70
+ '&[data-align="center"]': { transformOrigin: "center left" },
71
+ '&[data-align="end"]': { transformOrigin: "bottom left" }
72
+ },
73
+ '&[data-side="bottom"]': {
74
+ '&[data-align="start"]': { transformOrigin: "top left" },
75
+ '&[data-align="center"]': { transformOrigin: "top center" },
76
+ '&[data-align="end"]': { transformOrigin: "top right" }
77
+ },
78
+ '&[data-side="left"]': {
79
+ '&[data-align="start"]': { transformOrigin: "top right" },
80
+ '&[data-align="center"]': { transformOrigin: "center right" },
81
+ '&[data-align="end"]': { transformOrigin: "bottom right" }
82
+ }
83
+ }
84
+ });
85
+ const css = ({
86
+ radius = "$100",
87
+ shadow = "$elevation-200",
88
+ animation = defaultAnimation
89
+ } = {}) => ({
90
+ borderRadius: radius,
91
+ boxShadow: shadow,
92
+ ...animation !== false ? floatingAnimation(animation) : {}
93
+ });
94
+
95
+ var floating = /*#__PURE__*/Object.freeze({
96
+ __proto__: null,
97
+ css: css
98
+ });
99
+
100
+ export { animations, floating, focus };
50
101
  //# sourceMappingURL=module.js.map
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../src/focus.ts","../src/animations.ts"],"sourcesContent":["import type { CSS } from '@mirohq/design-system-stitches'\n\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\nexport const css = (style: CSS) => {\n // Manage focus outline for Windows High Contrast Mode\n const styleWithOutline = {\n // use `as any` to workaround TS2742 error\n ...(style as any),\n\n '@media (forced-colors: active)': {\n outline: 'Highlight solid',\n },\n }\n\n return {\n '&:focus-visible': styleWithOutline,\n '&[data-focused]': styleWithOutline,\n '&[data-focus-visible]': styleWithOutline,\n }\n}\n","import { keyframes } from '@mirohq/design-system-stitches'\n\nexport const fadeInScaled = keyframes({\n '0%': { opacity: 0, transform: 'scale(0.8)' },\n '100%': { opacity: 1, transform: 'scale(1)' },\n})\n\nexport const fadeOutScaled = keyframes({\n '0%': { opacity: 1, transform: 'scale(1)' },\n '100%': { opacity: 0, transform: 'scale(0.8)' },\n})\n\nexport const fadeIn = keyframes({\n '0%': { opacity: 0 },\n '50%': { opacity: 0.7 },\n '100%': { opacity: 1 },\n})\n\nexport const fadeOut = keyframes({\n '0%': { opacity: 1 },\n '100%': { opacity: 0 },\n})\n"],"names":[],"mappings":";;AAGO,MAAM,GAAA,GAAM,CAAC,KAAA,KAAe;AAEjC,EAAA,MAAM,gBAAA,GAAmB;AAAA;AAAA,IAEvB,GAAI,KAAA;AAAA,IAEJ,gCAAA,EAAkC;AAAA,MAChC,OAAA,EAAS;AAAA;AACX,GACF;AAEA,EAAA,OAAO;AAAA,IACL,iBAAA,EAAmB,gBAAA;AAAA,IACnB,iBAAA,EAAmB,gBAAA;AAAA,IACnB,uBAAA,EAAyB;AAAA,GAC3B;AACF,CAAA;;;;;;;ACjBO,MAAM,eAAe,SAAA,CAAU;AAAA,EACpC,IAAA,EAAM,EAAE,OAAA,EAAS,CAAA,EAAG,WAAW,YAAA,EAAa;AAAA,EAC5C,MAAA,EAAQ,EAAE,OAAA,EAAS,CAAA,EAAG,WAAW,UAAA;AACnC,CAAC,CAAA;AAEM,MAAM,gBAAgB,SAAA,CAAU;AAAA,EACrC,IAAA,EAAM,EAAE,OAAA,EAAS,CAAA,EAAG,WAAW,UAAA,EAAW;AAAA,EAC1C,MAAA,EAAQ,EAAE,OAAA,EAAS,CAAA,EAAG,WAAW,YAAA;AACnC,CAAC,CAAA;AAEM,MAAM,SAAS,SAAA,CAAU;AAAA,EAC9B,IAAA,EAAM,EAAE,OAAA,EAAS,CAAA,EAAE;AAAA,EACnB,KAAA,EAAO,EAAE,OAAA,EAAS,GAAA,EAAI;AAAA,EACtB,MAAA,EAAQ,EAAE,OAAA,EAAS,CAAA;AACrB,CAAC,CAAA;AAEM,MAAM,UAAU,SAAA,CAAU;AAAA,EAC/B,IAAA,EAAM,EAAE,OAAA,EAAS,CAAA,EAAE;AAAA,EACnB,MAAA,EAAQ,EAAE,OAAA,EAAS,CAAA;AACrB,CAAC,CAAA;;;;;;;;;;;;"}
1
+ {"version":3,"file":"module.js","sources":["../src/focus.ts","../src/animations.ts","../src/floating.ts"],"sourcesContent":["import type { CSS } from '@mirohq/design-system-stitches'\n\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\nexport const css = (style: CSS) => {\n // Manage focus outline for Windows High Contrast Mode\n const styleWithOutline = {\n // use `as any` to workaround TS2742 error\n ...(style as any),\n\n '@media (forced-colors: active)': {\n outline: 'Highlight solid',\n },\n }\n\n return {\n '&:focus-visible': styleWithOutline,\n '&[data-focused]': styleWithOutline,\n '&[data-focus-visible]': styleWithOutline,\n }\n}\n","import { keyframes } from '@mirohq/design-system-stitches'\n\nexport const fadeInScaled = keyframes({\n '0%': { opacity: 0, transform: 'scale(0.8)' },\n '100%': { opacity: 1, transform: 'scale(1)' },\n})\n\nexport const fadeOutScaled = keyframes({\n '0%': { opacity: 1, transform: 'scale(1)' },\n '100%': { opacity: 0, transform: 'scale(0.8)' },\n})\n\nexport const fadeIn = keyframes({\n '0%': { opacity: 0 },\n '50%': { opacity: 0.7 },\n '100%': { opacity: 1 },\n})\n\nexport const fadeOut = keyframes({\n '0%': { opacity: 1 },\n '100%': { opacity: 0 },\n})\n","import type { keyframes, CSS } from '@mirohq/design-system-stitches'\n\nimport { fadeInScaled, fadeOutScaled } from './animations'\n\ntype Keyframes = ReturnType<typeof keyframes>\n\ninterface FloatingAnimation {\n in?: Keyframes\n out?: Keyframes\n}\n\nconst defaultAnimation: FloatingAnimation = {\n in: fadeInScaled,\n out: fadeOutScaled,\n}\n\n// Sets transform-origin per side/align combination so the scale animation\n// originates from the trigger point rather than the element's centre.\nconst floatingAnimation = ({\n in: animIn,\n out: animOut,\n}: FloatingAnimation): CSS => ({\n '@media (prefers-reduced-motion: no-preference)': {\n animationDuration: '150ms',\n animationTimingFunction: 'cubic-bezier(0.25, 0.5, 0.5, 0.9)',\n willChange: 'transform, opacity',\n '&[data-state=\"open\"]': { animationName: animIn },\n '&[data-state=\"closed\"]': { animationName: animOut },\n '&[data-side=\"top\"]': {\n '&[data-align=\"start\"]': { transformOrigin: 'bottom left' },\n '&[data-align=\"center\"]': { transformOrigin: 'bottom center' },\n '&[data-align=\"end\"]': { transformOrigin: 'bottom right' },\n },\n '&[data-side=\"right\"]': {\n '&[data-align=\"start\"]': { transformOrigin: 'top left' },\n '&[data-align=\"center\"]': { transformOrigin: 'center left' },\n '&[data-align=\"end\"]': { transformOrigin: 'bottom left' },\n },\n '&[data-side=\"bottom\"]': {\n '&[data-align=\"start\"]': { transformOrigin: 'top left' },\n '&[data-align=\"center\"]': { transformOrigin: 'top center' },\n '&[data-align=\"end\"]': { transformOrigin: 'top right' },\n },\n '&[data-side=\"left\"]': {\n '&[data-align=\"start\"]': { transformOrigin: 'top right' },\n '&[data-align=\"center\"]': { transformOrigin: 'center right' },\n '&[data-align=\"end\"]': { transformOrigin: 'bottom right' },\n },\n },\n})\n\nexport const css = ({\n radius = '$100',\n shadow = '$elevation-200',\n animation = defaultAnimation,\n}: {\n radius?: CSS['borderRadius']\n shadow?: CSS['boxShadow']\n animation?: FloatingAnimation | false\n} = {}): CSS => ({\n borderRadius: radius,\n boxShadow: shadow,\n ...(animation !== false ? floatingAnimation(animation) : {}),\n})\n"],"names":["css"],"mappings":"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"}
package/dist/types.d.ts CHANGED
@@ -1,15 +1,14 @@
1
- import { CSS } from '@mirohq/design-system-stitches';
1
+ import { CSS, keyframes } from '@mirohq/design-system-stitches';
2
2
 
3
- declare const css: (style: CSS) => {
3
+ declare const css$1: (style: CSS) => {
4
4
  '&:focus-visible': any;
5
5
  '&[data-focused]': any;
6
6
  '&[data-focus-visible]': any;
7
7
  };
8
8
 
9
- declare const focus_css: typeof css;
10
9
  declare namespace focus {
11
10
  export {
12
- focus_css as css,
11
+ css$1 as css,
13
12
  };
14
13
  }
15
14
 
@@ -43,4 +42,22 @@ declare namespace animations {
43
42
  };
44
43
  }
45
44
 
46
- export { animations, focus };
45
+ type Keyframes = ReturnType<typeof keyframes>;
46
+ interface FloatingAnimation {
47
+ in?: Keyframes;
48
+ out?: Keyframes;
49
+ }
50
+ declare const css: ({ radius, shadow, animation, }?: {
51
+ radius?: CSS["borderRadius"];
52
+ shadow?: CSS["boxShadow"];
53
+ animation?: FloatingAnimation | false;
54
+ }) => CSS;
55
+
56
+ declare const floating_css: typeof css;
57
+ declare namespace floating {
58
+ export {
59
+ floating_css as css,
60
+ };
61
+ }
62
+
63
+ export { animations, floating, focus };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-styles",
3
- "version": "3.1.3",
3
+ "version": "3.2.1",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -25,7 +25,7 @@
25
25
  "react": "^16.14 || ^17 || ^18 || ^19"
26
26
  },
27
27
  "dependencies": {
28
- "@mirohq/design-system-stitches": "^3.3.1"
28
+ "@mirohq/design-system-stitches": "^3.3.2"
29
29
  },
30
30
  "scripts": {
31
31
  "build": "rollup -c ../../rollup.config.js",