@mirohq/design-system-badge 0.3.29 → 0.3.30-forms.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.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 alignItems: 'center',\n backgroundColor: '$background-primary-prominent',\n borderColor: '$border-primary-inverted',\n borderRadius: '$half',\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 borderWidth: 2,\n borderStyle: 'solid',\n boxSizing: 'border-box',\n fontFamily: 'Formular, sans-serif',\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 borderWidth: 1,\n bottom: '1px',\n height: '4px',\n minWidth: 0,\n padding: 0,\n right: '1px',\n width: '4px',\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: '-6px',\n width: '10px',\n zIndex: '1',\n})\n\nexport type StyledBadgeProps = ComponentPropsWithRef<typeof StyledBadge>\n","import React from 'react'\nimport type {\n ElementRef,\n ReactNode,\n ReactElement,\n ForwardRefExoticComponent,\n HTMLAttributes,\n} 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 is displayed.\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 */\n offsetX?: Numeric\n\n /**\n * Move the badge position to the top/bottom\n */\n offsetY?: Numeric\n}\n\nexport const Badge: ForwardRefExoticComponent<\n BadgeProps & HTMLAttributes<ElementRef<typeof StyledBadge>>\n> = React.forwardRef(\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","React","jsxs","jsx"],"mappings":"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"}
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 alignItems: 'center',\n backgroundColor: '$background-primary-prominent',\n borderColor: '$border-primary-inverted',\n borderRadius: '$half',\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 borderWidth: 2,\n borderStyle: 'solid',\n boxSizing: 'border-box',\n fontFamily: 'Formular, sans-serif',\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 borderWidth: 1,\n bottom: '1px',\n height: '4px',\n minWidth: 0,\n padding: 0,\n right: '1px',\n width: '4px',\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: '-6px',\n width: '10px',\n zIndex: '1',\n})\n\nexport type StyledBadgeProps = ComponentPropsWithRef<typeof StyledBadge>\n","import React from 'react'\nimport type {\n ElementRef,\n ReactNode,\n ReactElement,\n ForwardRefExoticComponent,\n HTMLAttributes,\n} 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: ForwardRefExoticComponent<\n BadgeProps & HTMLAttributes<ElementRef<typeof StyledBadge>>\n> = React.forwardRef(\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","React","jsxs","jsx"],"mappings":"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"}
@@ -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 alignItems: 'center',\n backgroundColor: '$background-primary-prominent',\n borderColor: '$border-primary-inverted',\n borderRadius: '$half',\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 borderWidth: 2,\n borderStyle: 'solid',\n boxSizing: 'border-box',\n fontFamily: 'Formular, sans-serif',\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 borderWidth: 1,\n bottom: '1px',\n height: '4px',\n minWidth: 0,\n padding: 0,\n right: '1px',\n width: '4px',\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: '-6px',\n width: '10px',\n zIndex: '1',\n})\n\nexport type StyledBadgeProps = ComponentPropsWithRef<typeof StyledBadge>\n","import React from 'react'\nimport type {\n ElementRef,\n ReactNode,\n ReactElement,\n ForwardRefExoticComponent,\n HTMLAttributes,\n} 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 is displayed.\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 */\n offsetX?: Numeric\n\n /**\n * Move the badge position to the top/bottom\n */\n offsetY?: Numeric\n}\n\nexport const Badge: ForwardRefExoticComponent<\n BadgeProps & HTMLAttributes<ElementRef<typeof StyledBadge>>\n> = React.forwardRef(\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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"}
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 alignItems: 'center',\n backgroundColor: '$background-primary-prominent',\n borderColor: '$border-primary-inverted',\n borderRadius: '$half',\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 borderWidth: 2,\n borderStyle: 'solid',\n boxSizing: 'border-box',\n fontFamily: 'Formular, sans-serif',\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 borderWidth: 1,\n bottom: '1px',\n height: '4px',\n minWidth: 0,\n padding: 0,\n right: '1px',\n width: '4px',\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: '-6px',\n width: '10px',\n zIndex: '1',\n})\n\nexport type StyledBadgeProps = ComponentPropsWithRef<typeof StyledBadge>\n","import React from 'react'\nimport type {\n ElementRef,\n ReactNode,\n ReactElement,\n ForwardRefExoticComponent,\n HTMLAttributes,\n} 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: ForwardRefExoticComponent<\n BadgeProps & HTMLAttributes<ElementRef<typeof StyledBadge>>\n> = React.forwardRef(\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
@@ -499,11 +499,13 @@ declare type StyledBadgeProps = ComponentPropsWithRef<typeof StyledBadge>;
499
499
 
500
500
  interface BadgeProps extends StyledBadgeProps {
501
501
  /**
502
- * Content of the badge
502
+ * Content of the badge.
503
503
  */
504
504
  content?: string;
505
505
  /**
506
- * Handle whether the badge should be shown, if no content is provided a dot is displayed.
506
+ * Handle whether the badge should be shown, if no content is provided a dot
507
+ * is displayed.
508
+ * @default true
507
509
  */
508
510
  show?: boolean;
509
511
  /**
@@ -515,11 +517,13 @@ interface BadgeProps extends StyledBadgeProps {
515
517
  */
516
518
  inverted?: boolean;
517
519
  /**
518
- * Move the badge position to the left/right
520
+ * Move the badge position to the left/right.
521
+ * @default 0
519
522
  */
520
523
  offsetX?: Numeric;
521
524
  /**
522
- * Move the badge position to the top/bottom
525
+ * Move the badge position to the top/bottom.
526
+ * @default 0
523
527
  */
524
528
  offsetY?: Numeric;
525
529
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-badge",
3
- "version": "0.3.29",
3
+ "version": "0.3.30-forms.0",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -26,9 +26,9 @@
26
26
  "react": "^16.14 || ^17 || ^18"
27
27
  },
28
28
  "dependencies": {
29
+ "@mirohq/design-system-primitive": "^1.1.2-forms.0",
29
30
  "@mirohq/design-system-stitches": "^2.6.0",
30
- "@mirohq/design-system-types": "^0.6.2",
31
- "@mirohq/design-system-primitive": "^1.1.1"
31
+ "@mirohq/design-system-types": "^0.6.2"
32
32
  },
33
33
  "scripts": {
34
34
  "build": "rollup -c ../../../rollup.config.js",