@mirohq/design-system-patterns 0.2.10 → 0.3.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/main.js +2 -2
- package/dist/main.js.map +1 -1
- package/dist/module.js +2 -2
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +4 -2
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -43,10 +43,10 @@ const Actions = designSystemStitches.styled(designSystemBox.Box, {
|
|
|
43
43
|
});
|
|
44
44
|
const PatternEmptyState = React__default["default"].forwardRef(({ heading, description, illustration, actions, ...restProps }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Container, { ref, ...restProps, children: [
|
|
45
45
|
illustration != null && /* @__PURE__ */ jsxRuntime.jsx(Illustration, { src: illustration, "aria-hidden": true, alt: "" }),
|
|
46
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystemTypography.Heading, { ref, level: 2, styledAs: "h3", children: heading }),
|
|
46
|
+
heading != null && /* @__PURE__ */ jsxRuntime.jsx(designSystemTypography.Heading, { ref, level: 2, styledAs: "h3", children: heading }),
|
|
47
47
|
description != null && /* @__PURE__ */ jsxRuntime.jsx(Description, { css: { color: "$text-neutrals-subtle" }, children: description }),
|
|
48
48
|
actions != null && /* @__PURE__ */ jsxRuntime.jsxs(Actions, { children: [
|
|
49
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystemButton.Button, {
|
|
49
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystemButton.Button, { variant: "primary", ...actions.primary, children: actions.primary.label }),
|
|
50
50
|
actions.secondary != null && /* @__PURE__ */ jsxRuntime.jsx(designSystemButton.Button, { ...actions.secondary, variant: "ghost", children: actions.secondary.label })
|
|
51
51
|
] })
|
|
52
52
|
] }));
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/empty-state/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 PatternEmptyStateProps extends Omit<BoxProps, 'children'> {\n heading
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/empty-state/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 PatternEmptyStateProps extends Omit<BoxProps, 'children'> {\n heading?: ReactNode\n description?: ReactNode\n illustration?: string\n actions?: {\n primary: ActionButton & {\n variant?: 'primary' | 'secondary'\n }\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 minWidth: '304px',\n maxWidth: '480px',\n textAlign: 'center',\n alignItems: 'center',\n})\n\nconst Illustration = styled('img', {\n width: '84px',\n display: 'block',\n marginBottom: '$150',\n})\n\nconst Description = styled(Box, {\n color: '$text-neutrals-subtle',\n marginTop: '$100',\n maxWidth: '304px',\n})\n\nconst Actions = styled(Box, {\n marginTop: '$150',\n paddingY: '$200',\n display: 'flex',\n flexDirection: 'column',\n gap: '$100',\n alignItems: 'center',\n})\n\n// Component\n// -----------------------------------------------------------------------------\nexport const PatternEmptyState = React.forwardRef<\n ElementRef<typeof Box>,\n PatternEmptyStateProps\n>(({ heading, description, illustration, actions, ...restProps }, ref) => (\n <Container ref={ref} {...restProps}>\n {illustration != null && (\n <Illustration src={illustration} aria-hidden alt='' />\n )}\n {heading != null && (\n <Heading ref={ref} level={2} styledAs='h3'>\n {heading}\n </Heading>\n )}\n {description != null && (\n <Description css={{ color: '$text-neutrals-subtle' }}>\n {description}\n </Description>\n )}\n {actions != null && (\n <Actions>\n <Button variant='primary' {...actions.primary}>\n {actions.primary.label}\n </Button>\n\n {actions.secondary != null && (\n <Button {...actions.secondary} variant='ghost'>\n {actions.secondary.label}\n </Button>\n )}\n </Actions>\n )}\n </Container>\n))\n"],"names":["styled","Box","React","jsx","Heading","jsxs","Button"],"mappings":";;;;;;;;;;;;;;;AA6BA,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,QAAU,EAAA,OAAA;AAAA,EACV,QAAU,EAAA,OAAA;AAAA,EACV,SAAW,EAAA,QAAA;AAAA,EACX,UAAY,EAAA,QAAA;AACd,CAAC,CAAA,CAAA;AAED,MAAM,YAAA,GAAeD,4BAAO,KAAO,EAAA;AAAA,EACjC,KAAO,EAAA,MAAA;AAAA,EACP,OAAS,EAAA,OAAA;AAAA,EACT,YAAc,EAAA,MAAA;AAChB,CAAC,CAAA,CAAA;AAED,MAAM,WAAA,GAAcA,4BAAOC,mBAAK,EAAA;AAAA,EAC9B,KAAO,EAAA,uBAAA;AAAA,EACP,SAAW,EAAA,MAAA;AAAA,EACX,QAAU,EAAA,OAAA;AACZ,CAAC,CAAA,CAAA;AAED,MAAM,OAAA,GAAUD,4BAAOC,mBAAK,EAAA;AAAA,EAC1B,SAAW,EAAA,MAAA;AAAA,EACX,QAAU,EAAA,MAAA;AAAA,EACV,OAAS,EAAA,MAAA;AAAA,EACT,aAAe,EAAA,QAAA;AAAA,EACf,GAAK,EAAA,MAAA;AAAA,EACL,UAAY,EAAA,QAAA;AACd,CAAC,CAAA,CAAA;AAIM,MAAM,oBAAoBC,yBAAM,CAAA,UAAA,CAGrC,CAAC,EAAE,SAAS,WAAa,EAAA,YAAA,EAAc,OAAS,EAAA,GAAG,WAAa,EAAA,GAAA,qCAC/D,SAAU,EAAA,EAAA,GAAA,EAAW,GAAG,SACtB,EAAA,QAAA,EAAA;AAAA,EAAgB,YAAA,IAAA,IAAA,mCACd,YAAa,EAAA,EAAA,GAAA,EAAK,cAAc,aAAW,EAAA,IAAA,EAAC,KAAI,EAAG,EAAA,CAAA;AAAA,EAErD,OAAA,IAAW,wBACTC,cAAA,CAAAC,8BAAA,EAAA,EAAQ,KAAU,KAAO,EAAA,CAAA,EAAG,QAAS,EAAA,IAAA,EACnC,QACH,EAAA,OAAA,EAAA,CAAA;AAAA,EAED,WAAA,IAAe,wBACbD,cAAA,CAAA,WAAA,EAAA,EAAY,KAAK,EAAE,KAAA,EAAO,uBAAwB,EAAA,EAChD,QACH,EAAA,WAAA,EAAA,CAAA;AAAA,EAED,OAAA,IAAW,IACV,oBAAAE,eAAA,CAAC,OACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAACF,cAAA,CAAAG,yBAAA,EAAA,EAAO,SAAQ,SAAW,EAAA,GAAG,QAAQ,OACnC,EAAA,QAAA,EAAA,OAAA,CAAQ,QAAQ,KACnB,EAAA,CAAA;AAAA,IAEC,OAAQ,CAAA,SAAA,IAAa,IACpB,oBAAAH,cAAA,CAACG,yBAAQ,EAAA,EAAA,GAAG,OAAQ,CAAA,SAAA,EAAW,OAAQ,EAAA,OAAA,EACpC,QAAQ,EAAA,OAAA,CAAA,SAAA,CAAU,KACrB,EAAA,CAAA;AAAA,GAEJ,EAAA,CAAA;AAAA,CAAA,EAEJ,CACD;;;;"}
|
package/dist/module.js
CHANGED
|
@@ -35,10 +35,10 @@ const Actions = styled(Box, {
|
|
|
35
35
|
});
|
|
36
36
|
const PatternEmptyState = React.forwardRef(({ heading, description, illustration, actions, ...restProps }, ref) => /* @__PURE__ */ jsxs(Container, { ref, ...restProps, children: [
|
|
37
37
|
illustration != null && /* @__PURE__ */ jsx(Illustration, { src: illustration, "aria-hidden": true, alt: "" }),
|
|
38
|
-
/* @__PURE__ */ jsx(Heading, { ref, level: 2, styledAs: "h3", children: heading }),
|
|
38
|
+
heading != null && /* @__PURE__ */ jsx(Heading, { ref, level: 2, styledAs: "h3", children: heading }),
|
|
39
39
|
description != null && /* @__PURE__ */ jsx(Description, { css: { color: "$text-neutrals-subtle" }, children: description }),
|
|
40
40
|
actions != null && /* @__PURE__ */ jsxs(Actions, { children: [
|
|
41
|
-
/* @__PURE__ */ jsx(Button, {
|
|
41
|
+
/* @__PURE__ */ jsx(Button, { variant: "primary", ...actions.primary, children: actions.primary.label }),
|
|
42
42
|
actions.secondary != null && /* @__PURE__ */ jsx(Button, { ...actions.secondary, variant: "ghost", children: actions.secondary.label })
|
|
43
43
|
] })
|
|
44
44
|
] }));
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/empty-state/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 PatternEmptyStateProps extends Omit<BoxProps, 'children'> {\n heading
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/empty-state/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 PatternEmptyStateProps extends Omit<BoxProps, 'children'> {\n heading?: ReactNode\n description?: ReactNode\n illustration?: string\n actions?: {\n primary: ActionButton & {\n variant?: 'primary' | 'secondary'\n }\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 minWidth: '304px',\n maxWidth: '480px',\n textAlign: 'center',\n alignItems: 'center',\n})\n\nconst Illustration = styled('img', {\n width: '84px',\n display: 'block',\n marginBottom: '$150',\n})\n\nconst Description = styled(Box, {\n color: '$text-neutrals-subtle',\n marginTop: '$100',\n maxWidth: '304px',\n})\n\nconst Actions = styled(Box, {\n marginTop: '$150',\n paddingY: '$200',\n display: 'flex',\n flexDirection: 'column',\n gap: '$100',\n alignItems: 'center',\n})\n\n// Component\n// -----------------------------------------------------------------------------\nexport const PatternEmptyState = React.forwardRef<\n ElementRef<typeof Box>,\n PatternEmptyStateProps\n>(({ heading, description, illustration, actions, ...restProps }, ref) => (\n <Container ref={ref} {...restProps}>\n {illustration != null && (\n <Illustration src={illustration} aria-hidden alt='' />\n )}\n {heading != null && (\n <Heading ref={ref} level={2} styledAs='h3'>\n {heading}\n </Heading>\n )}\n {description != null && (\n <Description css={{ color: '$text-neutrals-subtle' }}>\n {description}\n </Description>\n )}\n {actions != null && (\n <Actions>\n <Button variant='primary' {...actions.primary}>\n {actions.primary.label}\n </Button>\n\n {actions.secondary != null && (\n <Button {...actions.secondary} variant='ghost'>\n {actions.secondary.label}\n </Button>\n )}\n </Actions>\n )}\n </Container>\n))\n"],"names":[],"mappings":";;;;;;;AA6BA,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,QAAU,EAAA,OAAA;AAAA,EACV,QAAU,EAAA,OAAA;AAAA,EACV,SAAW,EAAA,QAAA;AAAA,EACX,UAAY,EAAA,QAAA;AACd,CAAC,CAAA,CAAA;AAED,MAAM,YAAA,GAAe,OAAO,KAAO,EAAA;AAAA,EACjC,KAAO,EAAA,MAAA;AAAA,EACP,OAAS,EAAA,OAAA;AAAA,EACT,YAAc,EAAA,MAAA;AAChB,CAAC,CAAA,CAAA;AAED,MAAM,WAAA,GAAc,OAAO,GAAK,EAAA;AAAA,EAC9B,KAAO,EAAA,uBAAA;AAAA,EACP,SAAW,EAAA,MAAA;AAAA,EACX,QAAU,EAAA,OAAA;AACZ,CAAC,CAAA,CAAA;AAED,MAAM,OAAA,GAAU,OAAO,GAAK,EAAA;AAAA,EAC1B,SAAW,EAAA,MAAA;AAAA,EACX,QAAU,EAAA,MAAA;AAAA,EACV,OAAS,EAAA,MAAA;AAAA,EACT,aAAe,EAAA,QAAA;AAAA,EACf,GAAK,EAAA,MAAA;AAAA,EACL,UAAY,EAAA,QAAA;AACd,CAAC,CAAA,CAAA;AAIM,MAAM,oBAAoB,KAAM,CAAA,UAAA,CAGrC,CAAC,EAAE,SAAS,WAAa,EAAA,YAAA,EAAc,OAAS,EAAA,GAAG,WAAa,EAAA,GAAA,0BAC/D,SAAU,EAAA,EAAA,GAAA,EAAW,GAAG,SACtB,EAAA,QAAA,EAAA;AAAA,EAAgB,YAAA,IAAA,IAAA,wBACd,YAAa,EAAA,EAAA,GAAA,EAAK,cAAc,aAAW,EAAA,IAAA,EAAC,KAAI,EAAG,EAAA,CAAA;AAAA,EAErD,OAAA,IAAW,wBACT,GAAA,CAAA,OAAA,EAAA,EAAQ,KAAU,KAAO,EAAA,CAAA,EAAG,QAAS,EAAA,IAAA,EACnC,QACH,EAAA,OAAA,EAAA,CAAA;AAAA,EAED,WAAA,IAAe,wBACb,GAAA,CAAA,WAAA,EAAA,EAAY,KAAK,EAAE,KAAA,EAAO,uBAAwB,EAAA,EAChD,QACH,EAAA,WAAA,EAAA,CAAA;AAAA,EAED,OAAA,IAAW,IACV,oBAAA,IAAA,CAAC,OACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,MAAA,EAAA,EAAO,SAAQ,SAAW,EAAA,GAAG,QAAQ,OACnC,EAAA,QAAA,EAAA,OAAA,CAAQ,QAAQ,KACnB,EAAA,CAAA;AAAA,IAEC,OAAQ,CAAA,SAAA,IAAa,IACpB,oBAAA,GAAA,CAAC,MAAQ,EAAA,EAAA,GAAG,OAAQ,CAAA,SAAA,EAAW,OAAQ,EAAA,OAAA,EACpC,QAAQ,EAAA,OAAA,CAAA,SAAA,CAAU,KACrB,EAAA,CAAA;AAAA,GAEJ,EAAA,CAAA;AAAA,CAAA,EAEJ,CACD;;;;"}
|
package/dist/types.d.ts
CHANGED
|
@@ -3,11 +3,13 @@ import { ButtonProps } from '@mirohq/design-system-button';
|
|
|
3
3
|
import { BoxProps } from '@mirohq/design-system-box';
|
|
4
4
|
|
|
5
5
|
interface PatternEmptyStateProps extends Omit<BoxProps, 'children'> {
|
|
6
|
-
heading
|
|
6
|
+
heading?: ReactNode;
|
|
7
7
|
description?: ReactNode;
|
|
8
8
|
illustration?: string;
|
|
9
9
|
actions?: {
|
|
10
|
-
primary: ActionButton
|
|
10
|
+
primary: ActionButton & {
|
|
11
|
+
variant?: 'primary' | 'secondary';
|
|
12
|
+
};
|
|
11
13
|
secondary?: ActionButton;
|
|
12
14
|
};
|
|
13
15
|
}
|