@mirohq/design-system-chip 0.2.6 → 0.2.8
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/main.js +9 -4
- package/dist/main.js.map +1 -1
- package/dist/module.js +9 -4
- package/dist/module.js.map +1 -1
- package/package.json +5 -5
package/dist/main.js
CHANGED
|
@@ -22,9 +22,14 @@ const StyledChip = designSystemStitches.styled(designSystemPrimitive.Primitive.d
|
|
|
22
22
|
display: "inline-flex",
|
|
23
23
|
alignItems: "center",
|
|
24
24
|
gap: "$50",
|
|
25
|
-
whiteSpace: "nowrap",
|
|
26
25
|
backgroundColor: "$background-neutrals-subtle",
|
|
27
|
-
color: "$text-neutrals"
|
|
26
|
+
color: "$text-neutrals",
|
|
27
|
+
maxWidth: "100%"
|
|
28
|
+
});
|
|
29
|
+
const StyledChipContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
|
|
30
|
+
overflow: "hidden",
|
|
31
|
+
whiteSpace: "nowrap",
|
|
32
|
+
textOverflow: "ellipsis"
|
|
28
33
|
});
|
|
29
34
|
const StyledChipButton = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
|
|
30
35
|
color: "$icon-neutrals-inactive",
|
|
@@ -34,14 +39,14 @@ const StyledChipButton = designSystemStitches.styled(designSystemBaseButton.Base
|
|
|
34
39
|
});
|
|
35
40
|
|
|
36
41
|
const StyledImageSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
|
|
37
|
-
|
|
42
|
+
paddingInline: "$50"
|
|
38
43
|
});
|
|
39
44
|
|
|
40
45
|
const ImageSlot = StyledImageSlot;
|
|
41
46
|
|
|
42
47
|
const Chip = React__default["default"].forwardRef(
|
|
43
48
|
({ children, removable = true, onRemove, removeAriaLabel, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsxs(StyledChip, { ...restProps, ref: forwardRef, children: [
|
|
44
|
-
children,
|
|
49
|
+
/* @__PURE__ */ jsxRuntime.jsx(StyledChipContent, { children }),
|
|
45
50
|
removable && /* @__PURE__ */ jsxRuntime.jsx(
|
|
46
51
|
StyledChipButton,
|
|
47
52
|
{
|
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
|
|
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\n ...focus.css({\n boxShadow: '$focus-small-outline',\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' weight='thin' />\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,EAEP,GAAGC,yBAAM,GAAI,CAAA;AAAA,IACX,SAAW,EAAA,sBAAA;AAAA,GACZ,CAAA;AACH,CAAC,CAAA;;AC3BY,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,QAAC,kBAAAA,cAAA,CAAAC,2BAAA,EAAA,EAAU,IAAK,EAAA,OAAA,EAAQ,QAAO,MAAO,EAAA,CAAA;AAAA,OAAA;AAAA,KACxC;AAAA,GAEJ,EAAA,CAAA;AAEJ,EAAA;AAMA,IAAA,CAAK,SAAY,GAAA,SAAA;;;;"}
|
package/dist/module.js
CHANGED
|
@@ -14,9 +14,14 @@ const StyledChip = styled(Primitive.div, {
|
|
|
14
14
|
display: "inline-flex",
|
|
15
15
|
alignItems: "center",
|
|
16
16
|
gap: "$50",
|
|
17
|
-
whiteSpace: "nowrap",
|
|
18
17
|
backgroundColor: "$background-neutrals-subtle",
|
|
19
|
-
color: "$text-neutrals"
|
|
18
|
+
color: "$text-neutrals",
|
|
19
|
+
maxWidth: "100%"
|
|
20
|
+
});
|
|
21
|
+
const StyledChipContent = styled(Primitive.div, {
|
|
22
|
+
overflow: "hidden",
|
|
23
|
+
whiteSpace: "nowrap",
|
|
24
|
+
textOverflow: "ellipsis"
|
|
20
25
|
});
|
|
21
26
|
const StyledChipButton = styled(BaseButton, {
|
|
22
27
|
color: "$icon-neutrals-inactive",
|
|
@@ -26,14 +31,14 @@ const StyledChipButton = styled(BaseButton, {
|
|
|
26
31
|
});
|
|
27
32
|
|
|
28
33
|
const StyledImageSlot = styled(Primitive.span, {
|
|
29
|
-
|
|
34
|
+
paddingInline: "$50"
|
|
30
35
|
});
|
|
31
36
|
|
|
32
37
|
const ImageSlot = StyledImageSlot;
|
|
33
38
|
|
|
34
39
|
const Chip = React.forwardRef(
|
|
35
40
|
({ children, removable = true, onRemove, removeAriaLabel, ...restProps }, forwardRef) => /* @__PURE__ */ jsxs(StyledChip, { ...restProps, ref: forwardRef, children: [
|
|
36
|
-
children,
|
|
41
|
+
/* @__PURE__ */ jsx(StyledChipContent, { children }),
|
|
37
42
|
removable && /* @__PURE__ */ jsx(
|
|
38
43
|
StyledChipButton,
|
|
39
44
|
{
|
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
|
|
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\n ...focus.css({\n boxShadow: '$focus-small-outline',\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' weight='thin' />\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,EAEP,GAAG,MAAM,GAAI,CAAA;AAAA,IACX,SAAW,EAAA,sBAAA;AAAA,GACZ,CAAA;AACH,CAAC,CAAA;;AC3BY,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,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA,EAAU,IAAK,EAAA,OAAA,EAAQ,QAAO,MAAO,EAAA,CAAA;AAAA,OAAA;AAAA,KACxC;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": "0.2.
|
|
3
|
+
"version": "0.2.8",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -26,11 +26,11 @@
|
|
|
26
26
|
"react": "^16.14 || ^17 || ^18"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@mirohq/design-system-
|
|
30
|
-
"@mirohq/design-system-icons": "^0.55.1",
|
|
29
|
+
"@mirohq/design-system-icons": "^0.57.0",
|
|
31
30
|
"@mirohq/design-system-primitive": "^1.1.2",
|
|
32
|
-
"@mirohq/design-system-
|
|
33
|
-
"@mirohq/design-system-styles": "^1.2.25"
|
|
31
|
+
"@mirohq/design-system-base-button": "^0.4.62",
|
|
32
|
+
"@mirohq/design-system-styles": "^1.2.25",
|
|
33
|
+
"@mirohq/design-system-stitches": "^2.6.25"
|
|
34
34
|
},
|
|
35
35
|
"scripts": {
|
|
36
36
|
"build": "rollup -c ../../../rollup.config.js",
|