npm - @mirohq/design-system-chip - Versions diffs - 1.2.62 → 1.3.0-filter-chip.1 - Mend

@mirohq/design-system-chip 1.2.62 → 1.3.0-filter-chip.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.

Files changed (6) hide show

package/dist/main.js CHANGED Viewed

@@ -3,61 +3,306 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var designSystemIcons = require('@mirohq/design-system-icons');
+var designSystemSpinner = require('@mirohq/design-system-spinner');
 var designSystemStitches = require('@mirohq/design-system-stitches');
 var designSystemPrimitive = require('@mirohq/design-system-primitive');
 var designSystemBaseButton = require('@mirohq/design-system-base-button');
 var designSystemStyles = require('@mirohq/design-system-styles');
-const StyledChip = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
-  fontSize: "$150",
-  lineHeight: 1.3,
-  padding: "$50 $100",
+const StyledImageSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  verticalAlign: "middle",
+  paddingInline: "$50",
+  "& img": {
+    display: "block",
+    square: 16,
+    borderRadius: "$round",
+    objectFit: "cover"
+  }
+});
+const LABEL_OFFSET = 2;
+const imageSlotImg = (size) => ({
+  ["& ".concat(StyledImageSlot, " img")]: {
+    square: size
+  }
+});
+const chipLayout = {
   borderRadius: "$round",
   display: "inline-flex",
   alignItems: "center",
-  gap: "$50",
-  backgroundColor: "$chip-background",
-  color: "$chip-text",
+  width: "fit-content",
   maxWidth: "100%",
+  flexShrink: 0,
+  boxSizing: "border-box",
+  border: "1px solid transparent",
+  lineHeight: 1.3,
+  // Chip labels are regular. Pressable uses BaseButton; don't keep Button's
+  // semibold from that shell.
+  fontWeight: "$regular"
+};
+const chipSizes = {
+  "x-large": {
+    height: "$12",
+    fontSize: "$200",
+    paddingX: "calc($200 + ".concat(LABEL_OFFSET, "px)"),
+    ...imageSlotImg("$8")
+  },
+  large: {
+    height: "$10",
+    fontSize: "$200",
+    paddingX: "calc($150 + ".concat(LABEL_OFFSET, "px)"),
+    ...imageSlotImg("$6")
+  },
+  medium: {
+    height: "$8",
+    fontSize: "$175",
+    paddingX: "calc($100 + ".concat(LABEL_OFFSET, "px)"),
+    ...imageSlotImg("$5")
+  },
+  small: {
+    height: "$6",
+    fontSize: "$175",
+    paddingX: "calc($100 + ".concat(LABEL_OFFSET, "px)"),
+    ...imageSlotImg("$4")
+  }
+};
+const defaultIdle = {
+  color: "$chip-text-on-default",
+  backgroundColor: "$chip-background-default",
+  borderColor: "$chip-border-default"
+};
+const outlineIdle = {
+  color: "$chip-text-on-outline",
+  backgroundColor: "$transparent",
+  borderColor: "$chip-border-outline"
+};
+const defaultInteractive = {
+  ...defaultIdle,
+  _hover: {
+    color: "$chip-text-on-default",
+    backgroundColor: "$chip-background-default-hover",
+    borderColor: "$chip-border-default-hover"
+  },
+  "&[data-pressed]": {
+    color: "$chip-text-on-default",
+    backgroundColor: "$chip-background-default-pressed",
+    borderColor: "$chip-border-default"
+  },
+  // Attribute selector so `disabled` reaches BaseButton / usePress.
+  "&[disabled]": {
+    backgroundColor: "$background-disabled",
+    color: "$text-on-disabled"
+  }
+};
+const outlineInteractive = {
+  ...outlineIdle,
+  _hover: {
+    backgroundColor: "$chip-background-outline-hover",
+    borderColor: "$chip-border-outline-hover",
+    color: "$chip-text-on-outline"
+  },
+  "&[data-pressed]": {
+    backgroundColor: "$chip-background-outline-pressed",
+    borderColor: "$chip-border-outline-pressed",
+    color: "$chip-text-on-outline"
+  },
+  "&[disabled]": {
+    backgroundColor: "$transparent",
+    borderColor: "$border-disabled",
+    color: "$text-disabled"
+  }
+};
+const StyledChip = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  ...chipLayout,
   variants: {
+    variant: {
+      default: defaultIdle,
+      outline: outlineIdle
+    },
     disabled: {
-      true: {
-        backgroundColor: "$chip-background-disabled"
+      true: {}
+    },
+    size: chipSizes
+  },
+  compoundVariants: [
+    {
+      variant: "default",
+      disabled: true,
+      css: {
+        backgroundColor: "$background-disabled",
+        color: "$text-on-disabled",
+        "& button": {
+          color: "$icon-on-disabled"
+        }
+      }
+    },
+    {
+      variant: "outline",
+      disabled: true,
+      css: {
+        backgroundColor: "$transparent",
+        borderColor: "$border-disabled",
+        color: "$text-disabled",
+        "& button": {
+          color: "$icon-disabled"
+        }
       }
     }
+  ],
+  defaultVariants: {
+    variant: "default",
+    size: "medium"
+  }
+});
+const StyledPressableChip = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
+  ...chipLayout,
+  position: "relative",
+  ...designSystemStyles.focus.css({
+    boxShadow: "$focus"
+  }),
+  // Loading stays visually idle — only the wait cursor signals it. Don't reuse
+  // the disabled mute; that made loading look broken.
+  '&[aria-busy="true"]': {
+    cursor: "wait",
+    pointerEvents: "none"
+  },
+  variants: {
+    variant: {
+      default: defaultInteractive,
+      outline: outlineInteractive
+    },
+    size: chipSizes
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "medium"
   }
 });
 const StyledChipContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
   overflow: "hidden",
   whiteSpace: "nowrap",
