@mirohq/design-system-styles 1.0.8

package/dist/main.js

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var designSystemStitches = require('@mirohq/design-system-stitches');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var _a;
+if (/apple/i.test((_a = globalThis == null ? void 0 : globalThis.navigator) == null ? void 0 : _a.vendor)) {
+  Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+    /* webpackChunkName: "what-input" */
+    'what-input'
+  )); });
+}
+const css = (style) => ({
+  "&:focus-visible": style,
+  '[data-whatintent="keyboard"] &:focus': style
+});
+const defaults = css({
+  boxShadow: `0 0 0 1px rgba(104, 129, 255, 1), 0 0 0 5px rgba(217, 224, 255, 1)`,
+  outline: "none"
+});
+const inner = css({
+  borderRadius: "$100",
+  boxShadow: `inset 0 0 0 3px rgba(217, 224, 255, 1), inset 0 0 0 5px rgba(104, 129, 255, 1)`,
+  outline: "none"
+});
+
+var focus = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  css: css,
+  defaults: defaults,
+  inner: inner
+});
+
+const fadeInScaled = designSystemStitches.keyframes({
+  "0%": { opacity: 0, transform: "scale(0.8)" },
+  "100%": { opacity: 1, transform: "scale(1)" }
+});
+const fadeOutScaled = designSystemStitches.keyframes({
+  "0%": { opacity: 1, transform: "scale(1)" },
+  "100%": { opacity: 0, transform: "scale(0.8)" }
+});
+const fadeIn = designSystemStitches.keyframes({
+  "0%": { opacity: 0 },
+  "50%": { opacity: 0.7 },
+  "100%": { opacity: 1 }
+});
+const fadeOut = designSystemStitches.keyframes({
+  "0%": { opacity: 1 },
+  "100%": { opacity: 0 }
+});
+
+var animations = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  fadeInScaled: fadeInScaled,
+  fadeOutScaled: fadeOutScaled,
+  fadeIn: fadeIn,
+  fadeOut: fadeOut
+});
+
+exports.animations = animations;
+exports.focus = focus;
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sources":["../src/focus.ts","../src/animations.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\n\n// use what-input to \"fake\" focus-visible\n// TODO: Remove it whenever Safari 15.4 becomes the default for most of its users\nif (/apple/i.test(globalThis?.navigator?.vendor)) {\n  import(/* webpackChunkName: \"what-input\" */ 'what-input')\n}\n\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\nexport const css = (style: CSSProperties) => ({\n  '&:focus-visible': style,\n  '[data-whatintent=\"keyboard\"] &:focus': style,\n})\n\nexport const defaults = css({\n  boxShadow: `0 0 0 1px rgba(104, 129, 255, 1), 0 0 0 5px rgba(217, 224, 255, 1)`,\n  outline: 'none',\n})\n\nexport const inner = css({\n  borderRadius: '$100',\n  boxShadow: `inset 0 0 0 3px rgba(217, 224, 255, 1), inset 0 0 0 5px rgba(104, 129, 255, 1)`,\n  outline: 'none',\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":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,EAAA,CAAA;AAIA,IAAI,SAAS,IAAK,CAAA,CAAA,EAAA,GAAA,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAY,SAAZ,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAuB,MAAM,CAAG,EAAA;AAChD,EAAA,mFAAA;AAAA;AAAA,IAA4C,YAAA;AAAA,EAAA,MAAA,CAAA;AAC9C,CAAA;AAGa,MAAA,GAAA,GAAM,CAAC,KAA0B,MAAA;AAAA,EAC5C,iBAAmB,EAAA,KAAA;AAAA,EACnB,sCAAwC,EAAA,KAAA;AAC1C,CAAA,CAAA,CAAA;AAEO,MAAM,WAAW,GAAI,CAAA;AAAA,EAC1B,SAAW,EAAA,CAAA,kEAAA,CAAA;AAAA,EACX,OAAS,EAAA,MAAA;AACX,CAAC,CAAA,CAAA;AAEM,MAAM,QAAQ,GAAI,CAAA;AAAA,EACvB,YAAc,EAAA,MAAA;AAAA,EACd,SAAW,EAAA,CAAA,8EAAA,CAAA;AAAA,EACX,OAAS,EAAA,MAAA;AACX,CAAC,CAAA;;;;;;;;;ACrBM,MAAM,eAAeA,8BAAU,CAAA;AAAA,EACpC,IAAM,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,YAAa,EAAA;AAAA,EAC5C,MAAQ,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,UAAW,EAAA;AAC9C,CAAC,CAAA,CAAA;AAEM,MAAM,gBAAgBA,8BAAU,CAAA;AAAA,EACrC,IAAM,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,UAAW,EAAA;AAAA,EAC1C,MAAQ,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,YAAa,EAAA;AAChD,CAAC,CAAA,CAAA;AAEM,MAAM,SAASA,8BAAU,CAAA;AAAA,EAC9B,IAAA,EAAM,EAAE,OAAA,EAAS,CAAE,EAAA;AAAA,EACnB,KAAA,EAAO,EAAE,OAAA,EAAS,GAAI,EAAA;AAAA,EACtB,MAAA,EAAQ,EAAE,OAAA,EAAS,CAAE,EAAA;AACvB,CAAC,CAAA,CAAA;AAEM,MAAM,UAAUA,8BAAU,CAAA;AAAA,EAC/B,IAAA,EAAM,EAAE,OAAA,EAAS,CAAE,EAAA;AAAA,EACnB,MAAA,EAAQ,EAAE,OAAA,EAAS,CAAE,EAAA;AACvB,CAAC,CAAA;;;;;;;;;;;;;"}

