@mirohq/design-system-tag 0.1.23 → 0.2.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 +6 -6
- package/dist/main.js.map +1 -1
- package/dist/module.js +6 -6
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +2 -2
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -31,11 +31,11 @@ const StyledTag = designSystemStitches.styled(designSystemPrimitive.Primitive.di
|
|
|
31
31
|
backgroundColor: "$background-neutrals-inverted",
|
|
32
32
|
color: "$text-neutrals-inverted"
|
|
33
33
|
},
|
|
34
|
-
|
|
34
|
+
neutral: {
|
|
35
35
|
backgroundColor: "$background-neutrals-subtle",
|
|
36
36
|
color: "$text-neutrals-subtle"
|
|
37
37
|
},
|
|
38
|
-
|
|
38
|
+
primary: {
|
|
39
39
|
backgroundColor: "$background-primary-prominent",
|
|
40
40
|
color: "$text-primary-inverted"
|
|
41
41
|
},
|
|
@@ -43,7 +43,7 @@ const StyledTag = designSystemStitches.styled(designSystemPrimitive.Primitive.di
|
|
|
43
43
|
backgroundColor: "$background-primary-subtle",
|
|
44
44
|
color: "$text-primary"
|
|
45
45
|
},
|
|
46
|
-
|
|
46
|
+
warning: {
|
|
47
47
|
backgroundColor: "$background-warning-prominent",
|
|
48
48
|
color: "$text-neutrals"
|
|
49
49
|
},
|
|
@@ -51,7 +51,7 @@ const StyledTag = designSystemStitches.styled(designSystemPrimitive.Primitive.di
|
|
|
51
51
|
backgroundColor: "$background-warning-subtle",
|
|
52
52
|
color: "$text-warning-subtle"
|
|
53
53
|
},
|
|
54
|
-
|
|
54
|
+
success: {
|
|
55
55
|
backgroundColor: "$background-success-prominent",
|
|
56
56
|
color: "$text-success-inverted"
|
|
57
57
|
},
|
|
@@ -59,7 +59,7 @@ const StyledTag = designSystemStitches.styled(designSystemPrimitive.Primitive.di
|
|
|
59
59
|
backgroundColor: "$background-success",
|
|
60
60
|
color: "$text-success"
|
|
61
61
|
},
|
|
62
|
-
|
|
62
|
+
error: {
|
|
63
63
|
backgroundColor: "$background-danger-prominent",
|
|
64
64
|
color: "$text-danger-inverted"
|
|
65
65
|
},
|
|
@@ -80,7 +80,7 @@ const StyledInner = designSystemStitches.styled(designSystemPrimitive.Primitive.
|
|
|
80
80
|
});
|
|
81
81
|
|
|
82
82
|
const Tag = React__default["default"].forwardRef(
|
|
83
|
-
({ variant = "primary
|
|
83
|
+
({ variant = "primary", children, ...props }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledTag, { ...props, variant, ref: forwardRef, children: /* @__PURE__ */ jsxRuntime.jsx(StyledInner, { children }) })
|
|
84
84
|
);
|
|
85
85
|
|
|
86
86
|
exports.Tag = Tag;
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/tag.styled.tsx","../src/tag.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledTag = styled(Primitive.div, {\n display: 'inline-flex',\n textTransform: 'uppercase',\n width: 'fit-content',\n paddingY: '$0',\n paddingX: '$50',\n borderRadius: '$25',\n fontSize: '$125',\n lineHeight: 1.6,\n fontWeight: 'bold',\n letterSpacing: 0.25,\n '::selection': {\n backgroundColor: 'transparent',\n },\n variants: {\n variant: {\n 'beta-prominent': {\n backgroundColor: '$background-neutrals-inverted',\n color: '$text-neutrals-inverted',\n },\n
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/tag.styled.tsx","../src/tag.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledTag = styled(Primitive.div, {\n display: 'inline-flex',\n textTransform: 'uppercase',\n width: 'fit-content',\n paddingY: '$0',\n paddingX: '$50',\n borderRadius: '$25',\n fontSize: '$125',\n lineHeight: 1.6,\n fontWeight: 'bold',\n letterSpacing: 0.25,\n '::selection': {\n backgroundColor: 'transparent',\n },\n variants: {\n variant: {\n 'beta-prominent': {\n backgroundColor: '$background-neutrals-inverted',\n color: '$text-neutrals-inverted',\n },\n neutral: {\n backgroundColor: '$background-neutrals-subtle',\n color: '$text-neutrals-subtle',\n },\n primary: {\n backgroundColor: '$background-primary-prominent',\n color: '$text-primary-inverted',\n },\n 'primary-subtle': {\n backgroundColor: '$background-primary-subtle',\n color: '$text-primary',\n },\n warning: {\n backgroundColor: '$background-warning-prominent',\n color: '$text-neutrals',\n },\n 'warning-subtle': {\n backgroundColor: '$background-warning-subtle',\n color: '$text-warning-subtle',\n },\n success: {\n backgroundColor: '$background-success-prominent',\n color: '$text-success-inverted',\n },\n 'success-subtle': {\n backgroundColor: '$background-success',\n color: '$text-success',\n },\n error: {\n backgroundColor: '$background-danger-prominent',\n color: '$text-danger-inverted',\n },\n 'error-subtle': {\n backgroundColor: '$background-danger-subtle',\n color: '$text-danger',\n },\n },\n },\n defaultVariants: {\n variant: 'primary-prominent',\n },\n})\n\nexport const StyledInner = styled(Primitive.span, {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n})\n\nexport type StyledTagProps = ComponentPropsWithRef<typeof StyledTag>\n","import type { ElementRef, ReactNode } from 'react'\nimport React from 'react'\n\nimport type { StyledTagProps } from './tag.styled'\nimport { StyledInner, StyledTag } from './tag.styled'\n\nexport interface TagProps extends StyledTagProps {\n /**\n *\n * Change the tag style.\n * @default 'primary-prominent'\n */\n variant?: StyledTagProps['variant']\n\n /**\n * The text content.\n */\n children: ReactNode\n}\n\nexport const Tag = React.forwardRef<ElementRef<typeof StyledTag>, TagProps>(\n ({ variant = 'primary', children, ...props }, forwardRef) => (\n <StyledTag {...props} variant={variant} ref={forwardRef}>\n <StyledInner>{children}</StyledInner>\n </StyledTag>\n )\n)\n"],"names":["styled","Primitive","React","jsx"],"mappings":";;;;;;;;;;;;;AAIa,MAAA,SAAA,GAAYA,2BAAO,CAAAC,+BAAA,CAAU,GAAK,EAAA;AAAA,EAC7C,OAAS,EAAA,aAAA;AAAA,EACT,aAAe,EAAA,WAAA;AAAA,EACf,KAAO,EAAA,aAAA;AAAA,EACP,QAAU,EAAA,IAAA;AAAA,EACV,QAAU,EAAA,KAAA;AAAA,EACV,YAAc,EAAA,KAAA;AAAA,EACd,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA,GAAA;AAAA,EACZ,UAAY,EAAA,MAAA;AAAA,EACZ,aAAe,EAAA,IAAA;AAAA,EACf,aAAe,EAAA;AAAA,IACb,eAAiB,EAAA,aAAA;AAAA,GACnB;AAAA,EACA,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,gBAAkB,EAAA;AAAA,QAChB,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,yBAAA;AAAA,OACT;AAAA,MACA,OAAS,EAAA;AAAA,QACP,eAAiB,EAAA,6BAAA;AAAA,QACjB,KAAO,EAAA,uBAAA;AAAA,OACT;AAAA,MACA,OAAS,EAAA;AAAA,QACP,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,wBAAA;AAAA,OACT;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,eAAiB,EAAA,4BAAA;AAAA,QACjB,KAAO,EAAA,eAAA;AAAA,OACT;AAAA,MACA,OAAS,EAAA;AAAA,QACP,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,gBAAA;AAAA,OACT;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,eAAiB,EAAA,4BAAA;AAAA,QACjB,KAAO,EAAA,sBAAA;AAAA,OACT;AAAA,MACA,OAAS,EAAA;AAAA,QACP,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,wBAAA;AAAA,OACT;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,eAAiB,EAAA,qBAAA;AAAA,QACjB,KAAO,EAAA,eAAA;AAAA,OACT;AAAA,MACA,KAAO,EAAA;AAAA,QACL,eAAiB,EAAA,8BAAA;AAAA,QACjB,KAAO,EAAA,uBAAA;AAAA,OACT;AAAA,MACA,cAAgB,EAAA;AAAA,QACd,eAAiB,EAAA,2BAAA;AAAA,QACjB,KAAO,EAAA,cAAA;AAAA,OACT;AAAA,KACF;AAAA,GACF;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,OAAS,EAAA,mBAAA;AAAA,GACX;AACF,CAAC,CAAA,CAAA;AAEY,MAAA,WAAA,GAAcD,2BAAO,CAAAC,+BAAA,CAAU,IAAM,EAAA;AAAA,EAChD,UAAY,EAAA,QAAA;AAAA,EACZ,QAAU,EAAA,QAAA;AAAA,EACV,YAAc,EAAA,UAAA;AAChB,CAAC,CAAA;;ACnDM,MAAM,MAAMC,yBAAM,CAAA,UAAA;AAAA,EACvB,CAAC,EAAE,OAAA,GAAU,WAAW,QAAU,EAAA,GAAG,OAAS,EAAA,UAAA,oCAC3C,SAAW,EAAA,EAAA,GAAG,OAAO,OAAkB,EAAA,GAAA,EAAK,YAC3C,QAAC,kBAAAC,cAAA,CAAA,WAAA,EAAA,EAAa,UAAS,CACzB,EAAA,CAAA;AAEJ;;;;"}
|
package/dist/module.js
CHANGED
|
@@ -23,11 +23,11 @@ const StyledTag = styled(Primitive.div, {
|
|
|
23
23
|
backgroundColor: "$background-neutrals-inverted",
|
|
24
24
|
color: "$text-neutrals-inverted"
|
|
25
25
|
},
|
|
26
|
-
|
|
26
|
+
neutral: {
|
|
27
27
|
backgroundColor: "$background-neutrals-subtle",
|
|
28
28
|
color: "$text-neutrals-subtle"
|
|
29
29
|
},
|
|
30
|
-
|
|
30
|
+
primary: {
|
|
31
31
|
backgroundColor: "$background-primary-prominent",
|
|
32
32
|
color: "$text-primary-inverted"
|
|
33
33
|
},
|
|
@@ -35,7 +35,7 @@ const StyledTag = styled(Primitive.div, {
|
|
|
35
35
|
backgroundColor: "$background-primary-subtle",
|
|
36
36
|
color: "$text-primary"
|
|
37
37
|
},
|
|
38
|
-
|
|
38
|
+
warning: {
|
|
39
39
|
backgroundColor: "$background-warning-prominent",
|
|
40
40
|
color: "$text-neutrals"
|
|
41
41
|
},
|
|
@@ -43,7 +43,7 @@ const StyledTag = styled(Primitive.div, {
|
|
|
43
43
|
backgroundColor: "$background-warning-subtle",
|
|
44
44
|
color: "$text-warning-subtle"
|
|
45
45
|
},
|
|
46
|
-
|
|
46
|
+
success: {
|
|
47
47
|
backgroundColor: "$background-success-prominent",
|
|
48
48
|
color: "$text-success-inverted"
|
|
49
49
|
},
|
|
@@ -51,7 +51,7 @@ const StyledTag = styled(Primitive.div, {
|
|
|
51
51
|
backgroundColor: "$background-success",
|
|
52
52
|
color: "$text-success"
|
|
53
53
|
},
|
|
54
|
-
|
|
54
|
+
error: {
|
|
55
55
|
backgroundColor: "$background-danger-prominent",
|
|
56
56
|
color: "$text-danger-inverted"
|
|
57
57
|
},
|
|
@@ -72,7 +72,7 @@ const StyledInner = styled(Primitive.span, {
|
|
|
72
72
|
});
|
|
73
73
|
|
|
74
74
|
const Tag = React.forwardRef(
|
|
75
|
-
({ variant = "primary
|
|
75
|
+
({ variant = "primary", children, ...props }, forwardRef) => /* @__PURE__ */ jsx(StyledTag, { ...props, variant, ref: forwardRef, children: /* @__PURE__ */ jsx(StyledInner, { children }) })
|
|
76
76
|
);
|
|
77
77
|
|
|
78
78
|
export { Tag };
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/tag.styled.tsx","../src/tag.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledTag = styled(Primitive.div, {\n display: 'inline-flex',\n textTransform: 'uppercase',\n width: 'fit-content',\n paddingY: '$0',\n paddingX: '$50',\n borderRadius: '$25',\n fontSize: '$125',\n lineHeight: 1.6,\n fontWeight: 'bold',\n letterSpacing: 0.25,\n '::selection': {\n backgroundColor: 'transparent',\n },\n variants: {\n variant: {\n 'beta-prominent': {\n backgroundColor: '$background-neutrals-inverted',\n color: '$text-neutrals-inverted',\n },\n
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/tag.styled.tsx","../src/tag.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledTag = styled(Primitive.div, {\n display: 'inline-flex',\n textTransform: 'uppercase',\n width: 'fit-content',\n paddingY: '$0',\n paddingX: '$50',\n borderRadius: '$25',\n fontSize: '$125',\n lineHeight: 1.6,\n fontWeight: 'bold',\n letterSpacing: 0.25,\n '::selection': {\n backgroundColor: 'transparent',\n },\n variants: {\n variant: {\n 'beta-prominent': {\n backgroundColor: '$background-neutrals-inverted',\n color: '$text-neutrals-inverted',\n },\n neutral: {\n backgroundColor: '$background-neutrals-subtle',\n color: '$text-neutrals-subtle',\n },\n primary: {\n backgroundColor: '$background-primary-prominent',\n color: '$text-primary-inverted',\n },\n 'primary-subtle': {\n backgroundColor: '$background-primary-subtle',\n color: '$text-primary',\n },\n warning: {\n backgroundColor: '$background-warning-prominent',\n color: '$text-neutrals',\n },\n 'warning-subtle': {\n backgroundColor: '$background-warning-subtle',\n color: '$text-warning-subtle',\n },\n success: {\n backgroundColor: '$background-success-prominent',\n color: '$text-success-inverted',\n },\n 'success-subtle': {\n backgroundColor: '$background-success',\n color: '$text-success',\n },\n error: {\n backgroundColor: '$background-danger-prominent',\n color: '$text-danger-inverted',\n },\n 'error-subtle': {\n backgroundColor: '$background-danger-subtle',\n color: '$text-danger',\n },\n },\n },\n defaultVariants: {\n variant: 'primary-prominent',\n },\n})\n\nexport const StyledInner = styled(Primitive.span, {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n})\n\nexport type StyledTagProps = ComponentPropsWithRef<typeof StyledTag>\n","import type { ElementRef, ReactNode } from 'react'\nimport React from 'react'\n\nimport type { StyledTagProps } from './tag.styled'\nimport { StyledInner, StyledTag } from './tag.styled'\n\nexport interface TagProps extends StyledTagProps {\n /**\n *\n * Change the tag style.\n * @default 'primary-prominent'\n */\n variant?: StyledTagProps['variant']\n\n /**\n * The text content.\n */\n children: ReactNode\n}\n\nexport const Tag = React.forwardRef<ElementRef<typeof StyledTag>, TagProps>(\n ({ variant = 'primary', children, ...props }, forwardRef) => (\n <StyledTag {...props} variant={variant} ref={forwardRef}>\n <StyledInner>{children}</StyledInner>\n </StyledTag>\n )\n)\n"],"names":[],"mappings":";;;;;AAIa,MAAA,SAAA,GAAY,MAAO,CAAA,SAAA,CAAU,GAAK,EAAA;AAAA,EAC7C,OAAS,EAAA,aAAA;AAAA,EACT,aAAe,EAAA,WAAA;AAAA,EACf,KAAO,EAAA,aAAA;AAAA,EACP,QAAU,EAAA,IAAA;AAAA,EACV,QAAU,EAAA,KAAA;AAAA,EACV,YAAc,EAAA,KAAA;AAAA,EACd,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA,GAAA;AAAA,EACZ,UAAY,EAAA,MAAA;AAAA,EACZ,aAAe,EAAA,IAAA;AAAA,EACf,aAAe,EAAA;AAAA,IACb,eAAiB,EAAA,aAAA;AAAA,GACnB;AAAA,EACA,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,gBAAkB,EAAA;AAAA,QAChB,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,yBAAA;AAAA,OACT;AAAA,MACA,OAAS,EAAA;AAAA,QACP,eAAiB,EAAA,6BAAA;AAAA,QACjB,KAAO,EAAA,uBAAA;AAAA,OACT;AAAA,MACA,OAAS,EAAA;AAAA,QACP,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,wBAAA;AAAA,OACT;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,eAAiB,EAAA,4BAAA;AAAA,QACjB,KAAO,EAAA,eAAA;AAAA,OACT;AAAA,MACA,OAAS,EAAA;AAAA,QACP,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,gBAAA;AAAA,OACT;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,eAAiB,EAAA,4BAAA;AAAA,QACjB,KAAO,EAAA,sBAAA;AAAA,OACT;AAAA,MACA,OAAS,EAAA;AAAA,QACP,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,wBAAA;AAAA,OACT;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,eAAiB,EAAA,qBAAA;AAAA,QACjB,KAAO,EAAA,eAAA;AAAA,OACT;AAAA,MACA,KAAO,EAAA;AAAA,QACL,eAAiB,EAAA,8BAAA;AAAA,QACjB,KAAO,EAAA,uBAAA;AAAA,OACT;AAAA,MACA,cAAgB,EAAA;AAAA,QACd,eAAiB,EAAA,2BAAA;AAAA,QACjB,KAAO,EAAA,cAAA;AAAA,OACT;AAAA,KACF;AAAA,GACF;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,OAAS,EAAA,mBAAA;AAAA,GACX;AACF,CAAC,CAAA,CAAA;AAEY,MAAA,WAAA,GAAc,MAAO,CAAA,SAAA,CAAU,IAAM,EAAA;AAAA,EAChD,UAAY,EAAA,QAAA;AAAA,EACZ,QAAU,EAAA,QAAA;AAAA,EACV,YAAc,EAAA,UAAA;AAChB,CAAC,CAAA;;ACnDM,MAAM,MAAM,KAAM,CAAA,UAAA;AAAA,EACvB,CAAC,EAAE,OAAA,GAAU,WAAW,QAAU,EAAA,GAAG,OAAS,EAAA,UAAA,yBAC3C,SAAW,EAAA,EAAA,GAAG,OAAO,OAAkB,EAAA,GAAA,EAAK,YAC3C,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA,EAAa,UAAS,CACzB,EAAA,CAAA;AAEJ;;;;"}
|
package/dist/types.d.ts
CHANGED
|
@@ -5,9 +5,9 @@ import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches'
|
|
|
5
5
|
import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
|
|
6
6
|
|
|
7
7
|
declare const StyledTag: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, "variant"> & _stitches_react_types_styled_component.TransformProps<{
|
|
8
|
-
variant?: "beta-prominent" | "
|
|
8
|
+
variant?: "beta-prominent" | "neutral" | "primary" | "primary-subtle" | "warning" | "warning-subtle" | "success" | "success-subtle" | "error" | "error-subtle" | undefined;
|
|
9
9
|
}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
|
|
10
|
-
variant?: "beta-prominent" | "
|
|
10
|
+
variant?: "beta-prominent" | "neutral" | "primary" | "primary-subtle" | "warning" | "warning-subtle" | "success" | "success-subtle" | "error" | "error-subtle" | undefined;
|
|
11
11
|
}, {}>;
|
|
12
12
|
declare type StyledTagProps = ComponentPropsWithRef<typeof StyledTag>;
|
|
13
13
|
|