@mirohq/design-system-chip 1.0.2 → 1.0.3
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 -1
- package/dist/main.js.map +1 -1
- package/dist/module.js +1 -1
- package/dist/module.js.map +1 -1
- package/package.json +2 -2
package/dist/main.js
CHANGED
|
@@ -53,7 +53,7 @@ const Chip = React__default["default"].forwardRef(
|
|
|
53
53
|
type: "button",
|
|
54
54
|
onClick: onRemove,
|
|
55
55
|
"aria-label": removeAriaLabel,
|
|
56
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, { size: "small"
|
|
56
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, { size: "small" })
|
|
57
57
|
}
|
|
58
58
|
)
|
|
59
59
|
] })
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/chip.styled.tsx","../src/partials/image-icon.styled.tsx","../src/partials/image-slot.tsx","../src/chip.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { BaseButton } from '@mirohq/design-system-base-button'\nimport { focus } from '@mirohq/design-system-styles'\n\nexport const StyledChip = styled(Primitive.div, {\n fontSize: '$150',\n lineHeight: 1.3,\n padding: '$50 $100',\n borderRadius: '$round',\n display: 'inline-flex',\n alignItems: 'center',\n gap: '$50',\n backgroundColor: '$background-neutrals-subtle',\n color: '$text-neutrals',\n maxWidth: '100%',\n})\n\nexport const StyledChipContent = styled(Primitive.div, {\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n})\n\nexport const StyledChipButton = styled(BaseButton, {\n color: '$icon-neutrals-inactive',\n ...focus.css({\n boxShadow: '$focus',\n }),\n})\n\nexport type StyledChipProps = StrictComponentProps<typeof StyledChip>\n","import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledImageSlot = styled(Primitive.span, {\n paddingInline: '$50',\n})\n\nexport type StyledImageSlotProps = StrictComponentProps<typeof StyledImageSlot>\n","import type { StyledImageSlotProps } from './image-icon.styled'\nimport { StyledImageSlot } from './image-icon.styled'\n\nexport interface ImageSlotProps extends StyledImageSlotProps {}\n\nexport const ImageSlot = StyledImageSlot\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport { IconCross } from '@mirohq/design-system-icons'\n\nimport { StyledChip, StyledChipButton, StyledChipContent } from './chip.styled'\nimport type { StyledChipProps } from './chip.styled'\nimport { ImageSlot } from './partials/image-slot'\n\ninterface RemovableProps {\n /**\n * Event handler called when the chip's remove button is clicked.\n */\n onRemove: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n\n /**\n * Remove button label to make the button recognizable by the screen readers.\n */\n removeAriaLabel: string\n}\n\nexport type ChipProps = (StyledChipProps & {\n /**\n * Show a button to remove the Chip\n * @default true\n */\n removable?: boolean\n}) &\n (\n | RemovableProps\n | { removable: false; removeAriaLabel?: never; onRemove?: never }\n )\n\nexport const Chip = React.forwardRef<ElementRef<typeof StyledChip>, ChipProps>(\n (\n { children, removable = true, onRemove, removeAriaLabel, ...restProps },\n forwardRef\n ) => (\n <StyledChip {...restProps} ref={forwardRef}>\n <StyledChipContent>{children}</StyledChipContent>\n {removable && (\n <StyledChipButton\n type='button'\n onClick={onRemove}\n aria-label={removeAriaLabel}\n >\n <IconCross size='small'
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/chip.styled.tsx","../src/partials/image-icon.styled.tsx","../src/partials/image-slot.tsx","../src/chip.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { BaseButton } from '@mirohq/design-system-base-button'\nimport { focus } from '@mirohq/design-system-styles'\n\nexport const StyledChip = styled(Primitive.div, {\n fontSize: '$150',\n lineHeight: 1.3,\n padding: '$50 $100',\n borderRadius: '$round',\n display: 'inline-flex',\n alignItems: 'center',\n gap: '$50',\n backgroundColor: '$background-neutrals-subtle',\n color: '$text-neutrals',\n maxWidth: '100%',\n})\n\nexport const StyledChipContent = styled(Primitive.div, {\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n})\n\nexport const StyledChipButton = styled(BaseButton, {\n color: '$icon-neutrals-inactive',\n ...focus.css({\n boxShadow: '$focus',\n }),\n})\n\nexport type StyledChipProps = StrictComponentProps<typeof StyledChip>\n","import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledImageSlot = styled(Primitive.span, {\n paddingInline: '$50',\n})\n\nexport type StyledImageSlotProps = StrictComponentProps<typeof StyledImageSlot>\n","import type { StyledImageSlotProps } from './image-icon.styled'\nimport { StyledImageSlot } from './image-icon.styled'\n\nexport interface ImageSlotProps extends StyledImageSlotProps {}\n\nexport const ImageSlot = StyledImageSlot\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport { IconCross } from '@mirohq/design-system-icons'\n\nimport { StyledChip, StyledChipButton, StyledChipContent } from './chip.styled'\nimport type { StyledChipProps } from './chip.styled'\nimport { ImageSlot } from './partials/image-slot'\n\ninterface RemovableProps {\n /**\n * Event handler called when the chip's remove button is clicked.\n */\n onRemove: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n\n /**\n * Remove button label to make the button recognizable by the screen readers.\n */\n removeAriaLabel: string\n}\n\nexport type ChipProps = (StyledChipProps & {\n /**\n * Show a button to remove the Chip\n * @default true\n */\n removable?: boolean\n}) &\n (\n | RemovableProps\n | { removable: false; removeAriaLabel?: never; onRemove?: never }\n )\n\nexport const Chip = React.forwardRef<ElementRef<typeof StyledChip>, ChipProps>(\n (\n { children, removable = true, onRemove, removeAriaLabel, ...restProps },\n forwardRef\n ) => (\n <StyledChip {...restProps} ref={forwardRef}>\n <StyledChipContent>{children}</StyledChipContent>\n {removable && (\n <StyledChipButton\n type='button'\n onClick={onRemove}\n aria-label={removeAriaLabel}\n >\n <IconCross size='small' />\n </StyledChipButton>\n )}\n </StyledChip>\n )\n) as ForwardRefExoticComponent<ChipProps> & Partials\n\nexport interface Partials {\n ImageSlot: typeof ImageSlot\n}\n\nChip.ImageSlot = ImageSlot\n"],"names":["styled","Primitive","BaseButton","focus","React","jsxs","jsx","IconCross"],"mappings":";;;;;;;;;;;;;;;;AAMa,MAAA,UAAA,GAAaA,2BAAO,CAAAC,+BAAA,CAAU,GAAK,EAAA;AAAA,EAC9C,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA,GAAA;AAAA,EACZ,OAAS,EAAA,UAAA;AAAA,EACT,YAAc,EAAA,QAAA;AAAA,EACd,OAAS,EAAA,aAAA;AAAA,EACT,UAAY,EAAA,QAAA;AAAA,EACZ,GAAK,EAAA,KAAA;AAAA,EACL,eAAiB,EAAA,6BAAA;AAAA,EACjB,KAAO,EAAA,gBAAA;AAAA,EACP,QAAU,EAAA,MAAA;AACZ,CAAC,CAAA,CAAA;AAEY,MAAA,iBAAA,GAAoBD,2BAAO,CAAAC,+BAAA,CAAU,GAAK,EAAA;AAAA,EACrD,QAAU,EAAA,QAAA;AAAA,EACV,UAAY,EAAA,QAAA;AAAA,EACZ,YAAc,EAAA,UAAA;AAChB,CAAC,CAAA,CAAA;AAEY,MAAA,gBAAA,GAAmBD,4BAAOE,iCAAY,EAAA;AAAA,EACjD,KAAO,EAAA,yBAAA;AAAA,EACP,GAAGC,yBAAM,GAAI,CAAA;AAAA,IACX,SAAW,EAAA,QAAA;AAAA,GACZ,CAAA;AACH,CAAC,CAAA;;AC1BY,MAAA,eAAA,GAAkBH,2BAAO,CAAAC,+BAAA,CAAU,IAAM,EAAA;AAAA,EACpD,aAAe,EAAA,KAAA;AACjB,CAAC,CAAA;;ACDM,MAAM,SAAY,GAAA,eAAA;;AC2BlB,MAAM,OAAOG,yBAAM,CAAA,UAAA;AAAA,EACxB,CACE,EAAE,QAAA,EAAU,SAAY,GAAA,IAAA,EAAM,UAAU,eAAiB,EAAA,GAAG,SAAU,EAAA,EACtE,+BAECC,eAAA,CAAA,UAAA,EAAA,EAAY,GAAG,SAAA,EAAW,KAAK,UAC9B,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,qBAAmB,QAAS,EAAA,CAAA;AAAA,IAC5B,SACC,oBAAAA,cAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,QAAA;AAAA,QACL,OAAS,EAAA,QAAA;AAAA,QACT,YAAY,EAAA,eAAA;AAAA,QAEZ,QAAA,kBAAAA,cAAA,CAACC,2BAAU,EAAA,EAAA,IAAA,EAAK,OAAQ,EAAA,CAAA;AAAA,OAAA;AAAA,KAC1B;AAAA,GAEJ,EAAA,CAAA;AAEJ,EAAA;AAMA,IAAA,CAAK,SAAY,GAAA,SAAA;;;;"}
|
package/dist/module.js
CHANGED
|
@@ -45,7 +45,7 @@ const Chip = React.forwardRef(
|
|
|
45
45
|
type: "button",
|
|
46
46
|
onClick: onRemove,
|
|
47
47
|
"aria-label": removeAriaLabel,
|
|
48
|
-
children: /* @__PURE__ */ jsx(IconCross, { size: "small"
|
|
48
|
+
children: /* @__PURE__ */ jsx(IconCross, { size: "small" })
|
|
49
49
|
}
|
|
50
50
|
)
|
|
51
51
|
] })
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/chip.styled.tsx","../src/partials/image-icon.styled.tsx","../src/partials/image-slot.tsx","../src/chip.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { BaseButton } from '@mirohq/design-system-base-button'\nimport { focus } from '@mirohq/design-system-styles'\n\nexport const StyledChip = styled(Primitive.div, {\n fontSize: '$150',\n lineHeight: 1.3,\n padding: '$50 $100',\n borderRadius: '$round',\n display: 'inline-flex',\n alignItems: 'center',\n gap: '$50',\n backgroundColor: '$background-neutrals-subtle',\n color: '$text-neutrals',\n maxWidth: '100%',\n})\n\nexport const StyledChipContent = styled(Primitive.div, {\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n})\n\nexport const StyledChipButton = styled(BaseButton, {\n color: '$icon-neutrals-inactive',\n ...focus.css({\n boxShadow: '$focus',\n }),\n})\n\nexport type StyledChipProps = StrictComponentProps<typeof StyledChip>\n","import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledImageSlot = styled(Primitive.span, {\n paddingInline: '$50',\n})\n\nexport type StyledImageSlotProps = StrictComponentProps<typeof StyledImageSlot>\n","import type { StyledImageSlotProps } from './image-icon.styled'\nimport { StyledImageSlot } from './image-icon.styled'\n\nexport interface ImageSlotProps extends StyledImageSlotProps {}\n\nexport const ImageSlot = StyledImageSlot\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport { IconCross } from '@mirohq/design-system-icons'\n\nimport { StyledChip, StyledChipButton, StyledChipContent } from './chip.styled'\nimport type { StyledChipProps } from './chip.styled'\nimport { ImageSlot } from './partials/image-slot'\n\ninterface RemovableProps {\n /**\n * Event handler called when the chip's remove button is clicked.\n */\n onRemove: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n\n /**\n * Remove button label to make the button recognizable by the screen readers.\n */\n removeAriaLabel: string\n}\n\nexport type ChipProps = (StyledChipProps & {\n /**\n * Show a button to remove the Chip\n * @default true\n */\n removable?: boolean\n}) &\n (\n | RemovableProps\n | { removable: false; removeAriaLabel?: never; onRemove?: never }\n )\n\nexport const Chip = React.forwardRef<ElementRef<typeof StyledChip>, ChipProps>(\n (\n { children, removable = true, onRemove, removeAriaLabel, ...restProps },\n forwardRef\n ) => (\n <StyledChip {...restProps} ref={forwardRef}>\n <StyledChipContent>{children}</StyledChipContent>\n {removable && (\n <StyledChipButton\n type='button'\n onClick={onRemove}\n aria-label={removeAriaLabel}\n >\n <IconCross size='small'
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/chip.styled.tsx","../src/partials/image-icon.styled.tsx","../src/partials/image-slot.tsx","../src/chip.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { BaseButton } from '@mirohq/design-system-base-button'\nimport { focus } from '@mirohq/design-system-styles'\n\nexport const StyledChip = styled(Primitive.div, {\n fontSize: '$150',\n lineHeight: 1.3,\n padding: '$50 $100',\n borderRadius: '$round',\n display: 'inline-flex',\n alignItems: 'center',\n gap: '$50',\n backgroundColor: '$background-neutrals-subtle',\n color: '$text-neutrals',\n maxWidth: '100%',\n})\n\nexport const StyledChipContent = styled(Primitive.div, {\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n})\n\nexport const StyledChipButton = styled(BaseButton, {\n color: '$icon-neutrals-inactive',\n ...focus.css({\n boxShadow: '$focus',\n }),\n})\n\nexport type StyledChipProps = StrictComponentProps<typeof StyledChip>\n","import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledImageSlot = styled(Primitive.span, {\n paddingInline: '$50',\n})\n\nexport type StyledImageSlotProps = StrictComponentProps<typeof StyledImageSlot>\n","import type { StyledImageSlotProps } from './image-icon.styled'\nimport { StyledImageSlot } from './image-icon.styled'\n\nexport interface ImageSlotProps extends StyledImageSlotProps {}\n\nexport const ImageSlot = StyledImageSlot\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport { IconCross } from '@mirohq/design-system-icons'\n\nimport { StyledChip, StyledChipButton, StyledChipContent } from './chip.styled'\nimport type { StyledChipProps } from './chip.styled'\nimport { ImageSlot } from './partials/image-slot'\n\ninterface RemovableProps {\n /**\n * Event handler called when the chip's remove button is clicked.\n */\n onRemove: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n\n /**\n * Remove button label to make the button recognizable by the screen readers.\n */\n removeAriaLabel: string\n}\n\nexport type ChipProps = (StyledChipProps & {\n /**\n * Show a button to remove the Chip\n * @default true\n */\n removable?: boolean\n}) &\n (\n | RemovableProps\n | { removable: false; removeAriaLabel?: never; onRemove?: never }\n )\n\nexport const Chip = React.forwardRef<ElementRef<typeof StyledChip>, ChipProps>(\n (\n { children, removable = true, onRemove, removeAriaLabel, ...restProps },\n forwardRef\n ) => (\n <StyledChip {...restProps} ref={forwardRef}>\n <StyledChipContent>{children}</StyledChipContent>\n {removable && (\n <StyledChipButton\n type='button'\n onClick={onRemove}\n aria-label={removeAriaLabel}\n >\n <IconCross size='small' />\n </StyledChipButton>\n )}\n </StyledChip>\n )\n) as ForwardRefExoticComponent<ChipProps> & Partials\n\nexport interface Partials {\n ImageSlot: typeof ImageSlot\n}\n\nChip.ImageSlot = ImageSlot\n"],"names":[],"mappings":";;;;;;;;AAMa,MAAA,UAAA,GAAa,MAAO,CAAA,SAAA,CAAU,GAAK,EAAA;AAAA,EAC9C,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA,GAAA;AAAA,EACZ,OAAS,EAAA,UAAA;AAAA,EACT,YAAc,EAAA,QAAA;AAAA,EACd,OAAS,EAAA,aAAA;AAAA,EACT,UAAY,EAAA,QAAA;AAAA,EACZ,GAAK,EAAA,KAAA;AAAA,EACL,eAAiB,EAAA,6BAAA;AAAA,EACjB,KAAO,EAAA,gBAAA;AAAA,EACP,QAAU,EAAA,MAAA;AACZ,CAAC,CAAA,CAAA;AAEY,MAAA,iBAAA,GAAoB,MAAO,CAAA,SAAA,CAAU,GAAK,EAAA;AAAA,EACrD,QAAU,EAAA,QAAA;AAAA,EACV,UAAY,EAAA,QAAA;AAAA,EACZ,YAAc,EAAA,UAAA;AAChB,CAAC,CAAA,CAAA;AAEY,MAAA,gBAAA,GAAmB,OAAO,UAAY,EAAA;AAAA,EACjD,KAAO,EAAA,yBAAA;AAAA,EACP,GAAG,MAAM,GAAI,CAAA;AAAA,IACX,SAAW,EAAA,QAAA;AAAA,GACZ,CAAA;AACH,CAAC,CAAA;;AC1BY,MAAA,eAAA,GAAkB,MAAO,CAAA,SAAA,CAAU,IAAM,EAAA;AAAA,EACpD,aAAe,EAAA,KAAA;AACjB,CAAC,CAAA;;ACDM,MAAM,SAAY,GAAA,eAAA;;AC2BlB,MAAM,OAAO,KAAM,CAAA,UAAA;AAAA,EACxB,CACE,EAAE,QAAA,EAAU,SAAY,GAAA,IAAA,EAAM,UAAU,eAAiB,EAAA,GAAG,SAAU,EAAA,EACtE,+BAEC,IAAA,CAAA,UAAA,EAAA,EAAY,GAAG,SAAA,EAAW,KAAK,UAC9B,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,qBAAmB,QAAS,EAAA,CAAA;AAAA,IAC5B,SACC,oBAAA,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,QAAA;AAAA,QACL,OAAS,EAAA,QAAA;AAAA,QACT,YAAY,EAAA,eAAA;AAAA,QAEZ,QAAA,kBAAA,GAAA,CAAC,SAAU,EAAA,EAAA,IAAA,EAAK,OAAQ,EAAA,CAAA;AAAA,OAAA;AAAA,KAC1B;AAAA,GAEJ,EAAA,CAAA;AAEJ,EAAA;AAMA,IAAA,CAAK,SAAY,GAAA,SAAA;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-chip",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
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-base-button": "^1.0.0",
|
|
30
|
-
"@mirohq/design-system-icons": "^1.
|
|
30
|
+
"@mirohq/design-system-icons": "^1.2.0",
|
|
31
31
|
"@mirohq/design-system-primitive": "^2.0.0",
|
|
32
32
|
"@mirohq/design-system-stitches": "^3.0.0",
|
|
33
33
|
"@mirohq/design-system-styles": "^2.0.0"
|