package/dist/module.js

@@ -0,0 +1,58 @@
+import { keyframes } from '@mirohq/design-system-stitches';
+
+var _a;
+if (/apple/i.test((_a = globalThis == null ? void 0 : globalThis.navigator) == null ? void 0 : _a.vendor)) {
+  import(
+    /* webpackChunkName: "what-input" */
+    'what-input'
+  );
+}
+const css = (style) => ({
+  "&:focus-visible": style,
+  '[data-whatintent="keyboard"] &:focus': style
+});
+const defaults = css({
+  boxShadow: `0 0 0 1px rgba(104, 129, 255, 1), 0 0 0 5px rgba(217, 224, 255, 1)`,
+  outline: "none"
+});
+const inner = css({
+  borderRadius: "$100",
+  boxShadow: `inset 0 0 0 3px rgba(217, 224, 255, 1), inset 0 0 0 5px rgba(104, 129, 255, 1)`,
+  outline: "none"
+});
+
+var focus = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  css: css,
+  defaults: defaults,
+  inner: inner
+});
+
+const fadeInScaled = keyframes({
+  "0%": { opacity: 0, transform: "scale(0.8)" },
+  "100%": { opacity: 1, transform: "scale(1)" }
+});
+const fadeOutScaled = keyframes({
+  "0%": { opacity: 1, transform: "scale(1)" },
+  "100%": { opacity: 0, transform: "scale(0.8)" }
+});
+const fadeIn = keyframes({
+  "0%": { opacity: 0 },
+  "50%": { opacity: 0.7 },
+  "100%": { opacity: 1 }
+});
+const fadeOut = keyframes({
+  "0%": { opacity: 1 },
+  "100%": { opacity: 0 }
+});
+
+var animations = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  fadeInScaled: fadeInScaled,
+  fadeOutScaled: fadeOutScaled,
+  fadeIn: fadeIn,
+  fadeOut: fadeOut
+});
+
+export { animations, focus };
+//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.js","sources":["../src/focus.ts","../src/animations.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\n\n// use what-input to \"fake\" focus-visible\n// TODO: Remove it whenever Safari 15.4 becomes the default for most of its users\nif (/apple/i.test(globalThis?.navigator?.vendor)) {\n  import(/* webpackChunkName: \"what-input\" */ 'what-input')\n}\n\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\nexport const css = (style: CSSProperties) => ({\n  '&:focus-visible': style,\n  '[data-whatintent=\"keyboard\"] &:focus': style,\n})\n\nexport const defaults = css({\n  boxShadow: `0 0 0 1px rgba(104, 129, 255, 1), 0 0 0 5px rgba(217, 224, 255, 1)`,\n  outline: 'none',\n})\n\nexport const inner = css({\n  borderRadius: '$100',\n  boxShadow: `inset 0 0 0 3px rgba(217, 224, 255, 1), inset 0 0 0 5px rgba(104, 129, 255, 1)`,\n  outline: 'none',\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":";;AAAA,IAAA,EAAA,CAAA;AAIA,IAAI,SAAS,IAAK,CAAA,CAAA,EAAA,GAAA,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAY,SAAZ,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAuB,MAAM,CAAG,EAAA;AAChD,EAAA;AAAA;AAAA,IAA4C,YAAA;AAAA,GAAA,CAAA;AAC9C,CAAA;AAGa,MAAA,GAAA,GAAM,CAAC,KAA0B,MAAA;AAAA,EAC5C,iBAAmB,EAAA,KAAA;AAAA,EACnB,sCAAwC,EAAA,KAAA;AAC1C,CAAA,CAAA,CAAA;AAEO,MAAM,WAAW,GAAI,CAAA;AAAA,EAC1B,SAAW,EAAA,CAAA,kEAAA,CAAA;AAAA,EACX,OAAS,EAAA,MAAA;AACX,CAAC,CAAA,CAAA;AAEM,MAAM,QAAQ,GAAI,CAAA;AAAA,EACvB,YAAc,EAAA,MAAA;AAAA,EACd,SAAW,EAAA,CAAA,8EAAA,CAAA;AAAA,EACX,OAAS,EAAA,MAAA;AACX,CAAC,CAAA;;;;;;;;;ACrBM,MAAM,eAAe,SAAU,CAAA;AAAA,EACpC,IAAM,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,YAAa,EAAA;AAAA,EAC5C,MAAQ,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,UAAW,EAAA;AAC9C,CAAC,CAAA,CAAA;AAEM,MAAM,gBAAgB,SAAU,CAAA;AAAA,EACrC,IAAM,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,UAAW,EAAA;AAAA,EAC1C,MAAQ,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,YAAa,EAAA;AAChD,CAAC,CAAA,CAAA;AAEM,MAAM,SAAS,SAAU,CAAA;AAAA,EAC9B,IAAA,EAAM,EAAE,OAAA,EAAS,CAAE,EAAA;AAAA,EACnB,KAAA,EAAO,EAAE,OAAA,EAAS,GAAI,EAAA;AAAA,EACtB,MAAA,EAAQ,EAAE,OAAA,EAAS,CAAE,EAAA;AACvB,CAAC,CAAA,CAAA;AAEM,MAAM,UAAU,SAAU,CAAA;AAAA,EAC/B,IAAA,EAAM,EAAE,OAAA,EAAS,CAAE,EAAA;AAAA,EACnB,MAAA,EAAQ,EAAE,OAAA,EAAS,CAAE,EAAA;AACvB,CAAC,CAAA;;;;;;;;;;;;"}