-  textOverflow: "ellipsis"
+  textOverflow: "ellipsis",
+  // Taller than the em box so descenders (g, y) aren't clipped by overflow.
+  lineHeight: 1.3,
+  minWidth: 0,
+  display: "flex",
+  alignItems: "center",
+  variants: {
+    loading: {
+      true: {
+        opacity: 0
+      }
+    }
+  }
+});
+const StyledSpinnerBox = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  position: "absolute",
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  margin: "auto",
+  zIndex: 1
 });
 const StyledChipButton = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
+  // Figma Chip: spacing-100 before the close glyph, not container gap.
+  paddingInlineStart: "$100",
+  flexShrink: 0,
   color: "$icon-secondary",
   ...designSystemStyles.focus.css({
     boxShadow: "$focus"
   })
 });
-const StyledImageSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
-  paddingInline: "$50"
-});
 const ImageSlot = StyledImageSlot;
+const hasPressEvent = (props) => {
+  if ("onClick" in props && props.onClick != null) return true;
+  if ("onPress" in props && props.onPress != null) return true;
+  return false;
+};
 const Chip = React.forwardRef(
-  ({ children, removable = true, onRemove, removeAriaLabel, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsxs(StyledChip, { ...restProps, ref: forwardRef, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(StyledChipContent, { children }),
-    removable && /* @__PURE__ */ jsxRuntime.jsx(
-      StyledChipButton,
+  (props, forwardRef) => {
+    const {
+      children,
+      removable = true,
+      onRemove,
+      removeAriaLabel,
+      loading = false,
+      size = "medium",
+      variant = "default",
+      disabled,
+      ...restProps
+    } = props;
+    const pressable = hasPressEvent(restProps);
+    const isLoading = pressable && loading;
+    let spinnerSize = "medium";
+    if (typeof size === "string" && ["small", "medium"].includes(size)) {
+      spinnerSize = "small";
+    }
+    const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      isLoading && /* @__PURE__ */ jsxRuntime.jsx(
+        StyledSpinnerBox,
+        {
+          "aria-hidden": true,
+          "data-testid": process.env.NODE_ENV === "test" ? "chip-spinner" : void 0,
+          children: /* @__PURE__ */ jsxRuntime.jsx(designSystemSpinner.Spinner, { size: spinnerSize })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        StyledChipContent,
+        {
+          "data-chip-content": "",
+          loading: isLoading || void 0,
+          children
+        }
+      ),
+      !pressable && removable && /* @__PURE__ */ jsxRuntime.jsx(
+        StyledChipButton,
+        {
+          type: "button",
+          disabled: disabled === true || void 0,
+          onClick: onRemove,
+          "aria-label": removeAriaLabel,
+          children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, { size: "small" })
+        }
+      )
+    ] });
+    if (pressable) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        StyledPressableChip,
+        {
+          type: "button",
+          ...restProps,
+          size,
+          variant,
+          disabled: disabled === true || void 0,
+          ref: forwardRef,
+          "aria-busy": isLoading || void 0,
+          "aria-disabled": isLoading || void 0,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      StyledChip,
       {
-        type: "button",
-        onClick: onRemove,
-        "aria-label": removeAriaLabel,
-        children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, { size: "small" })
+        ...restProps,
+        size,
+        variant,
+        disabled,
+        ref: forwardRef,
+        children: content
       }
-    )
-  ] })
+    );
+  }
 );
 Chip.ImageSlot = ImageSlot;

package/dist/main.js.map CHANGED Viewed

	@@ -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: '$chip-background',\n color: '$chip-text',\n maxWidth: '100%',\n variants: {\n disabled: {\n true: {\n backgroundColor: '$chip-background-disabled',\n },\n },\n },\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-secondary',\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","jsxs","jsx","IconCross"],"mappings":";;;;;;;;;;AAMO,MAAM,UAAA,GAAaA,2BAAA,CAAOC,+BAAA,CAAU,GAAA,EAAK;AAAA,EAC9C,QAAA,EAAU,MAAA;AAAA,EACV,UAAA,EAAY,GAAA;AAAA,EACZ,OAAA,EAAS,UAAA;AAAA,EACT,YAAA,EAAc,QAAA;AAAA,EACd,OAAA,EAAS,aAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,GAAA,EAAK,KAAA;AAAA,EACL,eAAA,EAAiB,kBAAA;AAAA,EACjB,KAAA,EAAO,YAAA;AAAA,EACP,QAAA,EAAU,MAAA;AAAA,EACV,QAAA,EAAU;AAAA,IACR,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,eAAA,EAAiB;AAAA;AACnB;AACF;AAEJ,CAAC,CAAA;AAEM,MAAM,iBAAA,GAAoBD,2BAAA,CAAOC,+BAAA,CAAU,GAAA,EAAK;AAAA,EACrD,QAAA,EAAU,QAAA;AAAA,EACV,UAAA,EAAY,QAAA;AAAA,EACZ,YAAA,EAAc;AAChB,CAAC,CAAA;AAEM,MAAM,gBAAA,GAAmBD,4BAAOE,iCAAA,EAAY;AAAA,EACjD,KAAA,EAAO,iBAAA;AAAA,EACP,GAAGC,yBAAM,GAAA,CAAI;AAAA,IACX,SAAA,EAAW;AAAA,GACZ;AACH,CAAC,CAAA;;ACjCM,MAAM,eAAA,GAAkBH,2BAAA,CAAOC,+BAAA,CAAU,IAAA,EAAM;AAAA,EACpD,aAAA,EAAe;AACjB,CAAC,CAAA;;ACDM,MAAM,SAAA,GAAY,eAAA;;AC2BlB,MAAM,OAAO,KAAA,CAAM,UAAA;AAAA,EACxB,CACE,EAAE,QAAA,EAAU,SAAA,GAAY,IAAA,EAAM,UAAU,eAAA,EAAiB,GAAG,SAAA,EAAU,EACtE,+BAEAG,eAAA,CAAC,UAAA,EAAA,EAAY,GAAG,SAAA,EAAW,KAAK,UAAA,EAC9B,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,qBAAmB,QAAA,EAAS,CAAA;AAAA,IAC5B,SAAA,oBACCA,cAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,OAAA,EAAS,QAAA;AAAA,QACT,YAAA,EAAY,eAAA;AAAA,QAEZ,QAAA,kBAAAA,cAAA,CAACC,2BAAA,EAAA,EAAU,IAAA,EAAK,OAAA,EAAQ;AAAA;AAAA;AAC1B,GAAA,EAEJ;AAEJ;AAMA,IAAA,CAAK,SAAA,GAAY,SAAA;;;;"}
