@mirohq/design-system-patterns 0.1.0

package/dist/main.js

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystemStitches = require('@mirohq/design-system-stitches');
+var designSystemBox = require('@mirohq/design-system-box');
+var designSystemButton = require('@mirohq/design-system-button');
+var designSystemTypography = require('@mirohq/design-system-typography');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const Container = designSystemStitches.styled(designSystemBox.Box, {
+  background: "$background-neutrals",
+  padding: "$500",
+  display: "flex",
+  flexDirection: "column",
+  gap: "$50",
+  minWidth: "290px",
+  maxWidth: "480px"
+});
+const Illustration = designSystemStitches.styled("img", {
+  width: "112px",
+  display: "block"
+});
+const Description = designSystemStitches.styled(designSystemBox.Box, {
+  color: "$text-neutrals-subtle"
+});
+const Actions = designSystemStitches.styled(designSystemBox.Box, {
+  paddingY: "$200",
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "$100"
+});
+const EmptyState = React__default["default"].forwardRef(
+  ({
+    heading,
+    description,
+    illustration,
+    actions: { primary, secondary },
+    ...restProps
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Container, { ref, ...restProps, children: [
+    illustration != null && /* @__PURE__ */ jsxRuntime.jsx(Illustration, { src: illustration, "aria-hidden": true, alt: "" }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystemTypography.Heading, { ref, level: 2, styledAs: "h3", children: heading }),
+    description != null && /* @__PURE__ */ jsxRuntime.jsx(Description, { css: { color: "$text-neutrals-subtle" }, children: description }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Actions, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystemButton.Button, { ...primary, variant: "primary", children: primary.label }),
+      secondary != null && /* @__PURE__ */ jsxRuntime.jsx(designSystemButton.Button, { ...secondary, variant: "ghost", children: secondary.label })
+    ] })
+  ] })
+);
+
+exports.EmptyState = EmptyState;
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sources":["../src/empty-state.tsx"],"sourcesContent":["import React from 'react'\nimport type { ReactNode, ElementRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Box } from '@mirohq/design-system-box'\nimport { Button } from '@mirohq/design-system-button'\nimport type { ButtonProps } from '@mirohq/design-system-button'\nimport type { BoxProps } from '@mirohq/design-system-box'\nimport { Heading } from '@mirohq/design-system-typography'\n\n// Types\n// -----------------------------------------------------------------------------\nexport interface EmptyStateProps extends Omit<BoxProps, 'children'> {\n  heading: ReactNode\n  description?: ReactNode\n  illustration?: string\n  actions: {\n    primary: ActionButton\n    secondary?: ActionButton\n  }\n}\n\ntype ActionButton = Omit<ButtonProps, 'variant' | 'children'> & {\n  label: ReactNode\n}\n\n// Styled\n// -----------------------------------------------------------------------------\nconst Container = styled(Box, {\n  background: '$background-neutrals',\n  padding: '$500',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '$50',\n  minWidth: '290px',\n  maxWidth: '480px',\n})\n\nconst Illustration = styled('img', {\n  width: '112px',\n  display: 'block',\n})\n\nconst Description = styled(Box, {\n  color: '$text-neutrals-subtle',\n})\n\nconst Actions = styled(Box, {\n  paddingY: '$200',\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: '$100',\n})\n\n// Component\n// -----------------------------------------------------------------------------\nexport const EmptyState = React.forwardRef<\n  ElementRef<typeof Box>,\n  EmptyStateProps\n>(\n  (\n    {\n      heading,\n      description,\n      illustration,\n      actions: { primary, secondary },\n      ...restProps\n    },\n    ref\n  ) => (\n    <Container ref={ref} {...restProps}>\n      {illustration != null && (\n        <Illustration src={illustration} aria-hidden alt='' />\n      )}\n      <Heading ref={ref} level={2} styledAs='h3'>\n        {heading}\n      </Heading>\n      {description != null && (\n        <Description css={{ color: '$text-neutrals-subtle' }}>\n          {description}\n        </Description>\n      )}\n      <Actions>\n        <Button {...primary} variant='primary'>\n          {primary.label}\n        </Button>\n\n        {secondary != null && (\n          <Button {...secondary} variant='ghost'>\n            {secondary.label}\n          </Button>\n        )}\n      </Actions>\n    </Container>\n  )\n)\n"],"names":["styled","Box","React","jsxs","Heading","jsx","Button"],"mappings":";;;;;;;;;;;;;;;AA2BA,MAAM,SAAA,GAAYA,4BAAOC,mBAAK,EAAA;AAAA,EAC5B,UAAY,EAAA,sBAAA;AAAA,EACZ,OAAS,EAAA,MAAA;AAAA,EACT,OAAS,EAAA,MAAA;AAAA,EACT,aAAe,EAAA,QAAA;AAAA,EACf,GAAK,EAAA,KAAA;AAAA,EACL,QAAU,EAAA,OAAA;AAAA,EACV,QAAU,EAAA,OAAA;AACZ,CAAC,CAAA,CAAA;AAED,MAAM,YAAA,GAAeD,4BAAO,KAAO,EAAA;AAAA,EACjC,KAAO,EAAA,OAAA;AAAA,EACP,OAAS,EAAA,OAAA;AACX,CAAC,CAAA,CAAA;AAED,MAAM,WAAA,GAAcA,4BAAOC,mBAAK,EAAA;AAAA,EAC9B,KAAO,EAAA,uBAAA;AACT,CAAC,CAAA,CAAA;AAED,MAAM,OAAA,GAAUD,4BAAOC,mBAAK,EAAA;AAAA,EAC1B,QAAU,EAAA,MAAA;AAAA,EACV,OAAS,EAAA,MAAA;AAAA,EACT,QAAU,EAAA,MAAA;AAAA,EACV,GAAK,EAAA,MAAA;AACP,CAAC,CAAA,CAAA;AAIM,MAAM,aAAaC,yBAAM,CAAA,UAAA;AAAA,EAI9B,CACE;AAAA,IACE,OAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,OAAA,EAAS,EAAE,OAAA,EAAS,SAAU,EAAA;AAAA,IAC9B,GAAG,SAAA;AAAA,KAEL,GAEA,qBAAAC,eAAA,CAAC,SAAU,EAAA,EAAA,GAAA,EAAW,GAAG,SACtB,EAAA,QAAA,EAAA;AAAA,IAAgB,YAAA,IAAA,IAAA,mCACd,YAAa,EAAA,EAAA,GAAA,EAAK,cAAc,aAAW,EAAA,IAAA,EAAC,KAAI,EAAG,EAAA,CAAA;AAAA,mCAErDC,8BAAQ,EAAA,EAAA,GAAA,EAAU,OAAO,CAAG,EAAA,QAAA,EAAS,MACnC,QACH,EAAA,OAAA,EAAA,CAAA;AAAA,IACC,WAAA,IAAe,wBACbC,cAAA,CAAA,WAAA,EAAA,EAAY,KAAK,EAAE,KAAA,EAAO,uBAAwB,EAAA,EAChD,QACH,EAAA,WAAA,EAAA,CAAA;AAAA,oCAED,OACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAAA,cAAA,CAACC,6BAAQ,GAAG,OAAA,EAAS,OAAQ,EAAA,SAAA,EAC1B,kBAAQ,KACX,EAAA,CAAA;AAAA,MAEC,SAAA,IAAa,wBACXD,cAAA,CAAAC,yBAAA,EAAA,EAAQ,GAAG,SAAW,EAAA,OAAA,EAAQ,OAC5B,EAAA,QAAA,EAAA,SAAA,CAAU,KACb,EAAA,CAAA;AAAA,KAEJ,EAAA,CAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/module.js

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { styled } from '@mirohq/design-system-stitches';
+import { Box } from '@mirohq/design-system-box';
+import { Button } from '@mirohq/design-system-button';
+import { Heading } from '@mirohq/design-system-typography';
+
+const Container = styled(Box, {
+  background: "$background-neutrals",
+  padding: "$500",
+  display: "flex",
+  flexDirection: "column",
+  gap: "$50",
+  minWidth: "290px",
+  maxWidth: "480px"
+});
+const Illustration = styled("img", {
+  width: "112px",
+  display: "block"
+});
+const Description = styled(Box, {
+  color: "$text-neutrals-subtle"
+});
+const Actions = styled(Box, {
+  paddingY: "$200",
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "$100"
+});
+const EmptyState = React.forwardRef(
+  ({
+    heading,
+    description,
+    illustration,
+    actions: { primary, secondary },
+    ...restProps
+  }, ref) => /* @__PURE__ */ jsxs(Container, { ref, ...restProps, children: [
+    illustration != null && /* @__PURE__ */ jsx(Illustration, { src: illustration, "aria-hidden": true, alt: "" }),
+    /* @__PURE__ */ jsx(Heading, { ref, level: 2, styledAs: "h3", children: heading }),
+    description != null && /* @__PURE__ */ jsx(Description, { css: { color: "$text-neutrals-subtle" }, children: description }),
+    /* @__PURE__ */ jsxs(Actions, { children: [
+      /* @__PURE__ */ jsx(Button, { ...primary, variant: "primary", children: primary.label }),
+      secondary != null && /* @__PURE__ */ jsx(Button, { ...secondary, variant: "ghost", children: secondary.label })
+    ] })
+  ] })
+);
+
+export { EmptyState };
+//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.js","sources":["../src/empty-state.tsx"],"sourcesContent":["import React from 'react'\nimport type { ReactNode, ElementRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Box } from '@mirohq/design-system-box'\nimport { Button } from '@mirohq/design-system-button'\nimport type { ButtonProps } from '@mirohq/design-system-button'\nimport type { BoxProps } from '@mirohq/design-system-box'\nimport { Heading } from '@mirohq/design-system-typography'\n\n// Types\n// -----------------------------------------------------------------------------\nexport interface EmptyStateProps extends Omit<BoxProps, 'children'> {\n  heading: ReactNode\n  description?: ReactNode\n  illustration?: string\n  actions: {\n    primary: ActionButton\n    secondary?: ActionButton\n  }\n}\n\ntype ActionButton = Omit<ButtonProps, 'variant' | 'children'> & {\n  label: ReactNode\n}\n\n// Styled\n// -----------------------------------------------------------------------------\nconst Container = styled(Box, {\n  background: '$background-neutrals',\n  padding: '$500',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '$50',\n  minWidth: '290px',\n  maxWidth: '480px',\n})\n\nconst Illustration = styled('img', {\n  width: '112px',\n  display: 'block',\n})\n\nconst Description = styled(Box, {\n  color: '$text-neutrals-subtle',\n})\n\nconst Actions = styled(Box, {\n  paddingY: '$200',\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: '$100',\n})\n\n// Component\n// -----------------------------------------------------------------------------\nexport const EmptyState = React.forwardRef<\n  ElementRef<typeof Box>,\n  EmptyStateProps\n>(\n  (\n    {\n      heading,\n      description,\n      illustration,\n      actions: { primary, secondary },\n      ...restProps\n    },\n    ref\n  ) => (\n    <Container ref={ref} {...restProps}>\n      {illustration != null && (\n        <Illustration src={illustration} aria-hidden alt='' />\n      )}\n      <Heading ref={ref} level={2} styledAs='h3'>\n        {heading}\n      </Heading>\n      {description != null && (\n        <Description css={{ color: '$text-neutrals-subtle' }}>\n          {description}\n        </Description>\n      )}\n      <Actions>\n        <Button {...primary} variant='primary'>\n          {primary.label}\n        </Button>\n\n        {secondary != null && (\n          <Button {...secondary} variant='ghost'>\n            {secondary.label}\n          </Button>\n        )}\n      </Actions>\n    </Container>\n  )\n)\n"],"names":[],"mappings":";;;;;;;AA2BA,MAAM,SAAA,GAAY,OAAO,GAAK,EAAA;AAAA,EAC5B,UAAY,EAAA,sBAAA;AAAA,EACZ,OAAS,EAAA,MAAA;AAAA,EACT,OAAS,EAAA,MAAA;AAAA,EACT,aAAe,EAAA,QAAA;AAAA,EACf,GAAK,EAAA,KAAA;AAAA,EACL,QAAU,EAAA,OAAA;AAAA,EACV,QAAU,EAAA,OAAA;AACZ,CAAC,CAAA,CAAA;AAED,MAAM,YAAA,GAAe,OAAO,KAAO,EAAA;AAAA,EACjC,KAAO,EAAA,OAAA;AAAA,EACP,OAAS,EAAA,OAAA;AACX,CAAC,CAAA,CAAA;AAED,MAAM,WAAA,GAAc,OAAO,GAAK,EAAA;AAAA,EAC9B,KAAO,EAAA,uBAAA;AACT,CAAC,CAAA,CAAA;AAED,MAAM,OAAA,GAAU,OAAO,GAAK,EAAA;AAAA,EAC1B,QAAU,EAAA,MAAA;AAAA,EACV,OAAS,EAAA,MAAA;AAAA,EACT,QAAU,EAAA,MAAA;AAAA,EACV,GAAK,EAAA,MAAA;AACP,CAAC,CAAA,CAAA;AAIM,MAAM,aAAa,KAAM,CAAA,UAAA;AAAA,EAI9B,CACE;AAAA,IACE,OAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,OAAA,EAAS,EAAE,OAAA,EAAS,SAAU,EAAA;AAAA,IAC9B,GAAG,SAAA;AAAA,KAEL,GAEA,qBAAA,IAAA,CAAC,SAAU,EAAA,EAAA,GAAA,EAAW,GAAG,SACtB,EAAA,QAAA,EAAA;AAAA,IAAgB,YAAA,IAAA,IAAA,wBACd,YAAa,EAAA,EAAA,GAAA,EAAK,cAAc,aAAW,EAAA,IAAA,EAAC,KAAI,EAAG,EAAA,CAAA;AAAA,wBAErD,OAAQ,EAAA,EAAA,GAAA,EAAU,OAAO,CAAG,EAAA,QAAA,EAAS,MACnC,QACH,EAAA,OAAA,EAAA,CAAA;AAAA,IACC,WAAA,IAAe,wBACb,GAAA,CAAA,WAAA,EAAA,EAAY,KAAK,EAAE,KAAA,EAAO,uBAAwB,EAAA,EAChD,QACH,EAAA,WAAA,EAAA,CAAA;AAAA,yBAED,OACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAQ,GAAG,OAAA,EAAS,OAAQ,EAAA,SAAA,EAC1B,kBAAQ,KACX,EAAA,CAAA;AAAA,MAEC,SAAA,IAAa,wBACX,GAAA,CAAA,MAAA,EAAA,EAAQ,GAAG,SAAW,EAAA,OAAA,EAAQ,OAC5B,EAAA,QAAA,EAAA,SAAA,CAAU,KACb,EAAA,CAAA;AAAA,KAEJ,EAAA,CAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/types.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react';
+import { ButtonProps } from '@mirohq/design-system-button';
+import { BoxProps } from '@mirohq/design-system-box';
+
+interface EmptyStateProps extends Omit<BoxProps, 'children'> {
+    heading: ReactNode;
+    description?: ReactNode;
+    illustration?: string;
+    actions: {
+        primary: ActionButton;
+        secondary?: ActionButton;
+    };
+}
+declare type ActionButton = Omit<ButtonProps, 'variant' | 'children'> & {
+    label: ReactNode;
+};
+declare const EmptyState: React.ForwardRefExoticComponent<Omit<EmptyStateProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { EmptyState, EmptyStateProps };

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@mirohq/design-system-patterns",
+  "version": "0.1.0",
+  "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"
+  },
+  "peerDependencies": {
+    "@stitches/react": "^1.2.8",
+    "react": "^16.14 || ^17 || ^18"
+  },
+  "dependencies": {
+    "@mirohq/design-system-box": "^2.1.59",
+    "@mirohq/design-system-button": "^4.2.3",
+    "@mirohq/design-system-stitches": "^2.6.28",
+    "@mirohq/design-system-typography": "^0.6.6"
+  },
+  "devDependencies": {
+    "@mirohq/brand-assets": "^0.2.1"
+  },
+  "scripts": {
+    "build": "rollup -c ../../rollup.config.js",
+    "clean": "rm -rf dist",
+    "prebuild": "pnpm clean"
+  }
+}