@mirohq/design-system-typography 0.2.13 → 0.2.14
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 +15 -19
- package/dist/main.js.map +1 -1
- package/dist/module.js +15 -19
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +9 -9
- package/package.json +2 -2
package/dist/main.js
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
6
|
var React = require('react');
|
|
6
7
|
var designSystemStitches = require('@mirohq/design-system-stitches');
|
|
7
8
|
var designSystemPrimitive = require('@mirohq/design-system-primitive');
|
|
@@ -53,13 +54,9 @@ var Styled = /*#__PURE__*/Object.freeze({
|
|
|
53
54
|
|
|
54
55
|
const Heading = React__default["default"].forwardRef(
|
|
55
56
|
({ level, styledAs, children, ...props }, forwardRef) => {
|
|
56
|
-
const HeadingLevel = Styled[
|
|
57
|
+
const HeadingLevel = Styled["H".concat(level)];
|
|
57
58
|
const styledAsLevel = styledAs !== void 0 ? +styledAs.replace("h", "") : styledAs;
|
|
58
|
-
return /* @__PURE__ */
|
|
59
|
-
...props,
|
|
60
|
-
level: styledAsLevel != null ? styledAsLevel : level,
|
|
61
|
-
ref: forwardRef
|
|
62
|
-
}, children);
|
|
59
|
+
return /* @__PURE__ */ jsxRuntime.jsx(HeadingLevel, { ...props, level: styledAsLevel != null ? styledAsLevel : level, ref: forwardRef, children });
|
|
63
60
|
}
|
|
64
61
|
);
|
|
65
62
|
|
|
@@ -89,12 +86,7 @@ const StyledText = designSystemStitches.styled(designSystemPrimitive.Primitive.s
|
|
|
89
86
|
});
|
|
90
87
|
|
|
91
88
|
const Text = React__default["default"].forwardRef(
|
|
92
|
-
({ size, weight, ...restProps }, forwardRef) => /* @__PURE__ */
|
|
93
|
-
ref: forwardRef,
|
|
94
|
-
size,
|
|
95
|
-
weight,
|
|
96
|
-
...restProps
|
|
97
|
-
})
|
|
89
|
+
({ size, weight, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledText, { ref: forwardRef, size, weight, ...restProps })
|
|
98
90
|
);
|
|
99
91
|
|
|
100
92
|
const StyledParagraph = designSystemStitches.styled(StyledText, {
|
|
@@ -104,13 +96,17 @@ const StyledParagraph = designSystemStitches.styled(StyledText, {
|
|
|
104
96
|
}
|
|
105
97
|
});
|
|
106
98
|
|
|
107
|
-
const Paragraph = React__default["default"].forwardRef(({ size, weight, children, ...restProps }, forwardRef) => /* @__PURE__ */
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
99
|
+
const Paragraph = React__default["default"].forwardRef(({ size, weight, children, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
100
|
+
StyledParagraph,
|
|
101
|
+
{
|
|
102
|
+
ref: forwardRef,
|
|
103
|
+
size,
|
|
104
|
+
weight,
|
|
105
|
+
asChild: true,
|
|
106
|
+
...restProps,
|
|
107
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("p", { children })
|
|
108
|
+
}
|
|
109
|
+
));
|
|
114
110
|
|
|
115
111
|
exports.Heading = Heading;
|
|
116
112
|
exports.Paragraph = Paragraph;
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/heading.styled.tsx","../src/heading.tsx","../src/text.styled.ts","../src/text.tsx","../src/paragraph.styled.ts","../src/paragraph.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst styles = {\n all: 'unset',\n display: 'block',\n fontFamily: 'Formular, sans-serif',\n margin: 0,\n color: '$text-neutrals',\n fontWeight: 500,\n variants: {\n level: {\n 1: {\n lineHeight: 1.2,\n fontSize: '$400',\n },\n 2: {\n lineHeight: 1.35,\n fontSize: '$300',\n },\n 3: {\n lineHeight: 1.4,\n fontSize: '$250',\n },\n 4: {\n lineHeight: 1.5,\n fontSize: '$200',\n },\n },\n },\n}\n\nexport const H1 = styled(Primitive.h1, styles)\nexport const H2 = styled(Primitive.h2, styles)\nexport const H3 = styled(Primitive.h3, styles)\nexport const H4 = styled(Primitive.h4, styles)\n\nexport type StyledHeadingProps = ComponentPropsWithRef<typeof H1>\n","import type { ElementRef } from 'react'\nimport React from 'react'\n\nimport * as Styled from './heading.styled'\nimport type { StyledHeadingProps } from './heading.styled'\n\ntype Level = 1 | 2 | 3 | 4\ntype Tags = 'h1' | 'h2' | 'h3' | 'h4'\n\nexport interface HeadingProps extends StyledHeadingProps {\n /**\n * The sematic heading level used in the HTML markup.\n */\n level: Level\n\n /**\n * The way the sematic tag looks, it changes the styling of the heading.\n */\n styledAs?: Tags\n}\n\nexport const Heading = React.forwardRef<ElementRef<Tags>, HeadingProps>(\n ({ level, styledAs, children, ...props }, forwardRef) => {\n const HeadingLevel = Styled[`H${level}`]\n const styledAsLevel =\n styledAs !== undefined ? (+styledAs.replace('h', '') as Level) : styledAs\n return (\n <HeadingLevel {...props} level={styledAsLevel ?? level} ref={forwardRef}>\n {children}\n </HeadingLevel>\n )\n }\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledText = styled(Primitive.span, {\n lineHeight: 1.5,\n variants: {\n size: {\n normal: {\n fontSize: '$200',\n },\n small: {\n fontSize: '$175',\n },\n mini: {\n fontSize: '$150',\n },\n },\n weight: {\n normal: {\n fontWeight: 400,\n },\n bold: {\n fontWeight: 650,\n },\n },\n },\n})\n\nexport type StyledTextProps = ComponentPropsWithRef<typeof StyledText>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledText } from './text.styled'\nimport type { StyledTextProps } from './text.styled'\n\nexport interface TextProps extends StyledTextProps {\n /**\n * The content.\n */\n children: React.ReactNode\n\n /**\n * Change the text font-size.\n */\n size?: StyledTextProps['size']\n\n /**\n * Change the text font-weight.\n */\n weight?: StyledTextProps['weight']\n}\n\nexport const Text = React.forwardRef<ElementRef<typeof StyledText>, TextProps>(\n ({ size, weight, ...restProps }, forwardRef) => (\n <StyledText ref={forwardRef} size={size} weight={weight} {...restProps} />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { StyledText } from './text.styled'\n\nexport const StyledParagraph = styled(StyledText, {\n margin: 0,\n\n '&:not(:last-child)': {\n marginBottom: '$200',\n },\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledParagraph } from './paragraph.styled'\nimport type { TextProps } from './text'\n\nexport interface ParagraphProps extends TextProps {\n /**\n * The content.\n */\n children: React.ReactNode\n\n /**\n * Change the paragraph font-size.\n */\n size?: TextProps['size']\n\n /**\n * Change the paragraph font-weight.\n */\n weight?: TextProps['weight']\n}\n\nexport const Paragraph = React.forwardRef<\n ElementRef<typeof StyledParagraph>,\n ParagraphProps\n>(({ size, weight, children, ...restProps }, forwardRef) => (\n <StyledParagraph\n ref={forwardRef}\n size={size}\n weight={weight}\n asChild\n {...restProps}\n >\n <p>{children}</p>\n </StyledParagraph>\n))\n"],"names":["styled","Primitive","React"],"mappings":"
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/heading.styled.tsx","../src/heading.tsx","../src/text.styled.ts","../src/text.tsx","../src/paragraph.styled.ts","../src/paragraph.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst styles = {\n all: 'unset',\n display: 'block',\n fontFamily: 'Formular, sans-serif',\n margin: 0,\n color: '$text-neutrals',\n fontWeight: 500,\n variants: {\n level: {\n 1: {\n lineHeight: 1.2,\n fontSize: '$400',\n },\n 2: {\n lineHeight: 1.35,\n fontSize: '$300',\n },\n 3: {\n lineHeight: 1.4,\n fontSize: '$250',\n },\n 4: {\n lineHeight: 1.5,\n fontSize: '$200',\n },\n },\n },\n}\n\nexport const H1 = styled(Primitive.h1, styles)\nexport const H2 = styled(Primitive.h2, styles)\nexport const H3 = styled(Primitive.h3, styles)\nexport const H4 = styled(Primitive.h4, styles)\n\nexport type StyledHeadingProps = ComponentPropsWithRef<typeof H1>\n","import type { ElementRef } from 'react'\nimport React from 'react'\n\nimport * as Styled from './heading.styled'\nimport type { StyledHeadingProps } from './heading.styled'\n\ntype Level = 1 | 2 | 3 | 4\ntype Tags = 'h1' | 'h2' | 'h3' | 'h4'\n\nexport interface HeadingProps extends StyledHeadingProps {\n /**\n * The sematic heading level used in the HTML markup.\n */\n level: Level\n\n /**\n * The way the sematic tag looks, it changes the styling of the heading.\n */\n styledAs?: Tags\n}\n\nexport const Heading = React.forwardRef<ElementRef<Tags>, HeadingProps>(\n ({ level, styledAs, children, ...props }, forwardRef) => {\n const HeadingLevel = Styled[`H${level}`]\n const styledAsLevel =\n styledAs !== undefined ? (+styledAs.replace('h', '') as Level) : styledAs\n return (\n <HeadingLevel {...props} level={styledAsLevel ?? level} ref={forwardRef}>\n {children}\n </HeadingLevel>\n )\n }\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledText = styled(Primitive.span, {\n lineHeight: 1.5,\n variants: {\n size: {\n normal: {\n fontSize: '$200',\n },\n small: {\n fontSize: '$175',\n },\n mini: {\n fontSize: '$150',\n },\n },\n weight: {\n normal: {\n fontWeight: 400,\n },\n bold: {\n fontWeight: 650,\n },\n },\n },\n})\n\nexport type StyledTextProps = ComponentPropsWithRef<typeof StyledText>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledText } from './text.styled'\nimport type { StyledTextProps } from './text.styled'\n\nexport interface TextProps extends StyledTextProps {\n /**\n * The content.\n */\n children: React.ReactNode\n\n /**\n * Change the text font-size.\n */\n size?: StyledTextProps['size']\n\n /**\n * Change the text font-weight.\n */\n weight?: StyledTextProps['weight']\n}\n\nexport const Text = React.forwardRef<ElementRef<typeof StyledText>, TextProps>(\n ({ size, weight, ...restProps }, forwardRef) => (\n <StyledText ref={forwardRef} size={size} weight={weight} {...restProps} />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { StyledText } from './text.styled'\n\nexport const StyledParagraph = styled(StyledText, {\n margin: 0,\n\n '&:not(:last-child)': {\n marginBottom: '$200',\n },\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledParagraph } from './paragraph.styled'\nimport type { TextProps } from './text'\n\nexport interface ParagraphProps extends TextProps {\n /**\n * The content.\n */\n children: React.ReactNode\n\n /**\n * Change the paragraph font-size.\n */\n size?: TextProps['size']\n\n /**\n * Change the paragraph font-weight.\n */\n weight?: TextProps['weight']\n}\n\nexport const Paragraph = React.forwardRef<\n ElementRef<typeof StyledParagraph>,\n ParagraphProps\n>(({ size, weight, children, ...restProps }, forwardRef) => (\n <StyledParagraph\n ref={forwardRef}\n size={size}\n weight={weight}\n asChild\n {...restProps}\n >\n <p>{children}</p>\n </StyledParagraph>\n))\n"],"names":["styled","Primitive","React","jsx"],"mappings":"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"}
|
package/dist/module.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
1
2
|
import React from 'react';
|
|
2
3
|
import { styled } from '@mirohq/design-system-stitches';
|
|
3
4
|
import { Primitive } from '@mirohq/design-system-primitive';
|
|
@@ -45,13 +46,9 @@ var Styled = /*#__PURE__*/Object.freeze({
|
|
|
45
46
|
|
|
46
47
|
const Heading = React.forwardRef(
|
|
47
48
|
({ level, styledAs, children, ...props }, forwardRef) => {
|
|
48
|
-
const HeadingLevel = Styled[
|
|
49
|
+
const HeadingLevel = Styled["H".concat(level)];
|
|
49
50
|
const styledAsLevel = styledAs !== void 0 ? +styledAs.replace("h", "") : styledAs;
|
|
50
|
-
return /* @__PURE__ */
|
|
51
|
-
...props,
|
|
52
|
-
level: styledAsLevel != null ? styledAsLevel : level,
|
|
53
|
-
ref: forwardRef
|
|
54
|
-
}, children);
|
|
51
|
+
return /* @__PURE__ */ jsx(HeadingLevel, { ...props, level: styledAsLevel != null ? styledAsLevel : level, ref: forwardRef, children });
|
|
55
52
|
}
|
|
56
53
|
);
|
|
57
54
|
|
|
@@ -81,12 +78,7 @@ const StyledText = styled(Primitive.span, {
|
|
|
81
78
|
});
|
|
82
79
|
|
|
83
80
|
const Text = React.forwardRef(
|
|
84
|
-
({ size, weight, ...restProps }, forwardRef) => /* @__PURE__ */
|
|
85
|
-
ref: forwardRef,
|
|
86
|
-
size,
|
|
87
|
-
weight,
|
|
88
|
-
...restProps
|
|
89
|
-
})
|
|
81
|
+
({ size, weight, ...restProps }, forwardRef) => /* @__PURE__ */ jsx(StyledText, { ref: forwardRef, size, weight, ...restProps })
|
|
90
82
|
);
|
|
91
83
|
|
|
92
84
|
const StyledParagraph = styled(StyledText, {
|
|
@@ -96,13 +88,17 @@ const StyledParagraph = styled(StyledText, {
|
|
|
96
88
|
}
|
|
97
89
|
});
|
|
98
90
|
|
|
99
|
-
const Paragraph = React.forwardRef(({ size, weight, children, ...restProps }, forwardRef) => /* @__PURE__ */
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
91
|
+
const Paragraph = React.forwardRef(({ size, weight, children, ...restProps }, forwardRef) => /* @__PURE__ */ jsx(
|
|
92
|
+
StyledParagraph,
|
|
93
|
+
{
|
|
94
|
+
ref: forwardRef,
|
|
95
|
+
size,
|
|
96
|
+
weight,
|
|
97
|
+
asChild: true,
|
|
98
|
+
...restProps,
|
|
99
|
+
children: /* @__PURE__ */ jsx("p", { children })
|
|
100
|
+
}
|
|
101
|
+
));
|
|
106
102
|
|
|
107
103
|
export { Heading, Paragraph, Text };
|
|
108
104
|
//# sourceMappingURL=module.js.map
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/heading.styled.tsx","../src/heading.tsx","../src/text.styled.ts","../src/text.tsx","../src/paragraph.styled.ts","../src/paragraph.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst styles = {\n all: 'unset',\n display: 'block',\n fontFamily: 'Formular, sans-serif',\n margin: 0,\n color: '$text-neutrals',\n fontWeight: 500,\n variants: {\n level: {\n 1: {\n lineHeight: 1.2,\n fontSize: '$400',\n },\n 2: {\n lineHeight: 1.35,\n fontSize: '$300',\n },\n 3: {\n lineHeight: 1.4,\n fontSize: '$250',\n },\n 4: {\n lineHeight: 1.5,\n fontSize: '$200',\n },\n },\n },\n}\n\nexport const H1 = styled(Primitive.h1, styles)\nexport const H2 = styled(Primitive.h2, styles)\nexport const H3 = styled(Primitive.h3, styles)\nexport const H4 = styled(Primitive.h4, styles)\n\nexport type StyledHeadingProps = ComponentPropsWithRef<typeof H1>\n","import type { ElementRef } from 'react'\nimport React from 'react'\n\nimport * as Styled from './heading.styled'\nimport type { StyledHeadingProps } from './heading.styled'\n\ntype Level = 1 | 2 | 3 | 4\ntype Tags = 'h1' | 'h2' | 'h3' | 'h4'\n\nexport interface HeadingProps extends StyledHeadingProps {\n /**\n * The sematic heading level used in the HTML markup.\n */\n level: Level\n\n /**\n * The way the sematic tag looks, it changes the styling of the heading.\n */\n styledAs?: Tags\n}\n\nexport const Heading = React.forwardRef<ElementRef<Tags>, HeadingProps>(\n ({ level, styledAs, children, ...props }, forwardRef) => {\n const HeadingLevel = Styled[`H${level}`]\n const styledAsLevel =\n styledAs !== undefined ? (+styledAs.replace('h', '') as Level) : styledAs\n return (\n <HeadingLevel {...props} level={styledAsLevel ?? level} ref={forwardRef}>\n {children}\n </HeadingLevel>\n )\n }\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledText = styled(Primitive.span, {\n lineHeight: 1.5,\n variants: {\n size: {\n normal: {\n fontSize: '$200',\n },\n small: {\n fontSize: '$175',\n },\n mini: {\n fontSize: '$150',\n },\n },\n weight: {\n normal: {\n fontWeight: 400,\n },\n bold: {\n fontWeight: 650,\n },\n },\n },\n})\n\nexport type StyledTextProps = ComponentPropsWithRef<typeof StyledText>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledText } from './text.styled'\nimport type { StyledTextProps } from './text.styled'\n\nexport interface TextProps extends StyledTextProps {\n /**\n * The content.\n */\n children: React.ReactNode\n\n /**\n * Change the text font-size.\n */\n size?: StyledTextProps['size']\n\n /**\n * Change the text font-weight.\n */\n weight?: StyledTextProps['weight']\n}\n\nexport const Text = React.forwardRef<ElementRef<typeof StyledText>, TextProps>(\n ({ size, weight, ...restProps }, forwardRef) => (\n <StyledText ref={forwardRef} size={size} weight={weight} {...restProps} />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { StyledText } from './text.styled'\n\nexport const StyledParagraph = styled(StyledText, {\n margin: 0,\n\n '&:not(:last-child)': {\n marginBottom: '$200',\n },\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledParagraph } from './paragraph.styled'\nimport type { TextProps } from './text'\n\nexport interface ParagraphProps extends TextProps {\n /**\n * The content.\n */\n children: React.ReactNode\n\n /**\n * Change the paragraph font-size.\n */\n size?: TextProps['size']\n\n /**\n * Change the paragraph font-weight.\n */\n weight?: TextProps['weight']\n}\n\nexport const Paragraph = React.forwardRef<\n ElementRef<typeof StyledParagraph>,\n ParagraphProps\n>(({ size, weight, children, ...restProps }, forwardRef) => (\n <StyledParagraph\n ref={forwardRef}\n size={size}\n weight={weight}\n asChild\n {...restProps}\n >\n <p>{children}</p>\n </StyledParagraph>\n))\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/heading.styled.tsx","../src/heading.tsx","../src/text.styled.ts","../src/text.tsx","../src/paragraph.styled.ts","../src/paragraph.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst styles = {\n all: 'unset',\n display: 'block',\n fontFamily: 'Formular, sans-serif',\n margin: 0,\n color: '$text-neutrals',\n fontWeight: 500,\n variants: {\n level: {\n 1: {\n lineHeight: 1.2,\n fontSize: '$400',\n },\n 2: {\n lineHeight: 1.35,\n fontSize: '$300',\n },\n 3: {\n lineHeight: 1.4,\n fontSize: '$250',\n },\n 4: {\n lineHeight: 1.5,\n fontSize: '$200',\n },\n },\n },\n}\n\nexport const H1 = styled(Primitive.h1, styles)\nexport const H2 = styled(Primitive.h2, styles)\nexport const H3 = styled(Primitive.h3, styles)\nexport const H4 = styled(Primitive.h4, styles)\n\nexport type StyledHeadingProps = ComponentPropsWithRef<typeof H1>\n","import type { ElementRef } from 'react'\nimport React from 'react'\n\nimport * as Styled from './heading.styled'\nimport type { StyledHeadingProps } from './heading.styled'\n\ntype Level = 1 | 2 | 3 | 4\ntype Tags = 'h1' | 'h2' | 'h3' | 'h4'\n\nexport interface HeadingProps extends StyledHeadingProps {\n /**\n * The sematic heading level used in the HTML markup.\n */\n level: Level\n\n /**\n * The way the sematic tag looks, it changes the styling of the heading.\n */\n styledAs?: Tags\n}\n\nexport const Heading = React.forwardRef<ElementRef<Tags>, HeadingProps>(\n ({ level, styledAs, children, ...props }, forwardRef) => {\n const HeadingLevel = Styled[`H${level}`]\n const styledAsLevel =\n styledAs !== undefined ? (+styledAs.replace('h', '') as Level) : styledAs\n return (\n <HeadingLevel {...props} level={styledAsLevel ?? level} ref={forwardRef}>\n {children}\n </HeadingLevel>\n )\n }\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledText = styled(Primitive.span, {\n lineHeight: 1.5,\n variants: {\n size: {\n normal: {\n fontSize: '$200',\n },\n small: {\n fontSize: '$175',\n },\n mini: {\n fontSize: '$150',\n },\n },\n weight: {\n normal: {\n fontWeight: 400,\n },\n bold: {\n fontWeight: 650,\n },\n },\n },\n})\n\nexport type StyledTextProps = ComponentPropsWithRef<typeof StyledText>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledText } from './text.styled'\nimport type { StyledTextProps } from './text.styled'\n\nexport interface TextProps extends StyledTextProps {\n /**\n * The content.\n */\n children: React.ReactNode\n\n /**\n * Change the text font-size.\n */\n size?: StyledTextProps['size']\n\n /**\n * Change the text font-weight.\n */\n weight?: StyledTextProps['weight']\n}\n\nexport const Text = React.forwardRef<ElementRef<typeof StyledText>, TextProps>(\n ({ size, weight, ...restProps }, forwardRef) => (\n <StyledText ref={forwardRef} size={size} weight={weight} {...restProps} />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { StyledText } from './text.styled'\n\nexport const StyledParagraph = styled(StyledText, {\n margin: 0,\n\n '&:not(:last-child)': {\n marginBottom: '$200',\n },\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledParagraph } from './paragraph.styled'\nimport type { TextProps } from './text'\n\nexport interface ParagraphProps extends TextProps {\n /**\n * The content.\n */\n children: React.ReactNode\n\n /**\n * Change the paragraph font-size.\n */\n size?: TextProps['size']\n\n /**\n * Change the paragraph font-weight.\n */\n weight?: TextProps['weight']\n}\n\nexport const Paragraph = React.forwardRef<\n ElementRef<typeof StyledParagraph>,\n ParagraphProps\n>(({ size, weight, children, ...restProps }, forwardRef) => (\n <StyledParagraph\n ref={forwardRef}\n size={size}\n weight={weight}\n asChild\n {...restProps}\n >\n <p>{children}</p>\n </StyledParagraph>\n))\n"],"names":[],"mappings":";;;;;AAIA,MAAM,MAAS,GAAA;AAAA,EACb,GAAK,EAAA,OAAA;AAAA,EACL,OAAS,EAAA,OAAA;AAAA,EACT,UAAY,EAAA,sBAAA;AAAA,EACZ,MAAQ,EAAA,CAAA;AAAA,EACR,KAAO,EAAA,gBAAA;AAAA,EACP,UAAY,EAAA,GAAA;AAAA,EACZ,QAAU,EAAA;AAAA,IACR,KAAO,EAAA;AAAA,MACL,CAAG,EAAA;AAAA,QACD,UAAY,EAAA,GAAA;AAAA,QACZ,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,MACA,CAAG,EAAA;AAAA,QACD,UAAY,EAAA,IAAA;AAAA,QACZ,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,MACA,CAAG,EAAA;AAAA,QACD,UAAY,EAAA,GAAA;AAAA,QACZ,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,MACA,CAAG,EAAA;AAAA,QACD,UAAY,EAAA,GAAA;AAAA,QACZ,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,KACF;AAAA,GACF;AACF,CAAA,CAAA;AAEO,MAAM,EAAK,GAAA,MAAA,CAAO,SAAU,CAAA,EAAA,EAAI,MAAM,CAAA,CAAA;AACtC,MAAM,EAAK,GAAA,MAAA,CAAO,SAAU,CAAA,EAAA,EAAI,MAAM,CAAA,CAAA;AACtC,MAAM,EAAK,GAAA,MAAA,CAAO,SAAU,CAAA,EAAA,EAAI,MAAM,CAAA,CAAA;AACtC,MAAM,EAAK,GAAA,MAAA,CAAO,SAAU,CAAA,EAAA,EAAI,MAAM,CAAA;;;;;;;;;;ACftC,MAAM,UAAU,KAAM,CAAA,UAAA;AAAA,EAC3B,CAAC,EAAE,KAAO,EAAA,QAAA,EAAU,UAAU,GAAG,KAAA,IAAS,UAAe,KAAA;AACvD,IAAM,MAAA,YAAA,GAAe,MAAO,CAAA,GAAA,CAAI,MAAO,CAAA,KAAA,CAAA,CAAA,CAAA;AACvC,IAAM,MAAA,aAAA,GACJ,aAAa,KAAa,CAAA,GAAA,CAAC,SAAS,OAAQ,CAAA,GAAA,EAAK,EAAE,CAAc,GAAA,QAAA,CAAA;AACnE,IACE,uBAAA,GAAA,CAAC,gBAAc,GAAG,KAAA,EAAO,OAAO,aAAiB,IAAA,IAAA,GAAA,aAAA,GAAA,KAAA,EAAO,GAAK,EAAA,UAAA,EAC1D,QACH,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF;;AC5Ba,MAAA,UAAA,GAAa,MAAO,CAAA,SAAA,CAAU,IAAM,EAAA;AAAA,EAC/C,UAAY,EAAA,GAAA;AAAA,EACZ,QAAU,EAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,MAAQ,EAAA;AAAA,QACN,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,MACA,KAAO,EAAA;AAAA,QACL,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,MACA,IAAM,EAAA;AAAA,QACJ,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,KACF;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,MAAQ,EAAA;AAAA,QACN,UAAY,EAAA,GAAA;AAAA,OACd;AAAA,MACA,IAAM,EAAA;AAAA,QACJ,UAAY,EAAA,GAAA;AAAA,OACd;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;ACJM,MAAM,OAAO,KAAM,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,IAAM,EAAA,MAAA,EAAQ,GAAG,SAAU,EAAA,EAAG,UAC/B,qBAAA,GAAA,CAAC,cAAW,GAAK,EAAA,UAAA,EAAY,IAAY,EAAA,MAAA,EAAiB,GAAG,SAAW,EAAA,CAAA;AAE5E;;ACvBa,MAAA,eAAA,GAAkB,OAAO,UAAY,EAAA;AAAA,EAChD,MAAQ,EAAA,CAAA;AAAA,EAER,oBAAsB,EAAA;AAAA,IACpB,YAAc,EAAA,MAAA;AAAA,GAChB;AACF,CAAC,CAAA;;ACaY,MAAA,SAAA,GAAY,KAAM,CAAA,UAAA,CAG7B,CAAC,EAAE,IAAM,EAAA,MAAA,EAAQ,QAAU,EAAA,GAAG,SAAU,EAAA,EAAG,UAC3C,qBAAA,GAAA;AAAA,EAAC,eAAA;AAAA,EAAA;AAAA,IACC,GAAK,EAAA,UAAA;AAAA,IACL,IAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAO,EAAA,IAAA;AAAA,IACN,GAAG,SAAA;AAAA,IAEJ,QAAA,kBAAA,GAAA,CAAC,OAAG,QAAS,EAAA,CAAA;AAAA,GAAA;AACf,CACD;;;;"}
|
package/dist/types.d.ts
CHANGED
|
@@ -5,11 +5,11 @@ import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches'
|
|
|
5
5
|
import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
|
|
6
6
|
import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
|
|
7
7
|
|
|
8
|
-
declare const H1: react.ForwardRefExoticComponent<
|
|
8
|
+
declare const H1: react.ForwardRefExoticComponent<Omit<Omit<{
|
|
9
9
|
level?: 1 | 4 | "1" | 2 | 3 | "4" | "2" | "3" | undefined;
|
|
10
10
|
}, "level"> & _stitches_react_types_styled_component.TransformProps<{
|
|
11
11
|
level?: 1 | 4 | "1" | 2 | 3 | "4" | "2" | "3" | undefined;
|
|
12
|
-
}, {}> & _mirohq_design_system_stitches.SafeProps<Omit<
|
|
12
|
+
}, {}> & _mirohq_design_system_stitches.SafeProps<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
|
|
13
13
|
ref?: ((instance: HTMLHeadingElement | null) => void) | react.RefObject<HTMLHeadingElement> | null | undefined;
|
|
14
14
|
} & {
|
|
15
15
|
asChild?: boolean | undefined;
|
|
@@ -460,7 +460,7 @@ declare const H1: react.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
460
460
|
}> | undefined;
|
|
461
461
|
}> & {
|
|
462
462
|
children?: react.ReactNode;
|
|
463
|
-
} & _mirohq_design_system_stitches.CustomStylesProps, "
|
|
463
|
+
} & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLHeadingElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"h1">>, {
|
|
464
464
|
level?: 1 | 4 | "1" | 2 | 3 | "4" | "2" | "3" | undefined;
|
|
465
465
|
}, {}>;
|
|
466
466
|
declare type StyledHeadingProps = ComponentPropsWithRef<typeof H1>;
|
|
@@ -477,15 +477,15 @@ interface HeadingProps extends StyledHeadingProps {
|
|
|
477
477
|
*/
|
|
478
478
|
styledAs?: Tags;
|
|
479
479
|
}
|
|
480
|
-
declare const Heading: react__default.ForwardRefExoticComponent<
|
|
480
|
+
declare const Heading: react__default.ForwardRefExoticComponent<Omit<HeadingProps, "ref"> & react__default.RefAttributes<HTMLHeadingElement>>;
|
|
481
481
|
|
|
482
|
-
declare const StyledText: react.ForwardRefExoticComponent<
|
|
482
|
+
declare const StyledText: react.ForwardRefExoticComponent<Omit<Omit<{
|
|
483
483
|
size?: "small" | "normal" | "mini" | undefined;
|
|
484
484
|
weight?: "bold" | "normal" | undefined;
|
|
485
485
|
}, "size" | "weight"> & _stitches_react_types_styled_component.TransformProps<{
|
|
486
486
|
size?: "small" | "normal" | "mini" | undefined;
|
|
487
487
|
weight?: "bold" | "normal" | undefined;
|
|
488
|
-
}, {}> & _mirohq_design_system_stitches.SafeProps<Omit<
|
|
488
|
+
}, {}> & _mirohq_design_system_stitches.SafeProps<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
489
489
|
ref?: ((instance: HTMLSpanElement | null) => void) | react.RefObject<HTMLSpanElement> | null | undefined;
|
|
490
490
|
} & {
|
|
491
491
|
asChild?: boolean | undefined;
|
|
@@ -936,7 +936,7 @@ declare const StyledText: react.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
936
936
|
}> | undefined;
|
|
937
937
|
}> & {
|
|
938
938
|
children?: react.ReactNode;
|
|
939
|
-
} & _mirohq_design_system_stitches.CustomStylesProps, "
|
|
939
|
+
} & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLSpanElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"span">>, {
|
|
940
940
|
size?: "small" | "normal" | "mini" | undefined;
|
|
941
941
|
weight?: "bold" | "normal" | undefined;
|
|
942
942
|
}, {}>;
|
|
@@ -956,7 +956,7 @@ interface TextProps extends StyledTextProps {
|
|
|
956
956
|
*/
|
|
957
957
|
weight?: StyledTextProps['weight'];
|
|
958
958
|
}
|
|
959
|
-
declare const Text: react__default.ForwardRefExoticComponent<
|
|
959
|
+
declare const Text: react__default.ForwardRefExoticComponent<Omit<TextProps, "ref"> & react__default.RefAttributes<HTMLSpanElement>>;
|
|
960
960
|
|
|
961
961
|
interface ParagraphProps extends TextProps {
|
|
962
962
|
/**
|
|
@@ -972,6 +972,6 @@ interface ParagraphProps extends TextProps {
|
|
|
972
972
|
*/
|
|
973
973
|
weight?: TextProps['weight'];
|
|
974
974
|
}
|
|
975
|
-
declare const Paragraph: react__default.ForwardRefExoticComponent<
|
|
975
|
+
declare const Paragraph: react__default.ForwardRefExoticComponent<Omit<ParagraphProps, "ref"> & react__default.RefAttributes<HTMLSpanElement>>;
|
|
976
976
|
|
|
977
977
|
export { Heading, HeadingProps, Paragraph, ParagraphProps, Text, TextProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-typography",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.14",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@mirohq/design-system-primitive": "^1.1.0",
|
|
30
|
-
"@mirohq/design-system-stitches": "^2.3.
|
|
30
|
+
"@mirohq/design-system-stitches": "^2.3.4"
|
|
31
31
|
},
|
|
32
32
|
"scripts": {
|
|
33
33
|
"build": "rollup -c ../../../rollup.config.js",
|