1	+ {"version":3,"file":"main.js","sources":["../src/partials/image-icon.styled.tsx","../src/chip.styled.tsx","../src/partials/image-slot.tsx","../src/chip.tsx"],"sourcesContent":["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 display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n verticalAlign: 'middle',\n paddingInline: '$50',\n '& img': {\n display: 'block',\n square: 16,\n borderRadius: '$round',\n objectFit: 'cover',\n },\n})\n\nexport type StyledImageSlotProps = StrictComponentProps<typeof StyledImageSlot>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { CSS, 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\nimport { StyledImageSlot } from './partials/image-icon.styled'\n\n// Same offset Button uses so paddingX matches that scale without importing it.\nconst LABEL_OFFSET = 2\n\nconst imageSlotImg = (size: string): CSS => ({\n [`& ${StyledImageSlot} img`]: {\n square: size,\n },\n})\n\nconst chipLayout = {\n borderRadius: '$round',\n display: 'inline-flex',\n alignItems: 'center',\n width: 'fit-content',\n maxWidth: '100%',\n flexShrink: 0,\n boxSizing: 'border-box',\n border: '1px solid transparent',\n lineHeight: 1.3,\n // Chip labels are regular. Pressable uses BaseButton; don't keep Button's\n // semibold from that shell.\n fontWeight: '$regular',\n}\n\n// Copied from Button's size variant (same tokens and padding formula), not\n// imported — Chip owns this scale so Button can change independently.\nconst chipSizes = {\n 'x-large': {\n height: '$12',\n fontSize: '$200',\n paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n ...imageSlotImg('$8'),\n },\n large: {\n height: '$10',\n fontSize: '$200',\n paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n ...imageSlotImg('$6'),\n },\n medium: {\n height: '$8',\n fontSize: '$175',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n ...imageSlotImg('$5'),\n },\n small: {\n height: '$6',\n fontSize: '$175',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n ...imageSlotImg('$4'),\n },\n}\n\n// Hover and pressed only belong on the pressable shell.\nconst defaultIdle = {\n color: '$chip-text-on-default',\n backgroundColor: '$chip-background-default',\n borderColor: '$chip-border-default',\n}\n\nconst outlineIdle = {\n color: '$chip-text-on-outline',\n backgroundColor: '$transparent',\n borderColor: '$chip-border-outline',\n}\n\nconst defaultInteractive = {\n ...defaultIdle,\n _hover: {\n color: '$chip-text-on-default',\n backgroundColor: '$chip-background-default-hover',\n borderColor: '$chip-border-default-hover',\n },\n '&[data-pressed]': {\n color: '$chip-text-on-default',\n backgroundColor: '$chip-background-default-pressed',\n borderColor: '$chip-border-default',\n },\n // Attribute selector so `disabled` reaches BaseButton / usePress.\n '&[disabled]': {\n backgroundColor: '$background-disabled',\n color: '$text-on-disabled',\n },\n}\n\nconst outlineInteractive = {\n ...outlineIdle,\n _hover: {\n backgroundColor: '$chip-background-outline-hover',\n borderColor: '$chip-border-outline-hover',\n color: '$chip-text-on-outline',\n },\n '&[data-pressed]': {\n backgroundColor: '$chip-background-outline-pressed',\n borderColor: '$chip-border-outline-pressed',\n color: '$chip-text-on-outline',\n },\n '&[disabled]': {\n backgroundColor: '$transparent',\n borderColor: '$border-disabled',\n color: '$text-disabled',\n },\n}\n\nexport const StyledChip = styled(Primitive.div, {\n ...chipLayout,\n variants: {\n variant: {\n default: defaultIdle,\n outline: outlineIdle,\n },\n disabled: {\n true: {},\n },\n size: chipSizes,\n },\n compoundVariants: [\n {\n variant: 'default',\n disabled: true,\n css: {\n backgroundColor: '$background-disabled',\n color: '$text-on-disabled',\n '& button': {\n color: '$icon-on-disabled',\n },\n },\n },\n {\n variant: 'outline',\n disabled: true,\n css: {\n backgroundColor: '$transparent',\n borderColor: '$border-disabled',\n color: '$text-disabled',\n '& button': {\n color: '$icon-disabled',\n },\n },\n },\n ],\n defaultVariants: {\n variant: 'default',\n size: 'medium',\n },\n})\n\nexport const StyledPressableChip = styled(BaseButton, {\n ...chipLayout,\n position: 'relative',\n ...focus.css({\n boxShadow: '$focus',\n }),\n // Loading stays visually idle — only the wait cursor signals it. Don't reuse\n // the disabled mute; that made loading look broken.\n '&[aria-busy=\"true\"]': {\n cursor: 'wait',\n pointerEvents: 'none',\n },\n variants: {\n variant: {\n default: defaultInteractive,\n outline: outlineInteractive,\n },\n size: chipSizes,\n },\n defaultVariants: {\n variant: 'default',\n size: 'medium',\n },\n})\n\nexport const StyledChipContent = styled(Primitive.div, {\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n // Taller than the em box so descenders (g, y) aren't clipped by overflow.\n lineHeight: 1.3,\n minWidth: 0,\n display: 'flex',\n alignItems: 'center',\n variants: {\n loading: {\n true: {\n opacity: 0,\n },\n },\n },\n})\n\nexport const StyledSpinnerBox = styled(Primitive.div, {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n margin: 'auto',\n zIndex: 1,\n})\n\nexport const StyledChipButton = styled(BaseButton, {\n // Figma Chip: spacing-100 before the close glyph, not container gap.\n paddingInlineStart: '$100',\n flexShrink: 0,\n color: '$icon-secondary',\n ...focus.css({\n boxShadow: '$focus',\n }),\n})\n\nexport type StyledChipProps = StrictComponentProps<typeof StyledChip>\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 {\n ElementRef,\n ForwardRefExoticComponent,\n RefAttributes,\n} from 'react'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { IconCross } from '@mirohq/design-system-icons'\nimport { Spinner } from '@mirohq/design-system-spinner'\nimport type { SpinnerProps } from '@mirohq/design-system-spinner'\n\nimport {\n StyledChip,\n StyledChipButton,\n StyledChipContent,\n StyledPressableChip,\n StyledSpinnerBox,\n} from './chip.styled'\nimport type { StyledChipProps } from './chip.styled'\nimport { ImageSlot } from './partials/image-slot'\n\nexport type ChipProps = Omit<\n StyledChipProps,\n 'ref' \| 'size' \| 'variant' \| 'disabled'\n> &\n Pick<BaseButtonProps, 'onPress'> &\n RefAttributes<HTMLDivElement \| HTMLButtonElement> & {\n /*\n Change the chip size. Same scale as Button (`small`, `medium`, `large`,\n * `x-large`).\n * @default 'medium'\n /\n size?: StyledChipProps['size']\n /\n Change the chip style. `default` is filled; `outline` is bordered.\n * @default 'default'\n /\n variant?: StyledChipProps['variant']\n /\n Disable the chip. When removable, the close control is disabled too.\n /\n disabled?: boolean\n /\n Show a button to remove the Chip\n * @default true\n /\n removable?: boolean\n /\n Show a spinner overlay and keep the chip non-interactive without the\n * disabled look. Pressable only.\n * @default false\n /\n loading?: boolean\n } & (\n \| {\n /\n Event handler called when the chip's remove button is clicked.\n /\n onRemove: (\n event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n ) => void\n /\n Remove button label to make the button recognizable by the screen readers.\n */\n removeAriaLabel: string\n }\n \| { removable: false; removeAriaLabel?: never; onRemove?: never }\n )\n\nconst hasPressEvent = (props: object): boolean => {\n if ('onClick' in props && props.onClick != null) return true\n if ('onPress' in props && props.onPress != null) return true\n\n return false\n}\n\nexport const Chip = React.forwardRef<ElementRef<'div' \| 'button'>, ChipProps>(\n (props, forwardRef) => {\n const {\n children,\n removable = true,\n onRemove,\n removeAriaLabel,\n loading = false,\n size = 'medium',\n variant = 'default',\n disabled,\n ...restProps\n } = props\n\n const pressable = hasPressEvent(restProps)\n const isLoading = pressable && loading\n\n let spinnerSize: SpinnerProps['size'] = 'medium'\n\n if (typeof size === 'string' && ['small', 'medium'].includes(size)) {\n spinnerSize = 'small'\n }\n\n const content = (\n <>\n {isLoading && (\n <StyledSpinnerBox\n aria-hidden\n data-testid={\n process.env.NODE_ENV === 'test' ? 'chip-spinner' : undefined\n }\n >\n <Spinner size={spinnerSize} />\n </StyledSpinnerBox>\n )}\n <StyledChipContent\n data-chip-content=''\n loading={isLoading \|\| undefined}\n >\n {children}\n </StyledChipContent>\n {!pressable && removable && (\n <StyledChipButton\n type='button'\n disabled={disabled === true \|\| undefined}\n onClick={onRemove}\n aria-label={removeAriaLabel}\n >\n <IconCross size='small' />\n </StyledChipButton>\n )}\n </>\n )\n\n if (pressable) {\n return (\n <StyledPressableChip\n type='button'\n {...(restProps as BaseButtonProps)}\n size={size}\n variant={variant}\n disabled={disabled === true \|\| undefined}\n ref={forwardRef as React.Ref<ElementRef<typeof StyledPressableChip>>}\n aria-busy={isLoading \|\| undefined}\n aria-disabled={isLoading \|\| undefined}\n >\n {content}\n </StyledPressableChip>\n )\n }\n\n return (\n <StyledChip\n {...(restProps as StyledChipProps)}\n size={size}\n variant={variant}\n disabled={disabled}\n ref={forwardRef as React.Ref<ElementRef<typeof StyledChip>>}\n >\n {content}\n </StyledChip>\n )\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","jsxs","Fragment","jsx","Spinner","IconCross"],"mappings":"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"}

