@mirohq/design-system-badge 1.1.3 → 1.2.0-fix-stitches-types.1
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 +1 -7
- package/dist/main.js.map +1 -1
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +23 -3
- package/package.json +3 -3
package/dist/main.js
CHANGED
|
@@ -1,16 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
4
|
var React = require('react');
|
|
7
5
|
var designSystemPrimitive = require('@mirohq/design-system-primitive');
|
|
8
6
|
var designSystemStitches = require('@mirohq/design-system-stitches');
|
|
9
7
|
|
|
10
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
|
-
|
|
12
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
|
-
|
|
14
8
|
const StyledBadgeContainer = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
|
|
15
9
|
position: "relative",
|
|
16
10
|
display: "flex"
|
|
@@ -76,7 +70,7 @@ const StyledBadgeWrapper = designSystemStitches.styled(designSystemPrimitive.Pri
|
|
|
76
70
|
zIndex: "1"
|
|
77
71
|
});
|
|
78
72
|
|
|
79
|
-
const Badge =
|
|
73
|
+
const Badge = React.forwardRef(
|
|
80
74
|
({ show = true, content, children, offsetX = 0, offsetY = 0, ...restProps }, forwardRef) => {
|
|
81
75
|
if (!show) {
|
|
82
76
|
return children;
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/badge.styled.tsx","../src/badge.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { CSS } from '@mirohq/design-system-stitches'\n\nexport const StyledBadgeContainer = styled(Primitive.div, {\n position: 'relative',\n display: 'flex',\n})\n\nconst sharedStyles: CSS = {\n borderWidth: 2,\n borderStyle: 'solid',\n alignItems: 'center',\n backgroundColor: '$background-primary-prominent',\n borderColor: '$border-primary-inverted',\n borderRadius: '$round',\n color: '$icon-primary-inverted',\n display: 'flex',\n justifyContent: 'center',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n variants: {\n inverted: {\n true: {\n backgroundColor: '$background-neutrals',\n borderColor: '$border-primary',\n color: '$text-primary',\n },\n },\n },\n}\n\nexport const StyledBadge = styled(Primitive.div, {\n boxSizing: 'border-box',\n fontFamily: '$heading',\n fontSize: '$150',\n fontWeight: 650,\n height: '20px',\n left: '50%',\n minWidth: '20px',\n padding: '2px $50',\n top: '1px',\n transform: 'translateX(-50%)',\n ...sharedStyles,\n})\n\nexport const StyledDot = styled(Primitive.div, {\n borderColor: '$border-primary-inverted',\n minWidth: 0,\n padding: 0,\n right: '3px',\n top: '9px',\n height: '11px',\n width: '11px',\n ...sharedStyles,\n})\n\nexport const StyledBadgeWrapper = styled(Primitive.div, {\n userSelect: 'none',\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexFlow: 'row wrap',\n height: '10px',\n placeContent: 'center',\n position: 'absolute',\n right: '-2px',\n top: '-10px',\n width: '10px',\n zIndex: '1',\n})\n\nexport type StyledBadgeProps = ComponentPropsWithRef<typeof StyledBadge>\n","import React from 'react'\nimport type { ElementRef, ReactNode, ReactElement } from 'react'\nimport type { Numeric } from '@mirohq/design-system-types'\n\nimport {\n StyledBadgeContainer,\n StyledBadgeWrapper,\n StyledBadge,\n StyledDot,\n} from './badge.styled'\nimport type { StyledBadgeProps } from './badge.styled'\n\nexport interface BadgeProps extends StyledBadgeProps {\n /**\n * Content of the badge.\n */\n content?: string\n\n /**\n * Handle whether the badge should be shown, if no content is provided a dot\n * is displayed.\n * @default true\n */\n show?: boolean\n\n /**\n * Element that shows the badge\n */\n children?: ReactNode\n\n /**\n * By default the badge is filled with blue, inverted set it to white.\n */\n inverted?: boolean\n\n /**\n * Move the badge position to the left/right.\n * @default 0\n */\n offsetX?: Numeric\n\n /**\n * Move the badge position to the top/bottom.\n * @default 0\n */\n offsetY?: Numeric\n}\n\nexport const Badge = React.forwardRef<\n ElementRef<typeof StyledBadge>,\n BadgeProps\n>(\n (\n { show = true, content, children, offsetX = 0, offsetY = 0, ...restProps },\n forwardRef\n ) => {\n if (!show) {\n return children as ReactElement\n }\n\n let offset = {}\n\n if (+offsetX !== 0 || +offsetY !== 0) {\n offset = {\n UNSAFE_style: {\n transform: `translate(${offsetX}px, ${offsetY}px)`,\n },\n }\n }\n\n const badgeProps = {\n ...restProps,\n ...offset,\n }\n\n return (\n <StyledBadgeContainer\n data-testid={process.env.NODE_ENV === 'test' ? 'badge' : undefined}\n >\n <StyledBadgeWrapper>\n {content !== undefined ? (\n <StyledBadge {...badgeProps} ref={forwardRef}>\n {content}\n </StyledBadge>\n ) : (\n <StyledDot {...badgeProps} ref={forwardRef} />\n )}\n </StyledBadgeWrapper>\n {children}\n </StyledBadgeContainer>\n )\n }\n)\n"],"names":["styled","Primitive","
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/badge.styled.tsx","../src/badge.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { CSS } from '@mirohq/design-system-stitches'\n\nexport const StyledBadgeContainer = styled(Primitive.div, {\n position: 'relative',\n display: 'flex',\n})\n\nconst sharedStyles: CSS = {\n borderWidth: 2,\n borderStyle: 'solid',\n alignItems: 'center',\n backgroundColor: '$background-primary-prominent',\n borderColor: '$border-primary-inverted',\n borderRadius: '$round',\n color: '$icon-primary-inverted',\n display: 'flex',\n justifyContent: 'center',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n variants: {\n inverted: {\n true: {\n backgroundColor: '$background-neutrals',\n borderColor: '$border-primary',\n color: '$text-primary',\n },\n },\n },\n}\n\nexport const StyledBadge = styled(Primitive.div, {\n boxSizing: 'border-box',\n fontFamily: '$heading',\n fontSize: '$150',\n fontWeight: 650,\n height: '20px',\n left: '50%',\n minWidth: '20px',\n padding: '2px $50',\n top: '1px',\n transform: 'translateX(-50%)',\n ...sharedStyles,\n})\n\nexport const StyledDot = styled(Primitive.div, {\n borderColor: '$border-primary-inverted',\n minWidth: 0,\n padding: 0,\n right: '3px',\n top: '9px',\n height: '11px',\n width: '11px',\n ...sharedStyles,\n})\n\nexport const StyledBadgeWrapper = styled(Primitive.div, {\n userSelect: 'none',\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexFlow: 'row wrap',\n height: '10px',\n placeContent: 'center',\n position: 'absolute',\n right: '-2px',\n top: '-10px',\n width: '10px',\n zIndex: '1',\n})\n\nexport type StyledBadgeProps = ComponentPropsWithRef<typeof StyledBadge>\n","import React from 'react'\nimport type { ElementRef, ReactNode, ReactElement } from 'react'\nimport type { Numeric } from '@mirohq/design-system-types'\n\nimport {\n StyledBadgeContainer,\n StyledBadgeWrapper,\n StyledBadge,\n StyledDot,\n} from './badge.styled'\nimport type { StyledBadgeProps } from './badge.styled'\n\nexport interface BadgeProps extends StyledBadgeProps {\n /**\n * Content of the badge.\n */\n content?: string\n\n /**\n * Handle whether the badge should be shown, if no content is provided a dot\n * is displayed.\n * @default true\n */\n show?: boolean\n\n /**\n * Element that shows the badge\n */\n children?: ReactNode\n\n /**\n * By default the badge is filled with blue, inverted set it to white.\n */\n inverted?: boolean\n\n /**\n * Move the badge position to the left/right.\n * @default 0\n */\n offsetX?: Numeric\n\n /**\n * Move the badge position to the top/bottom.\n * @default 0\n */\n offsetY?: Numeric\n}\n\nexport const Badge = React.forwardRef<\n ElementRef<typeof StyledBadge>,\n BadgeProps\n>(\n (\n { show = true, content, children, offsetX = 0, offsetY = 0, ...restProps },\n forwardRef\n ) => {\n if (!show) {\n return children as ReactElement\n }\n\n let offset = {}\n\n if (+offsetX !== 0 || +offsetY !== 0) {\n offset = {\n UNSAFE_style: {\n transform: `translate(${offsetX}px, ${offsetY}px)`,\n },\n }\n }\n\n const badgeProps = {\n ...restProps,\n ...offset,\n }\n\n return (\n <StyledBadgeContainer\n data-testid={process.env.NODE_ENV === 'test' ? 'badge' : undefined}\n >\n <StyledBadgeWrapper>\n {content !== undefined ? (\n <StyledBadge {...badgeProps} ref={forwardRef}>\n {content}\n </StyledBadge>\n ) : (\n <StyledDot {...badgeProps} ref={forwardRef} />\n )}\n </StyledBadgeWrapper>\n {children}\n </StyledBadgeContainer>\n )\n }\n)\n"],"names":["styled","Primitive","jsxs","jsx"],"mappings":"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"}
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/badge.styled.tsx","../src/badge.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { CSS } from '@mirohq/design-system-stitches'\n\nexport const StyledBadgeContainer = styled(Primitive.div, {\n position: 'relative',\n display: 'flex',\n})\n\nconst sharedStyles: CSS = {\n borderWidth: 2,\n borderStyle: 'solid',\n alignItems: 'center',\n backgroundColor: '$background-primary-prominent',\n borderColor: '$border-primary-inverted',\n borderRadius: '$round',\n color: '$icon-primary-inverted',\n display: 'flex',\n justifyContent: 'center',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n variants: {\n inverted: {\n true: {\n backgroundColor: '$background-neutrals',\n borderColor: '$border-primary',\n color: '$text-primary',\n },\n },\n },\n}\n\nexport const StyledBadge = styled(Primitive.div, {\n boxSizing: 'border-box',\n fontFamily: '$heading',\n fontSize: '$150',\n fontWeight: 650,\n height: '20px',\n left: '50%',\n minWidth: '20px',\n padding: '2px $50',\n top: '1px',\n transform: 'translateX(-50%)',\n ...sharedStyles,\n})\n\nexport const StyledDot = styled(Primitive.div, {\n borderColor: '$border-primary-inverted',\n minWidth: 0,\n padding: 0,\n right: '3px',\n top: '9px',\n height: '11px',\n width: '11px',\n ...sharedStyles,\n})\n\nexport const StyledBadgeWrapper = styled(Primitive.div, {\n userSelect: 'none',\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexFlow: 'row wrap',\n height: '10px',\n placeContent: 'center',\n position: 'absolute',\n right: '-2px',\n top: '-10px',\n width: '10px',\n zIndex: '1',\n})\n\nexport type StyledBadgeProps = ComponentPropsWithRef<typeof StyledBadge>\n","import React from 'react'\nimport type { ElementRef, ReactNode, ReactElement } from 'react'\nimport type { Numeric } from '@mirohq/design-system-types'\n\nimport {\n StyledBadgeContainer,\n StyledBadgeWrapper,\n StyledBadge,\n StyledDot,\n} from './badge.styled'\nimport type { StyledBadgeProps } from './badge.styled'\n\nexport interface BadgeProps extends StyledBadgeProps {\n /**\n * Content of the badge.\n */\n content?: string\n\n /**\n * Handle whether the badge should be shown, if no content is provided a dot\n * is displayed.\n * @default true\n */\n show?: boolean\n\n /**\n * Element that shows the badge\n */\n children?: ReactNode\n\n /**\n * By default the badge is filled with blue, inverted set it to white.\n */\n inverted?: boolean\n\n /**\n * Move the badge position to the left/right.\n * @default 0\n */\n offsetX?: Numeric\n\n /**\n * Move the badge position to the top/bottom.\n * @default 0\n */\n offsetY?: Numeric\n}\n\nexport const Badge = React.forwardRef<\n ElementRef<typeof StyledBadge>,\n BadgeProps\n>(\n (\n { show = true, content, children, offsetX = 0, offsetY = 0, ...restProps },\n forwardRef\n ) => {\n if (!show) {\n return children as ReactElement\n }\n\n let offset = {}\n\n if (+offsetX !== 0 || +offsetY !== 0) {\n offset = {\n UNSAFE_style: {\n transform: `translate(${offsetX}px, ${offsetY}px)`,\n },\n }\n }\n\n const badgeProps = {\n ...restProps,\n ...offset,\n }\n\n return (\n <StyledBadgeContainer\n data-testid={process.env.NODE_ENV === 'test' ? 'badge' : undefined}\n >\n <StyledBadgeWrapper>\n {content !== undefined ? (\n <StyledBadge {...badgeProps} ref={forwardRef}>\n {content}\n </StyledBadge>\n ) : (\n <StyledDot {...badgeProps} ref={forwardRef} />\n )}\n </StyledBadgeWrapper>\n {children}\n </StyledBadgeContainer>\n )\n }\n)\n"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/badge.styled.tsx","../src/badge.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { CSS } from '@mirohq/design-system-stitches'\n\nexport const StyledBadgeContainer = styled(Primitive.div, {\n position: 'relative',\n display: 'flex',\n})\n\nconst sharedStyles: CSS = {\n borderWidth: 2,\n borderStyle: 'solid',\n alignItems: 'center',\n backgroundColor: '$background-primary-prominent',\n borderColor: '$border-primary-inverted',\n borderRadius: '$round',\n color: '$icon-primary-inverted',\n display: 'flex',\n justifyContent: 'center',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n variants: {\n inverted: {\n true: {\n backgroundColor: '$background-neutrals',\n borderColor: '$border-primary',\n color: '$text-primary',\n },\n },\n },\n}\n\nexport const StyledBadge = styled(Primitive.div, {\n boxSizing: 'border-box',\n fontFamily: '$heading',\n fontSize: '$150',\n fontWeight: 650,\n height: '20px',\n left: '50%',\n minWidth: '20px',\n padding: '2px $50',\n top: '1px',\n transform: 'translateX(-50%)',\n ...sharedStyles,\n})\n\nexport const StyledDot = styled(Primitive.div, {\n borderColor: '$border-primary-inverted',\n minWidth: 0,\n padding: 0,\n right: '3px',\n top: '9px',\n height: '11px',\n width: '11px',\n ...sharedStyles,\n})\n\nexport const StyledBadgeWrapper = styled(Primitive.div, {\n userSelect: 'none',\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexFlow: 'row wrap',\n height: '10px',\n placeContent: 'center',\n position: 'absolute',\n right: '-2px',\n top: '-10px',\n width: '10px',\n zIndex: '1',\n})\n\nexport type StyledBadgeProps = ComponentPropsWithRef<typeof StyledBadge>\n","import React from 'react'\nimport type { ElementRef, ReactNode, ReactElement } from 'react'\nimport type { Numeric } from '@mirohq/design-system-types'\n\nimport {\n StyledBadgeContainer,\n StyledBadgeWrapper,\n StyledBadge,\n StyledDot,\n} from './badge.styled'\nimport type { StyledBadgeProps } from './badge.styled'\n\nexport interface BadgeProps extends StyledBadgeProps {\n /**\n * Content of the badge.\n */\n content?: string\n\n /**\n * Handle whether the badge should be shown, if no content is provided a dot\n * is displayed.\n * @default true\n */\n show?: boolean\n\n /**\n * Element that shows the badge\n */\n children?: ReactNode\n\n /**\n * By default the badge is filled with blue, inverted set it to white.\n */\n inverted?: boolean\n\n /**\n * Move the badge position to the left/right.\n * @default 0\n */\n offsetX?: Numeric\n\n /**\n * Move the badge position to the top/bottom.\n * @default 0\n */\n offsetY?: Numeric\n}\n\nexport const Badge = React.forwardRef<\n ElementRef<typeof StyledBadge>,\n BadgeProps\n>(\n (\n { show = true, content, children, offsetX = 0, offsetY = 0, ...restProps },\n forwardRef\n ) => {\n if (!show) {\n return children as ReactElement\n }\n\n let offset = {}\n\n if (+offsetX !== 0 || +offsetY !== 0) {\n offset = {\n UNSAFE_style: {\n transform: `translate(${offsetX}px, ${offsetY}px)`,\n },\n }\n }\n\n const badgeProps = {\n ...restProps,\n ...offset,\n }\n\n return (\n <StyledBadgeContainer\n data-testid={process.env.NODE_ENV === 'test' ? 'badge' : undefined}\n >\n <StyledBadgeWrapper>\n {content !== undefined ? (\n <StyledBadge {...badgeProps} ref={forwardRef}>\n {content}\n </StyledBadge>\n ) : (\n <StyledDot {...badgeProps} ref={forwardRef} />\n )}\n </StyledBadgeWrapper>\n {children}\n </StyledBadgeContainer>\n )\n }\n)\n"],"names":[],"mappings":"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"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,11 +1,30 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import react__default, { ComponentPropsWithRef, ReactNode } from 'react';
|
|
3
3
|
import { Numeric } from '@mirohq/design-system-types';
|
|
4
|
-
import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
|
|
5
4
|
import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
|
|
6
5
|
import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
|
|
7
6
|
|
|
8
|
-
|
|
7
|
+
/* Utilities */
|
|
8
|
+
/* ========================================================================== */
|
|
9
|
+
|
|
10
|
+
/** Returns a string with the given prefix followed by the given values. */
|
|
11
|
+
type Prefixed<K extends string, T> = `${K}${Extract<T, boolean | number | string>}`
|
|
12
|
+
|
|
13
|
+
type TransformProps<Props, Media> = {
|
|
14
|
+
[K in keyof Props]: (
|
|
15
|
+
| Props[K]
|
|
16
|
+
| (
|
|
17
|
+
& {
|
|
18
|
+
[KMedia in Prefixed<'@', 'initial' | keyof Media>]?: Props[K]
|
|
19
|
+
}
|
|
20
|
+
& {
|
|
21
|
+
[KMedia in string]: Props[K]
|
|
22
|
+
}
|
|
23
|
+
)
|
|
24
|
+
)
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
declare const StyledBadge: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, never> & TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
|
|
9
28
|
type StyledBadgeProps = ComponentPropsWithRef<typeof StyledBadge>;
|
|
10
29
|
|
|
11
30
|
interface BadgeProps extends StyledBadgeProps {
|
|
@@ -40,4 +59,5 @@ interface BadgeProps extends StyledBadgeProps {
|
|
|
40
59
|
}
|
|
41
60
|
declare const Badge: react__default.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
|
|
42
61
|
|
|
43
|
-
export { Badge
|
|
62
|
+
export { Badge };
|
|
63
|
+
export type { BadgeProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-badge",
|
|
3
|
-
"version": "1.1
|
|
3
|
+
"version": "1.2.0-fix-stitches-types.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"react": "^16.14 || ^17 || ^18 || ^19"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@mirohq/design-system-primitive": "^2.
|
|
30
|
-
"@mirohq/design-system-stitches": "^3.1
|
|
29
|
+
"@mirohq/design-system-primitive": "^2.2.0-fix-stitches-types.1",
|
|
30
|
+
"@mirohq/design-system-stitches": "^3.2.0-fix-stitches-types.1",
|
|
31
31
|
"@mirohq/design-system-types": "^1.0.1"
|
|
32
32
|
},
|
|
33
33
|
"scripts": {
|