package/dist/types.d.ts

@@ -0,0 +1,57 @@
+import { CSSProperties } from 'react';
+
+declare const css: (style: CSSProperties) => {
+    '&:focus-visible': CSSProperties;
+    '[data-whatintent="keyboard"] &:focus': CSSProperties;
+};
+declare const defaults: {
+    '&:focus-visible': CSSProperties;
+    '[data-whatintent="keyboard"] &:focus': CSSProperties;
+};
+declare const inner: {
+    '&:focus-visible': CSSProperties;
+    '[data-whatintent="keyboard"] &:focus': CSSProperties;
+};
+
+declare const focus_css: typeof css;
+declare const focus_defaults: typeof defaults;
+declare const focus_inner: typeof inner;
+declare namespace focus {
+  export {
+    focus_css as css,
+    focus_defaults as defaults,
+    focus_inner as inner,
+  };
+}
+
+declare const fadeInScaled: {
+    (): string;
+    name: string;
+};
+declare const fadeOutScaled: {
+    (): string;
+    name: string;
+};
+declare const fadeIn: {
+    (): string;
+    name: string;
+};
+declare const fadeOut: {
+    (): string;
+    name: string;
+};
+
+declare const animations_fadeInScaled: typeof fadeInScaled;
+declare const animations_fadeOutScaled: typeof fadeOutScaled;
+declare const animations_fadeIn: typeof fadeIn;
+declare const animations_fadeOut: typeof fadeOut;
+declare namespace animations {
+  export {
+    animations_fadeInScaled as fadeInScaled,
+    animations_fadeOutScaled as fadeOutScaled,
+    animations_fadeIn as fadeIn,
+    animations_fadeOut as fadeOut,
+  };
+}
+
+export { animations, focus };

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@mirohq/design-system-styles",
+  "version": "1.0.8",
+  "description": "",
+  "author": "Miro",
+  "source": "src/index.ts",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "require": "./dist/main.js",
+      "import": "./dist/module.js",
+      "types": "./dist/types.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "what-input": "^5.2.11",
+    "@mirohq/design-tokens": "^1.5.0",
+    "@mirohq/design-system-stitches": "^2.0.8"
+  },
+  "scripts": {
+    "build": "rollup -c ../../rollup.config.js",
+    "clean": "rm -rf dist",
+    "prebuild": "pnpm clean"
+  }
+}