package/dist/module.js CHANGED Viewed

@@ -1,61 +1,306 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { IconCross } from '@mirohq/design-system-icons';
+import { Spinner } from '@mirohq/design-system-spinner';
 import { styled } from '@mirohq/design-system-stitches';
 import { Primitive } from '@mirohq/design-system-primitive';
 import { BaseButton } from '@mirohq/design-system-base-button';
 import { focus } from '@mirohq/design-system-styles';
-const StyledChip = styled(Primitive.div, {
-  fontSize: "$150",
-  lineHeight: 1.3,
-  padding: "$50 $100",
+const StyledImageSlot = styled(Primitive.span, {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  verticalAlign: "middle",
+  paddingInline: "$50",
+  "& img": {
+    display: "block",
+    square: 16,
+    borderRadius: "$round",
+    objectFit: "cover"
+  }
+});
+const LABEL_OFFSET = 2;
+const imageSlotImg = (size) => ({
+  ["& ".concat(StyledImageSlot, " img")]: {
+    square: size
+  }
+});
+const chipLayout = {
   borderRadius: "$round",
   display: "inline-flex",
   alignItems: "center",
-  gap: "$50",
-  backgroundColor: "$chip-background",
-  color: "$chip-text",
+  width: "fit-content",
   maxWidth: "100%",
+  flexShrink: 0,
+  boxSizing: "border-box",
+  border: "1px solid transparent",
+  lineHeight: 1.3,
+  // Chip labels are regular. Pressable uses BaseButton; don't keep Button's
+  // semibold from that shell.
+  fontWeight: "$regular"
+};
+const chipSizes = {
+  "x-large": {
+    height: "$12",
+    fontSize: "$200",
+    paddingX: "calc($200 + ".concat(LABEL_OFFSET, "px)"),
+    ...imageSlotImg("$8")
+  },
+  large: {
+    height: "$10",
+    fontSize: "$200",
+    paddingX: "calc($150 + ".concat(LABEL_OFFSET, "px)"),
+    ...imageSlotImg("$6")
+  },
+  medium: {
+    height: "$8",
+    fontSize: "$175",
+    paddingX: "calc($100 + ".concat(LABEL_OFFSET, "px)"),
+    ...imageSlotImg("$5")
+  },
+  small: {
+    height: "$6",
+    fontSize: "$175",
+    paddingX: "calc($100 + ".concat(LABEL_OFFSET, "px)"),
+    ...imageSlotImg("$4")
+  }
+};
+const defaultIdle = {
+  color: "$chip-text-on-default",
+  backgroundColor: "$chip-background-default",
+  borderColor: "$chip-border-default"
+};
+const outlineIdle = {
+  color: "$chip-text-on-outline",
+  backgroundColor: "$transparent",
+  borderColor: "$chip-border-outline"
+};
+const defaultInteractive = {
+  ...defaultIdle,
+  _hover: {
+    color: "$chip-text-on-default",
+    backgroundColor: "$chip-background-default-hover",
+    borderColor: "$chip-border-default-hover"
+  },
+  "&[data-pressed]": {
+    color: "$chip-text-on-default",
+    backgroundColor: "$chip-background-default-pressed",
+    borderColor: "$chip-border-default"
+  },
+  // Attribute selector so `disabled` reaches BaseButton / usePress.
+  "&[disabled]": {
+    backgroundColor: "$background-disabled",
+    color: "$text-on-disabled"
+  }
+};
+const outlineInteractive = {
+  ...outlineIdle,
+  _hover: {
+    backgroundColor: "$chip-background-outline-hover",
+    borderColor: "$chip-border-outline-hover",
+    color: "$chip-text-on-outline"
+  },
+  "&[data-pressed]": {
+    backgroundColor: "$chip-background-outline-pressed",
+    borderColor: "$chip-border-outline-pressed",
+    color: "$chip-text-on-outline"
+  },
+  "&[disabled]": {
+    backgroundColor: "$transparent",
+    borderColor: "$border-disabled",
+    color: "$text-disabled"
+  }
+};
+const StyledChip = styled(Primitive.div, {
+  ...chipLayout,
   variants: {
+    variant: {
+      default: defaultIdle,
+      outline: outlineIdle
+    },
     disabled: {
-      true: {
-        backgroundColor: "$chip-background-disabled"
+      true: {}
+    },
+    size: chipSizes
+  },
+  compoundVariants: [
+    {
+      variant: "default",
+      disabled: true,
+      css: {
+        backgroundColor: "$background-disabled",
+        color: "$text-on-disabled",
+        "& button": {
+          color: "$icon-on-disabled"
+        }
+      }
+    },
+    {
+      variant: "outline",
+      disabled: true,
+      css: {
+        backgroundColor: "$transparent",
+        borderColor: "$border-disabled",
+        color: "$text-disabled",
+        "& button": {
+          color: "$icon-disabled"
+        }
       }
     }
+  ],
+  defaultVariants: {
+    variant: "default",
+    size: "medium"
+  }
+});
+const StyledPressableChip = styled(BaseButton, {
+  ...chipLayout,
+  position: "relative",
+  ...focus.css({
+    boxShadow: "$focus"
+  }),
+  // Loading stays visually idle — only the wait cursor signals it. Don't reuse
+  // the disabled mute; that made loading look broken.
+  '&[aria-busy="true"]': {
+    cursor: "wait",
+    pointerEvents: "none"
+  },
+  variants: {
+    variant: {
+      default: defaultInteractive,
+      outline: outlineInteractive
+    },
+    size: chipSizes
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "medium"
   }
 });
 const StyledChipContent = styled(Primitive.div, {
   overflow: "hidden",
   whiteSpace: "nowrap",
-  textOverflow: "ellipsis"
+  textOverflow: "ellipsis",
+  // Taller than the em box so descenders (g, y) aren't clipped by overflow.
+  lineHeight: 1.3,
+  minWidth: 0,
+  display: "flex",
+  alignItems: "center",
+  variants: {
+    loading: {
+      true: {
+        opacity: 0
+      }
+    }
+  }
+});
+const StyledSpinnerBox = styled(Primitive.div, {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  position: "absolute",
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  margin: "auto",
+  zIndex: 1
 });
 const StyledChipButton = styled(BaseButton, {
+  // Figma Chip: spacing-100 before the close glyph, not container gap.
+  paddingInlineStart: "$100",
+  flexShrink: 0,
   color: "$icon-secondary",
   ...focus.css({
     boxShadow: "$focus"
   })
 });
-const StyledImageSlot = styled(Primitive.span, {
-  paddingInline: "$50"
-});
 const ImageSlot = StyledImageSlot;
+const hasPressEvent = (props) => {
+  if ("onClick" in props && props.onClick != null) return true;
+  if ("onPress" in props && props.onPress != null) return true;
+  return false;
+};
 const Chip = React.forwardRef(
-  ({ children, removable = true, onRemove, removeAriaLabel, ...restProps }, forwardRef) => /* @__PURE__ */ jsxs(StyledChip, { ...restProps, ref: forwardRef, children: [
-    /* @__PURE__ */ jsx(StyledChipContent, { children }),
-    removable && /* @__PURE__ */ jsx(
-      StyledChipButton,
+  (props, forwardRef) => {
+    const {
+      children,
+      removable = true,
+      onRemove,
+      removeAriaLabel,
+      loading = false,
+      size = "medium",
+      variant = "default",
+      disabled,
+      ...restProps
+    } = props;
+    const pressable = hasPressEvent(restProps);
+    const isLoading = pressable && loading;
+    let spinnerSize = "medium";
+    if (typeof size === "string" && ["small", "medium"].includes(size)) {
+      spinnerSize = "small";
+    }
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      isLoading && /* @__PURE__ */ jsx(
+        StyledSpinnerBox,
+        {
+          "aria-hidden": true,
+          "data-testid": process.env.NODE_ENV === "test" ? "chip-spinner" : void 0,
+          children: /* @__PURE__ */ jsx(Spinner, { size: spinnerSize })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StyledChipContent,
+        {
+          "data-chip-content": "",
+          loading: isLoading || void 0,
+          children
+        }
+      ),
+      !pressable && removable && /* @__PURE__ */ jsx(
+        StyledChipButton,
+        {
+          type: "button",
+          disabled: disabled === true || void 0,
+          onClick: onRemove,
+          "aria-label": removeAriaLabel,
+          children: /* @__PURE__ */ jsx(IconCross, { size: "small" })
+        }
+      )
+    ] });
+    if (pressable) {
+      return /* @__PURE__ */ jsx(
+        StyledPressableChip,
+        {
+          type: "button",
+          ...restProps,
+          size,
+          variant,
+          disabled: disabled === true || void 0,
+          ref: forwardRef,
+          "aria-busy": isLoading || void 0,
+          "aria-disabled": isLoading || void 0,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      StyledChip,
       {
-        type: "button",
-        onClick: onRemove,
-        "aria-label": removeAriaLabel,
-        children: /* @__PURE__ */ jsx(IconCross, { size: "small" })
+        ...restProps,
+        size,
+        variant,
+        disabled,
+        ref: forwardRef,
+        children: content
       }
-    )
-  ] })
+    );
+  }
 );
 Chip.ImageSlot = ImageSlot;

package/dist/module.js.map CHANGED Viewed

	@@ -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: '$chip-background',\n color: '$chip-text',\n maxWidth: '100%',\n variants: {\n disabled: {\n true: {\n backgroundColor: '$chip-background-disabled',\n },\n },\n },\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-secondary',\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":";;;;;;;;AAMO,MAAM,UAAA,GAAa,MAAA,CAAO,SAAA,CAAU,GAAA,EAAK;AAAA,EAC9C,QAAA,EAAU,MAAA;AAAA,EACV,UAAA,EAAY,GAAA;AAAA,EACZ,OAAA,EAAS,UAAA;AAAA,EACT,YAAA,EAAc,QAAA;AAAA,EACd,OAAA,EAAS,aAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,GAAA,EAAK,KAAA;AAAA,EACL,eAAA,EAAiB,kBAAA;AAAA,EACjB,KAAA,EAAO,YAAA;AAAA,EACP,QAAA,EAAU,MAAA;AAAA,EACV,QAAA,EAAU;AAAA,IACR,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,eAAA,EAAiB;AAAA;AACnB;AACF;AAEJ,CAAC,CAAA;AAEM,MAAM,iBAAA,GAAoB,MAAA,CAAO,SAAA,CAAU,GAAA,EAAK;AAAA,EACrD,QAAA,EAAU,QAAA;AAAA,EACV,UAAA,EAAY,QAAA;AAAA,EACZ,YAAA,EAAc;AAChB,CAAC,CAAA;AAEM,MAAM,gBAAA,GAAmB,OAAO,UAAA,EAAY;AAAA,EACjD,KAAA,EAAO,iBAAA;AAAA,EACP,GAAG,MAAM,GAAA,CAAI;AAAA,IACX,SAAA,EAAW;AAAA,GACZ;AACH,CAAC,CAAA;;ACjCM,MAAM,eAAA,GAAkB,MAAA,CAAO,SAAA,CAAU,IAAA,EAAM;AAAA,EACpD,aAAA,EAAe;AACjB,CAAC,CAAA;;ACDM,MAAM,SAAA,GAAY,eAAA;;AC2BlB,MAAM,OAAO,KAAA,CAAM,UAAA;AAAA,EACxB,CACE,EAAE,QAAA,EAAU,SAAA,GAAY,IAAA,EAAM,UAAU,eAAA,EAAiB,GAAG,SAAA,EAAU,EACtE,+BAEA,IAAA,CAAC,UAAA,EAAA,EAAY,GAAG,SAAA,EAAW,KAAK,UAAA,EAC9B,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,qBAAmB,QAAA,EAAS,CAAA;AAAA,IAC5B,SAAA,oBACC,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,OAAA,EAAS,QAAA;AAAA,QACT,YAAA,EAAY,eAAA;AAAA,QAEZ,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,IAAA,EAAK,OAAA,EAAQ;AAAA;AAAA;AAC1B,GAAA,EAEJ;AAEJ;AAMA,IAAA,CAAK,SAAA,GAAY,SAAA;;;;"}
1	+ {"version":3,"file":"module.js","sources":["../src/partials/image-icon.styled.tsx","../src/chip.styled.tsx","../src/partials/image-slot.tsx","../src/chip.tsx"],"sourcesContent":["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 display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n verticalAlign: 'middle',\n paddingInline: '$50',\n '& img': {\n display: 'block',\n square: 16,\n borderRadius: '$round',\n objectFit: 'cover',\n },\n})\n\nexport type StyledImageSlotProps = StrictComponentProps<typeof StyledImageSlot>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { CSS, 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\nimport { StyledImageSlot } from './partials/image-icon.styled'\n\n// Same offset Button uses so paddingX matches that scale without importing it.\nconst LABEL_OFFSET = 2\n\nconst imageSlotImg = (size: string): CSS => ({\n [`& ${StyledImageSlot} img`]: {\n square: size,\n },\n})\n\nconst chipLayout = {\n borderRadius: '$round',\n display: 'inline-flex',\n alignItems: 'center',\n width: 'fit-content',\n maxWidth: '100%',\n flexShrink: 0,\n boxSizing: 'border-box',\n border: '1px solid transparent',\n lineHeight: 1.3,\n // Chip labels are regular. Pressable uses BaseButton; don't keep Button's\n // semibold from that shell.\n fontWeight: '$regular',\n}\n\n// Copied from Button's size variant (same tokens and padding formula), not\n// imported — Chip owns this scale so Button can change independently.\nconst chipSizes = {\n 'x-large': {\n height: '$12',\n fontSize: '$200',\n paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n ...imageSlotImg('$8'),\n },\n large: {\n height: '$10',\n fontSize: '$200',\n paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n ...imageSlotImg('$6'),\n },\n medium: {\n height: '$8',\n fontSize: '$175',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n ...imageSlotImg('$5'),\n },\n small: {\n height: '$6',\n fontSize: '$175',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n ...imageSlotImg('$4'),\n },\n}\n\n// Hover and pressed only belong on the pressable shell.\nconst defaultIdle = {\n color: '$chip-text-on-default',\n backgroundColor: '$chip-background-default',\n borderColor: '$chip-border-default',\n}\n\nconst outlineIdle = {\n color: '$chip-text-on-outline',\n backgroundColor: '$transparent',\n borderColor: '$chip-border-outline',\n}\n\nconst defaultInteractive = {\n ...defaultIdle,\n _hover: {\n color: '$chip-text-on-default',\n backgroundColor: '$chip-background-default-hover',\n borderColor: '$chip-border-default-hover',\n },\n '&[data-pressed]': {\n color: '$chip-text-on-default',\n backgroundColor: '$chip-background-default-pressed',\n borderColor: '$chip-border-default',\n },\n // Attribute selector so `disabled` reaches BaseButton / usePress.\n '&[disabled]': {\n backgroundColor: '$background-disabled',\n color: '$text-on-disabled',\n },\n}\n\nconst outlineInteractive = {\n ...outlineIdle,\n _hover: {\n backgroundColor: '$chip-background-outline-hover',\n borderColor: '$chip-border-outline-hover',\n color: '$chip-text-on-outline',\n },\n '&[data-pressed]': {\n backgroundColor: '$chip-background-outline-pressed',\n borderColor: '$chip-border-outline-pressed',\n color: '$chip-text-on-outline',\n },\n '&[disabled]': {\n backgroundColor: '$transparent',\n borderColor: '$border-disabled',\n color: '$text-disabled',\n },\n}\n\nexport const StyledChip = styled(Primitive.div, {\n ...chipLayout,\n variants: {\n variant: {\n default: defaultIdle,\n outline: outlineIdle,\n },\n disabled: {\n true: {},\n },\n size: chipSizes,\n },\n compoundVariants: [\n {\n variant: 'default',\n disabled: true,\n css: {\n backgroundColor: '$background-disabled',\n color: '$text-on-disabled',\n '& button': {\n color: '$icon-on-disabled',\n },\n },\n },\n {\n variant: 'outline',\n disabled: true,\n css: {\n backgroundColor: '$transparent',\n borderColor: '$border-disabled',\n color: '$text-disabled',\n '& button': {\n color: '$icon-disabled',\n },\n },\n },\n ],\n defaultVariants: {\n variant: 'default',\n size: 'medium',\n },\n})\n\nexport const StyledPressableChip = styled(BaseButton, {\n ...chipLayout,\n position: 'relative',\n ...focus.css({\n boxShadow: '$focus',\n }),\n // Loading stays visually idle — only the wait cursor signals it. Don't reuse\n // the disabled mute; that made loading look broken.\n '&[aria-busy=\"true\"]': {\n cursor: 'wait',\n pointerEvents: 'none',\n },\n variants: {\n variant: {\n default: defaultInteractive,\n outline: outlineInteractive,\n },\n size: chipSizes,\n },\n defaultVariants: {\n variant: 'default',\n size: 'medium',\n },\n})\n\nexport const StyledChipContent = styled(Primitive.div, {\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n // Taller than the em box so descenders (g, y) aren't clipped by overflow.\n lineHeight: 1.3,\n minWidth: 0,\n display: 'flex',\n alignItems: 'center',\n variants: {\n loading: {\n true: {\n opacity: 0,\n },\n },\n },\n})\n\nexport const StyledSpinnerBox = styled(Primitive.div, {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n margin: 'auto',\n zIndex: 1,\n})\n\nexport const StyledChipButton = styled(BaseButton, {\n // Figma Chip: spacing-100 before the close glyph, not container gap.\n paddingInlineStart: '$100',\n flexShrink: 0,\n color: '$icon-secondary',\n ...focus.css({\n boxShadow: '$focus',\n }),\n})\n\nexport type StyledChipProps = StrictComponentProps<typeof StyledChip>\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 {\n ElementRef,\n ForwardRefExoticComponent,\n RefAttributes,\n} from 'react'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { IconCross } from '@mirohq/design-system-icons'\nimport { Spinner } from '@mirohq/design-system-spinner'\nimport type { SpinnerProps } from '@mirohq/design-system-spinner'\n\nimport {\n StyledChip,\n StyledChipButton,\n StyledChipContent,\n StyledPressableChip,\n StyledSpinnerBox,\n} from './chip.styled'\nimport type { StyledChipProps } from './chip.styled'\nimport { ImageSlot } from './partials/image-slot'\n\nexport type ChipProps = Omit<\n StyledChipProps,\n 'ref' \| 'size' \| 'variant' \| 'disabled'\n> &\n Pick<BaseButtonProps, 'onPress'> &\n RefAttributes<HTMLDivElement \| HTMLButtonElement> & {\n /*\n Change the chip size. Same scale as Button (`small`, `medium`, `large`,\n * `x-large`).\n * @default 'medium'\n /\n size?: StyledChipProps['size']\n /\n Change the chip style. `default` is filled; `outline` is bordered.\n * @default 'default'\n /\n variant?: StyledChipProps['variant']\n /\n Disable the chip. When removable, the close control is disabled too.\n /\n disabled?: boolean\n /\n Show a button to remove the Chip\n * @default true\n /\n removable?: boolean\n /\n Show a spinner overlay and keep the chip non-interactive without the\n * disabled look. Pressable only.\n * @default false\n /\n loading?: boolean\n } & (\n \| {\n /\n Event handler called when the chip's remove button is clicked.\n /\n onRemove: (\n event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n ) => void\n /\n Remove button label to make the button recognizable by the screen readers.\n */\n removeAriaLabel: string\n }\n \| { removable: false; removeAriaLabel?: never; onRemove?: never }\n )\n\nconst hasPressEvent = (props: object): boolean => {\n if ('onClick' in props && props.onClick != null) return true\n if ('onPress' in props && props.onPress != null) return true\n\n return false\n}\n\nexport const Chip = React.forwardRef<ElementRef<'div' \| 'button'>, ChipProps>(\n (props, forwardRef) => {\n const {\n children,\n removable = true,\n onRemove,\n removeAriaLabel,\n loading = false,\n size = 'medium',\n variant = 'default',\n disabled,\n ...restProps\n } = props\n\n const pressable = hasPressEvent(restProps)\n const isLoading = pressable && loading\n\n let spinnerSize: SpinnerProps['size'] = 'medium'\n\n if (typeof size === 'string' && ['small', 'medium'].includes(size)) {\n spinnerSize = 'small'\n }\n\n const content = (\n <>\n {isLoading && (\n <StyledSpinnerBox\n aria-hidden\n data-testid={\n process.env.NODE_ENV === 'test' ? 'chip-spinner' : undefined\n }\n >\n <Spinner size={spinnerSize} />\n </StyledSpinnerBox>\n )}\n <StyledChipContent\n data-chip-content=''\n loading={isLoading \|\| undefined}\n >\n {children}\n </StyledChipContent>\n {!pressable && removable && (\n <StyledChipButton\n type='button'\n disabled={disabled === true \|\| undefined}\n onClick={onRemove}\n aria-label={removeAriaLabel}\n >\n <IconCross size='small' />\n </StyledChipButton>\n )}\n </>\n )\n\n if (pressable) {\n return (\n <StyledPressableChip\n type='button'\n {...(restProps as BaseButtonProps)}\n size={size}\n variant={variant}\n disabled={disabled === true \|\| undefined}\n ref={forwardRef as React.Ref<ElementRef<typeof StyledPressableChip>>}\n aria-busy={isLoading \|\| undefined}\n aria-disabled={isLoading \|\| undefined}\n >\n {content}\n </StyledPressableChip>\n )\n }\n\n return (\n <StyledChip\n {...(restProps as StyledChipProps)}\n size={size}\n variant={variant}\n disabled={disabled}\n ref={forwardRef as React.Ref<ElementRef<typeof StyledChip>>}\n >\n {content}\n </StyledChip>\n )\n }\n) as ForwardRefExoticComponent<ChipProps> & Partials\n\nexport interface Partials {\n ImageSlot: typeof ImageSlot\n}\n\nChip.ImageSlot = ImageSlot\n"],"names":[],"mappings":"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"}

package/dist/types.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import * as react from 'react';
-import react__default, { ForwardRefExoticComponent } from 'react';
+import react__default, { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { BaseButtonProps } from '@mirohq/design-system-base-button';
 import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
 import { StrictComponentProps } from '@mirohq/design-system-stitches';
 import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
@@ -25,10 +26,14 @@ type TransformProps<Props, Media> = {
 	)
 }
-declare const StyledChip: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, "disabled"> & TransformProps<{
+declare const StyledChip: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, "size" | "disabled" | "variant"> & TransformProps<{
+    variant?: "outline" | "default" | undefined;
     disabled?: boolean | "true" | undefined;
+    size?: "small" | "medium" | "large" | "x-large" | undefined;
 }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
+    variant?: "outline" | "default" | undefined;
     disabled?: boolean | "true" | undefined;
+    size?: "small" | "medium" | "large" | "x-large" | undefined;
 }, {}>;
 type StyledChipProps = StrictComponentProps<typeof StyledChip>;
@@ -39,23 +44,43 @@ interface ImageSlotProps extends StyledImageSlotProps {
 }
 declare const ImageSlot: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"span">>>, never> & TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLSpanElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"span">>, {}, {}>;
-interface RemovableProps {
+type ChipProps = Omit<StyledChipProps, 'ref' | 'size' | 'variant' | 'disabled'> & Pick<BaseButtonProps, 'onPress'> & RefAttributes<HTMLDivElement | HTMLButtonElement> & {
     /**
-     * Event handler called when the chip's remove button is clicked.
+     * Change the chip size. Same scale as Button (`small`, `medium`, `large`,
+     * `x-large`).
+     * @default 'medium'
      */
-    onRemove: (event: react__default.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    size?: StyledChipProps['size'];
     /**
-     * Remove button label to make the button recognizable by the screen readers.
+     * Change the chip style. `default` is filled; `outline` is bordered.
+     * @default 'default'
      */
-    removeAriaLabel: string;
-}
-type ChipProps = (StyledChipProps & {
+    variant?: StyledChipProps['variant'];
+    /**
+     * Disable the chip. When removable, the close control is disabled too.
+     */
+    disabled?: boolean;
     /**
      * Show a button to remove the Chip
      * @default true
      */
     removable?: boolean;
-}) & (RemovableProps | {
+    /**
+     * Show a spinner overlay and keep the chip non-interactive without the
+     * disabled look. Pressable only.
+     * @default false
+     */
+    loading?: boolean;
+} & ({
+    /**
+     * Event handler called when the chip's remove button is clicked.
+     */
+    onRemove: (event: react__default.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /**
+     * Remove button label to make the button recognizable by the screen readers.
+     */
+    removeAriaLabel: string;
+} | {
     removable: false;
     removeAriaLabel?: never;
     onRemove?: never;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-chip",
-  "version": "1.2.62",
+  "version": "1.3.0-filter-chip.1",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -26,11 +26,12 @@
     "react": "^16.14 || ^17 || ^18 || ^19"
   },
   "dependencies": {
-    "@mirohq/design-system-base-button": "^1.2.38",
     "@mirohq/design-system-icons": "^1.46.2",
+    "@mirohq/design-system-base-button": "^1.2.38",
+    "@mirohq/design-system-spinner": "^2.2.35",
     "@mirohq/design-system-stitches": "^3.3.33",
-    "@mirohq/design-system-styles": "^3.2.33",
-    "@mirohq/design-system-primitive": "^2.2.1"
+    "@mirohq/design-system-primitive": "^2.2.1",
+    "@mirohq/design-system-styles": "^3.2.33"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",