@mirohq/design-system-chip 1.3.0-filter-chip.0 → 1.3.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.
Files changed (6) hide show
  1. package/dist/main.js +175 -23
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +175 -23
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +27 -8
  6. package/package.json +6 -6
package/dist/main.js CHANGED
@@ -9,49 +9,190 @@ var designSystemPrimitive = require('@mirohq/design-system-primitive');
9
9
  var designSystemBaseButton = require('@mirohq/design-system-base-button');
10
10
  var designSystemStyles = require('@mirohq/design-system-styles');
11
11
 
12
- const chipStyles = {
13
- fontSize: "$150",
14
- lineHeight: 1.3,
15
- padding: "$50 $100",
12
+ const StyledIconSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
13
+ display: "inline-flex",
14
+ alignItems: "center",
15
+ justifyContent: "center",
16
+ flexShrink: 0,
17
+ verticalAlign: "middle",
18
+ paddingInline: "$50",
19
+ "& img": {
20
+ display: "block",
21
+ square: 16,
22
+ borderRadius: "$round",
23
+ objectFit: "cover"
24
+ }
25
+ });
26
+
27
+ const LABEL_OFFSET = 2;
28
+ const iconSlotImg = (size) => ({
29
+ ["& ".concat(StyledIconSlot, " img")]: {
30
+ square: size
31
+ }
32
+ });
33
+ const chipLayout = {
16
34
  borderRadius: "$round",
17
35
  display: "inline-flex",
18
36
  alignItems: "center",
19
- gap: "$50",
20
- backgroundColor: "$chip-background",
21
- color: "$chip-text",
22
- maxWidth: "100%"
37
+ // Gap, not close-button padding — padding sits inside the focus ring.
38
+ gap: "$100",
39
+ width: "fit-content",
40
+ maxWidth: "100%",
41
+ flexShrink: 0,
42
+ boxSizing: "border-box",
43
+ border: "1px solid transparent",
44
+ lineHeight: 1.3,
45
+ // Chip labels are regular. Pressable uses BaseButton; don't keep Button's
46
+ // semibold from that shell.
47
+ fontWeight: "$regular"
48
+ };
49
+ const chipSizes = {
50
+ "x-large": {
51
+ height: "$12",
52
+ fontSize: "$200",
53
+ paddingX: "calc($200 + ".concat(LABEL_OFFSET, "px)"),
54
+ ...iconSlotImg("$8")
55
+ },
56
+ large: {
57
+ height: "$10",
58
+ fontSize: "$200",
59
+ paddingX: "calc($150 + ".concat(LABEL_OFFSET, "px)"),
60
+ ...iconSlotImg("$6")
61
+ },
62
+ medium: {
63
+ height: "$8",
64
+ fontSize: "$175",
65
+ paddingX: "calc($100 + ".concat(LABEL_OFFSET, "px)"),
66
+ ...iconSlotImg("$5")
67
+ },
68
+ small: {
69
+ height: "$6",
70
+ fontSize: "$175",
71
+ paddingX: "calc($100 + ".concat(LABEL_OFFSET, "px)"),
72
+ ...iconSlotImg("$4")
73
+ }
74
+ };
75
+ const defaultIdle = {
76
+ color: "$chip-text-on-default",
77
+ backgroundColor: "$chip-background-default",
78
+ borderColor: "$chip-border-default"
79
+ };
80
+ const outlineIdle = {
81
+ color: "$chip-text-on-outline",
82
+ backgroundColor: "$transparent",
83
+ borderColor: "$chip-border-outline"
23
84
  };
24
- const disabledAppearance = {
25
- backgroundColor: "$chip-background-disabled"
85
+ const defaultInteractive = {
86
+ ...defaultIdle,
87
+ _hover: {
88
+ color: "$chip-text-on-default",
89
+ backgroundColor: "$chip-background-default-hover",
90
+ borderColor: "$chip-border-default-hover"
91
+ },
92
+ "&[data-pressed]": {
93
+ color: "$chip-text-on-default",
94
+ backgroundColor: "$chip-background-default-pressed",
95
+ borderColor: "$chip-border-default"
96
+ },
97
+ // Attribute selector so `disabled` reaches BaseButton / usePress.
98
+ "&[disabled]": {
99
+ backgroundColor: "$background-disabled",
100
+ color: "$text-on-disabled"
101
+ }
102
+ };
103
+ const outlineInteractive = {
104
+ ...outlineIdle,
105
+ _hover: {
106
+ backgroundColor: "$chip-background-outline-hover",
107
+ borderColor: "$chip-border-outline-hover",
108
+ color: "$chip-text-on-outline"
109
+ },
110
+ "&[data-pressed]": {
111
+ backgroundColor: "$chip-background-outline-pressed",
112
+ borderColor: "$chip-border-outline-pressed",
113
+ color: "$chip-text-on-outline"
114
+ },
115
+ "&[disabled]": {
116
+ backgroundColor: "$transparent",
117
+ borderColor: "$border-disabled",
118
+ color: "$text-disabled"
119
+ }
26
120
  };
27
121
  const StyledChip = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
28
- ...chipStyles,
122
+ ...chipLayout,
29
123
  variants: {
124
+ variant: {
125
+ default: defaultIdle,
126
+ outline: outlineIdle
127
+ },
30
128
  disabled: {
31
- true: disabledAppearance
129
+ true: {}
130
+ },
131
+ size: chipSizes
132
+ },
133
+ compoundVariants: [
134
+ {
135
+ variant: "default",
136
+ disabled: true,
137
+ css: {
138
+ backgroundColor: "$background-disabled",
139
+ color: "$text-on-disabled",
140
+ "& button": {
141
+ color: "$icon-on-disabled"
142
+ }
143
+ }
144
+ },
145
+ {
146
+ variant: "outline",
147
+ disabled: true,
148
+ css: {
149
+ backgroundColor: "$transparent",
150
+ borderColor: "$border-disabled",
151
+ color: "$text-disabled",
152
+ "& button": {
153
+ color: "$icon-disabled"
154
+ }
155
+ }
32
156
  }
157
+ ],
158
+ defaultVariants: {
159
+ variant: "default",
160
+ size: "medium"
33
161
  }
34
162
  });
35
163
  const StyledPressableChip = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
36
- ...chipStyles,
164
+ ...chipLayout,
37
165
  position: "relative",
38
166
  ...designSystemStyles.focus.css({
39
167
  boxShadow: "$focus"
40
168
  }),
41
- // Attribute selector so `disabled` reaches BaseButton / usePress (a stitches
42
- // `disabled` variant would consume the prop and leave the button enabled).
43
- "&[disabled]": disabledAppearance,
44
169
  // Loading stays visually idle — only the wait cursor signals it. Don't reuse
45
170
  // the disabled mute; that made loading look broken.
46
171
  '&[aria-busy="true"]': {
47
172
  cursor: "wait",
48
173
  pointerEvents: "none"
174
+ },
175
+ variants: {
176
+ variant: {
177
+ default: defaultInteractive,
178
+ outline: outlineInteractive
179
+ },
180
+ size: chipSizes
181
+ },
182
+ defaultVariants: {
183
+ variant: "default",
184
+ size: "medium"
49
185
  }
50
186
  });
51
187
  const StyledChipContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
52
188
  overflow: "hidden",
53
189
  whiteSpace: "nowrap",
54
190
  textOverflow: "ellipsis",
191
+ // Taller than the em box so descenders (g, y) aren't clipped by overflow.
192
+ lineHeight: 1.3,
193
+ minWidth: 0,
194
+ display: "flex",
195
+ alignItems: "center",
55
196
  variants: {
56
197
  loading: {
57
198
  true: {
@@ -73,17 +214,14 @@ const StyledSpinnerBox = designSystemStitches.styled(designSystemPrimitive.Primi
73
214
  zIndex: 1
74
215
  });
75
216
  const StyledChipButton = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
217
+ flexShrink: 0,
76
218
  color: "$icon-secondary",
77
219
  ...designSystemStyles.focus.css({
78
220
  boxShadow: "$focus"
79
221
  })
80
222
  });
81
223
 
82
- const StyledImageSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
83
- paddingInline: "$50"
84
- });
85
-
86
- const ImageSlot = StyledImageSlot;
224
+ const IconSlot = StyledIconSlot;
87
225
 
88
226
  const hasPressEvent = (props) => {
89
227
  if ("onClick" in props && props.onClick != null) return true;
@@ -98,17 +236,24 @@ const Chip = React.forwardRef(
98
236
  onRemove,
99
237
  removeAriaLabel,
100
238
  loading = false,
239
+ size = "medium",
240
+ variant = "default",
241
+ disabled,
101
242
  ...restProps
102
243
  } = props;
103
244
  const pressable = hasPressEvent(restProps);
104
245
  const isLoading = pressable && loading;
246
+ let spinnerSize = "medium";
247
+ if (typeof size === "string" && ["small", "medium"].includes(size)) {
248
+ spinnerSize = "small";
249
+ }
105
250
  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
106
251
  isLoading && /* @__PURE__ */ jsxRuntime.jsx(
107
252
  StyledSpinnerBox,
108
253
  {
109
254
  "aria-hidden": true,
110
255
  "data-testid": process.env.NODE_ENV === "test" ? "chip-spinner" : void 0,
111
- children: /* @__PURE__ */ jsxRuntime.jsx(designSystemSpinner.Spinner, { size: "small" })
256
+ children: /* @__PURE__ */ jsxRuntime.jsx(designSystemSpinner.Spinner, { size: spinnerSize })
112
257
  }
113
258
  ),
114
259
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -123,6 +268,7 @@ const Chip = React.forwardRef(
123
268
  StyledChipButton,
124
269
  {
125
270
  type: "button",
271
+ disabled: disabled === true || void 0,
126
272
  onClick: onRemove,
127
273
  "aria-label": removeAriaLabel,
128
274
  children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, { size: "small" })
@@ -135,6 +281,9 @@ const Chip = React.forwardRef(
135
281
  {
136
282
  type: "button",
137
283
  ...restProps,
284
+ size,
285
+ variant,
286
+ disabled: disabled === true || void 0,
138
287
  ref: forwardRef,
139
288
  "aria-busy": isLoading || void 0,
140
289
  "aria-disabled": isLoading || void 0,
@@ -146,13 +295,16 @@ const Chip = React.forwardRef(
146
295
  StyledChip,
147
296
  {
148
297
  ...restProps,
298
+ size,
299
+ variant,
300
+ disabled,
149
301
  ref: forwardRef,
150
302
  children: content
151
303
  }
152
304
  );
153
305
  }
154
306
  );
155
- Chip.ImageSlot = ImageSlot;
307
+ Chip.IconSlot = IconSlot;
156
308
 
157
309
  exports.Chip = Chip;
158
310
  //# sourceMappingURL=main.js.map
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\nconst chipStyles = {\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}\n\nconst disabledAppearance = {\n backgroundColor: '$chip-background-disabled',\n}\n\nexport const StyledChip = styled(Primitive.div, {\n ...chipStyles,\n variants: {\n disabled: {\n true: disabledAppearance,\n },\n },\n})\n\nexport const StyledPressableChip = styled(BaseButton, {\n ...chipStyles,\n position: 'relative',\n ...focus.css({\n boxShadow: '$focus',\n }),\n // Attribute selector so `disabled` reaches BaseButton / usePress (a stitches\n // `disabled` variant would consume the prop and leave the button enabled).\n '&[disabled]': disabledAppearance,\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})\n\nexport const StyledChipContent = styled(Primitive.div, {\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\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 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 {\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'\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<StyledChipProps, 'ref'> &\n Pick<BaseButtonProps, 'onPress'> &\n RefAttributes<HTMLDivElement | HTMLButtonElement> & {\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 ...restProps\n } = props\n\n const pressable = hasPressEvent(restProps)\n const isLoading = pressable && loading\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='small' />\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 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 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 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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"}
1
+ {"version":3,"file":"main.js","sources":["../src/partials/icon-slot.styled.tsx","../src/chip.styled.tsx","../src/partials/icon-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 StyledIconSlot = 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 StyledIconSlotProps = StrictComponentProps<typeof StyledIconSlot>\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 { StyledIconSlot } from './partials/icon-slot.styled'\n\n// Same offset Button uses so paddingX matches that scale without importing it.\nconst LABEL_OFFSET = 2\n\nconst iconSlotImg = (size: string): CSS => ({\n [`& ${StyledIconSlot} img`]: {\n square: size,\n },\n})\n\nconst chipLayout = {\n borderRadius: '$round',\n display: 'inline-flex',\n alignItems: 'center',\n // Gap, not close-button padding — padding sits inside the focus ring.\n gap: '$100',\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 ...iconSlotImg('$8'),\n },\n large: {\n height: '$10',\n fontSize: '$200',\n paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n ...iconSlotImg('$6'),\n },\n medium: {\n height: '$8',\n fontSize: '$175',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n ...iconSlotImg('$5'),\n },\n small: {\n height: '$6',\n fontSize: '$175',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n ...iconSlotImg('$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 flexShrink: 0,\n color: '$icon-secondary',\n ...focus.css({\n boxShadow: '$focus',\n }),\n})\n\nexport type StyledChipProps = StrictComponentProps<typeof StyledChip>\n","import type { StyledIconSlotProps } from './icon-slot.styled'\nimport { StyledIconSlot } from './icon-slot.styled'\n\nexport interface IconSlotProps extends StyledIconSlotProps {}\n\nexport const IconSlot = StyledIconSlot\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 { IconSlot } from './partials/icon-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 IconSlot: typeof IconSlot\n}\n\nChip.IconSlot = IconSlot\n"],"names":["styled","Primitive","BaseButton","focus","jsxs","Fragment","jsx","Spinner","IconCross"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -7,49 +7,190 @@ import { Primitive } from '@mirohq/design-system-primitive';
7
7
  import { BaseButton } from '@mirohq/design-system-base-button';
8
8
  import { focus } from '@mirohq/design-system-styles';
9
9
 
10
- const chipStyles = {
11
- fontSize: "$150",
12
- lineHeight: 1.3,
13
- padding: "$50 $100",
10
+ const StyledIconSlot = styled(Primitive.span, {
11
+ display: "inline-flex",
12
+ alignItems: "center",
13
+ justifyContent: "center",
14
+ flexShrink: 0,
15
+ verticalAlign: "middle",
16
+ paddingInline: "$50",
17
+ "& img": {
18
+ display: "block",
19
+ square: 16,
20
+ borderRadius: "$round",
21
+ objectFit: "cover"
22
+ }
23
+ });
24
+
25
+ const LABEL_OFFSET = 2;
26
+ const iconSlotImg = (size) => ({
27
+ ["& ".concat(StyledIconSlot, " img")]: {
28
+ square: size
29
+ }
30
+ });
31
+ const chipLayout = {
14
32
  borderRadius: "$round",
15
33
  display: "inline-flex",
16
34
  alignItems: "center",
17
- gap: "$50",
18
- backgroundColor: "$chip-background",
19
- color: "$chip-text",
20
- maxWidth: "100%"
35
+ // Gap, not close-button padding — padding sits inside the focus ring.
36
+ gap: "$100",
37
+ width: "fit-content",
38
+ maxWidth: "100%",
39
+ flexShrink: 0,
40
+ boxSizing: "border-box",
41
+ border: "1px solid transparent",
42
+ lineHeight: 1.3,
43
+ // Chip labels are regular. Pressable uses BaseButton; don't keep Button's
44
+ // semibold from that shell.
45
+ fontWeight: "$regular"
46
+ };
47
+ const chipSizes = {
48
+ "x-large": {
49
+ height: "$12",
50
+ fontSize: "$200",
51
+ paddingX: "calc($200 + ".concat(LABEL_OFFSET, "px)"),
52
+ ...iconSlotImg("$8")
53
+ },
54
+ large: {
55
+ height: "$10",
56
+ fontSize: "$200",
57
+ paddingX: "calc($150 + ".concat(LABEL_OFFSET, "px)"),
58
+ ...iconSlotImg("$6")
59
+ },
60
+ medium: {
61
+ height: "$8",
62
+ fontSize: "$175",
63
+ paddingX: "calc($100 + ".concat(LABEL_OFFSET, "px)"),
64
+ ...iconSlotImg("$5")
65
+ },
66
+ small: {
67
+ height: "$6",
68
+ fontSize: "$175",
69
+ paddingX: "calc($100 + ".concat(LABEL_OFFSET, "px)"),
70
+ ...iconSlotImg("$4")
71
+ }
72
+ };
73
+ const defaultIdle = {
74
+ color: "$chip-text-on-default",
75
+ backgroundColor: "$chip-background-default",
76
+ borderColor: "$chip-border-default"
77
+ };
78
+ const outlineIdle = {
79
+ color: "$chip-text-on-outline",
80
+ backgroundColor: "$transparent",
81
+ borderColor: "$chip-border-outline"
21
82
  };
22
- const disabledAppearance = {
23
- backgroundColor: "$chip-background-disabled"
83
+ const defaultInteractive = {
84
+ ...defaultIdle,
85
+ _hover: {
86
+ color: "$chip-text-on-default",
87
+ backgroundColor: "$chip-background-default-hover",
88
+ borderColor: "$chip-border-default-hover"
89
+ },
90
+ "&[data-pressed]": {
91
+ color: "$chip-text-on-default",
92
+ backgroundColor: "$chip-background-default-pressed",
93
+ borderColor: "$chip-border-default"
94
+ },
95
+ // Attribute selector so `disabled` reaches BaseButton / usePress.
96
+ "&[disabled]": {
97
+ backgroundColor: "$background-disabled",
98
+ color: "$text-on-disabled"
99
+ }
100
+ };
101
+ const outlineInteractive = {
102
+ ...outlineIdle,
103
+ _hover: {
104
+ backgroundColor: "$chip-background-outline-hover",
105
+ borderColor: "$chip-border-outline-hover",
106
+ color: "$chip-text-on-outline"
107
+ },
108
+ "&[data-pressed]": {
109
+ backgroundColor: "$chip-background-outline-pressed",
110
+ borderColor: "$chip-border-outline-pressed",
111
+ color: "$chip-text-on-outline"
112
+ },
113
+ "&[disabled]": {
114
+ backgroundColor: "$transparent",
115
+ borderColor: "$border-disabled",
116
+ color: "$text-disabled"
117
+ }
24
118
  };
25
119
  const StyledChip = styled(Primitive.div, {
26
- ...chipStyles,
120
+ ...chipLayout,
27
121
  variants: {
122
+ variant: {
123
+ default: defaultIdle,
124
+ outline: outlineIdle
125
+ },
28
126
  disabled: {
29
- true: disabledAppearance
127
+ true: {}
128
+ },
129
+ size: chipSizes
130
+ },
131
+ compoundVariants: [
132
+ {
133
+ variant: "default",
134
+ disabled: true,
135
+ css: {
136
+ backgroundColor: "$background-disabled",
137
+ color: "$text-on-disabled",
138
+ "& button": {
139
+ color: "$icon-on-disabled"
140
+ }
141
+ }
142
+ },
143
+ {
144
+ variant: "outline",
145
+ disabled: true,
146
+ css: {
147
+ backgroundColor: "$transparent",
148
+ borderColor: "$border-disabled",
149
+ color: "$text-disabled",
150
+ "& button": {
151
+ color: "$icon-disabled"
152
+ }
153
+ }
30
154
  }
155
+ ],
156
+ defaultVariants: {
157
+ variant: "default",
158
+ size: "medium"
31
159
  }
32
160
  });
33
161
  const StyledPressableChip = styled(BaseButton, {
34
- ...chipStyles,
162
+ ...chipLayout,
35
163
  position: "relative",
36
164
  ...focus.css({
37
165
  boxShadow: "$focus"
38
166
  }),
39
- // Attribute selector so `disabled` reaches BaseButton / usePress (a stitches
40
- // `disabled` variant would consume the prop and leave the button enabled).
41
- "&[disabled]": disabledAppearance,
42
167
  // Loading stays visually idle — only the wait cursor signals it. Don't reuse
43
168
  // the disabled mute; that made loading look broken.
44
169
  '&[aria-busy="true"]': {
45
170
  cursor: "wait",
46
171
  pointerEvents: "none"
172
+ },
173
+ variants: {
174
+ variant: {
175
+ default: defaultInteractive,
176
+ outline: outlineInteractive
177
+ },
178
+ size: chipSizes
179
+ },
180
+ defaultVariants: {
181
+ variant: "default",
182
+ size: "medium"
47
183
  }
48
184
  });
49
185
  const StyledChipContent = styled(Primitive.div, {
50
186
  overflow: "hidden",
51
187
  whiteSpace: "nowrap",
52
188
  textOverflow: "ellipsis",
189
+ // Taller than the em box so descenders (g, y) aren't clipped by overflow.
190
+ lineHeight: 1.3,
191
+ minWidth: 0,
192
+ display: "flex",
193
+ alignItems: "center",
53
194
  variants: {
54
195
  loading: {
55
196
  true: {
@@ -71,17 +212,14 @@ const StyledSpinnerBox = styled(Primitive.div, {
71
212
  zIndex: 1
72
213
  });
73
214
  const StyledChipButton = styled(BaseButton, {
215
+ flexShrink: 0,
74
216
  color: "$icon-secondary",
75
217
  ...focus.css({
76
218
  boxShadow: "$focus"
77
219
  })
78
220
  });
79
221
 
80
- const StyledImageSlot = styled(Primitive.span, {
81
- paddingInline: "$50"
82
- });
83
-
84
- const ImageSlot = StyledImageSlot;
222
+ const IconSlot = StyledIconSlot;
85
223
 
86
224
  const hasPressEvent = (props) => {
87
225
  if ("onClick" in props && props.onClick != null) return true;
@@ -96,17 +234,24 @@ const Chip = React.forwardRef(
96
234
  onRemove,
97
235
  removeAriaLabel,
98
236
  loading = false,
237
+ size = "medium",
238
+ variant = "default",
239
+ disabled,
99
240
  ...restProps
100
241
  } = props;
101
242
  const pressable = hasPressEvent(restProps);
102
243
  const isLoading = pressable && loading;
244
+ let spinnerSize = "medium";
245
+ if (typeof size === "string" && ["small", "medium"].includes(size)) {
246
+ spinnerSize = "small";
247
+ }
103
248
  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
104
249
  isLoading && /* @__PURE__ */ jsx(
105
250
  StyledSpinnerBox,
106
251
  {
107
252
  "aria-hidden": true,
108
253
  "data-testid": process.env.NODE_ENV === "test" ? "chip-spinner" : void 0,
109
- children: /* @__PURE__ */ jsx(Spinner, { size: "small" })
254
+ children: /* @__PURE__ */ jsx(Spinner, { size: spinnerSize })
110
255
  }
111
256
  ),
112
257
  /* @__PURE__ */ jsx(
@@ -121,6 +266,7 @@ const Chip = React.forwardRef(
121
266
  StyledChipButton,
122
267
  {
123
268
  type: "button",
269
+ disabled: disabled === true || void 0,
124
270
  onClick: onRemove,
125
271
  "aria-label": removeAriaLabel,
126
272
  children: /* @__PURE__ */ jsx(IconCross, { size: "small" })
@@ -133,6 +279,9 @@ const Chip = React.forwardRef(
133
279
  {
134
280
  type: "button",
135
281
  ...restProps,
282
+ size,
283
+ variant,
284
+ disabled: disabled === true || void 0,
136
285
  ref: forwardRef,
137
286
  "aria-busy": isLoading || void 0,
138
287
  "aria-disabled": isLoading || void 0,
@@ -144,13 +293,16 @@ const Chip = React.forwardRef(
144
293
  StyledChip,
145
294
  {
146
295
  ...restProps,
296
+ size,
297
+ variant,
298
+ disabled,
147
299
  ref: forwardRef,
148
300
  children: content
149
301
  }
150
302
  );
151
303
  }
152
304
  );
153
- Chip.ImageSlot = ImageSlot;
305
+ Chip.IconSlot = IconSlot;
154
306
 
155
307
  export { Chip };
156
308
  //# sourceMappingURL=module.js.map
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\nconst chipStyles = {\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}\n\nconst disabledAppearance = {\n backgroundColor: '$chip-background-disabled',\n}\n\nexport const StyledChip = styled(Primitive.div, {\n ...chipStyles,\n variants: {\n disabled: {\n true: disabledAppearance,\n },\n },\n})\n\nexport const StyledPressableChip = styled(BaseButton, {\n ...chipStyles,\n position: 'relative',\n ...focus.css({\n boxShadow: '$focus',\n }),\n // Attribute selector so `disabled` reaches BaseButton / usePress (a stitches\n // `disabled` variant would consume the prop and leave the button enabled).\n '&[disabled]': disabledAppearance,\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})\n\nexport const StyledChipContent = styled(Primitive.div, {\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\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 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 {\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'\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<StyledChipProps, 'ref'> &\n Pick<BaseButtonProps, 'onPress'> &\n RefAttributes<HTMLDivElement | HTMLButtonElement> & {\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 ...restProps\n } = props\n\n const pressable = hasPressEvent(restProps)\n const isLoading = pressable && loading\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='small' />\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 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 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 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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"}
1
+ {"version":3,"file":"module.js","sources":["../src/partials/icon-slot.styled.tsx","../src/chip.styled.tsx","../src/partials/icon-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 StyledIconSlot = 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 StyledIconSlotProps = StrictComponentProps<typeof StyledIconSlot>\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 { StyledIconSlot } from './partials/icon-slot.styled'\n\n// Same offset Button uses so paddingX matches that scale without importing it.\nconst LABEL_OFFSET = 2\n\nconst iconSlotImg = (size: string): CSS => ({\n [`& ${StyledIconSlot} img`]: {\n square: size,\n },\n})\n\nconst chipLayout = {\n borderRadius: '$round',\n display: 'inline-flex',\n alignItems: 'center',\n // Gap, not close-button padding — padding sits inside the focus ring.\n gap: '$100',\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 ...iconSlotImg('$8'),\n },\n large: {\n height: '$10',\n fontSize: '$200',\n paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n ...iconSlotImg('$6'),\n },\n medium: {\n height: '$8',\n fontSize: '$175',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n ...iconSlotImg('$5'),\n },\n small: {\n height: '$6',\n fontSize: '$175',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n ...iconSlotImg('$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 flexShrink: 0,\n color: '$icon-secondary',\n ...focus.css({\n boxShadow: '$focus',\n }),\n})\n\nexport type StyledChipProps = StrictComponentProps<typeof StyledChip>\n","import type { StyledIconSlotProps } from './icon-slot.styled'\nimport { StyledIconSlot } from './icon-slot.styled'\n\nexport interface IconSlotProps extends StyledIconSlotProps {}\n\nexport const IconSlot = StyledIconSlot\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 { IconSlot } from './partials/icon-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 IconSlot: typeof IconSlot\n}\n\nChip.IconSlot = IconSlot\n"],"names":[],"mappings":"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"}
package/dist/types.d.ts CHANGED
@@ -26,21 +26,40 @@ type TransformProps<Props, Media> = {
26
26
  )
27
27
  }
28
28
 
29
- declare const StyledChip: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, "disabled"> & TransformProps<{
29
+ declare const StyledChip: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, "disabled" | "size" | "variant"> & TransformProps<{
30
+ variant?: "default" | "outline" | undefined;
30
31
  disabled?: boolean | "true" | undefined;
32
+ size?: "small" | "medium" | "large" | "x-large" | undefined;
31
33
  }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
34
+ variant?: "default" | "outline" | undefined;
32
35
  disabled?: boolean | "true" | undefined;
36
+ size?: "small" | "medium" | "large" | "x-large" | undefined;
33
37
  }, {}>;
34
38
  type StyledChipProps = StrictComponentProps<typeof StyledChip>;
35
39
 
36
- declare const StyledImageSlot: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"span">>>, never> & TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLSpanElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"span">>, {}, {}>;
37
- type StyledImageSlotProps = StrictComponentProps<typeof StyledImageSlot>;
40
+ declare const StyledIconSlot: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"span">>>, never> & TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLSpanElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"span">>, {}, {}>;
41
+ type StyledIconSlotProps = StrictComponentProps<typeof StyledIconSlot>;
38
42
 
39
- interface ImageSlotProps extends StyledImageSlotProps {
43
+ interface IconSlotProps extends StyledIconSlotProps {
40
44
  }
41
- 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">>, {}, {}>;
45
+ declare const IconSlot: 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">>, {}, {}>;
42
46
 
43
- type ChipProps = Omit<StyledChipProps, 'ref'> & Pick<BaseButtonProps, 'onPress'> & RefAttributes<HTMLDivElement | HTMLButtonElement> & {
47
+ type ChipProps = Omit<StyledChipProps, 'ref' | 'size' | 'variant' | 'disabled'> & Pick<BaseButtonProps, 'onPress'> & RefAttributes<HTMLDivElement | HTMLButtonElement> & {
48
+ /**
49
+ * Change the chip size. Same scale as Button (`small`, `medium`, `large`,
50
+ * `x-large`).
51
+ * @default 'medium'
52
+ */
53
+ size?: StyledChipProps['size'];
54
+ /**
55
+ * Change the chip style. `default` is filled; `outline` is bordered.
56
+ * @default 'default'
57
+ */
58
+ variant?: StyledChipProps['variant'];
59
+ /**
60
+ * Disable the chip. When removable, the close control is disabled too.
61
+ */
62
+ disabled?: boolean;
44
63
  /**
45
64
  * Show a button to remove the Chip
46
65
  * @default true
@@ -68,8 +87,8 @@ type ChipProps = Omit<StyledChipProps, 'ref'> & Pick<BaseButtonProps, 'onPress'>
68
87
  });
69
88
  declare const Chip: ForwardRefExoticComponent<ChipProps> & Partials;
70
89
  interface Partials {
71
- ImageSlot: typeof ImageSlot;
90
+ IconSlot: typeof IconSlot;
72
91
  }
73
92
 
74
93
  export { Chip };
75
- export type { ImageSlotProps as ChipImageSlotProps, ChipProps };
94
+ export type { IconSlotProps as ChipIconSlotProps, ChipProps };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-chip",
3
- "version": "1.3.0-filter-chip.0",
3
+ "version": "1.3.0",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -26,12 +26,12 @@
26
26
  "react": "^16.14 || ^17 || ^18 || ^19"
27
27
  },
28
28
  "dependencies": {
29
- "@mirohq/design-system-icons": "^1.46.0",
30
- "@mirohq/design-system-base-button": "^1.2.36",
29
+ "@mirohq/design-system-base-button": "^1.2.38",
30
+ "@mirohq/design-system-stitches": "^3.3.33",
31
+ "@mirohq/design-system-spinner": "^2.2.35",
31
32
  "@mirohq/design-system-primitive": "^2.2.1",
32
- "@mirohq/design-system-stitches": "^3.3.32",
33
- "@mirohq/design-system-spinner": "^2.2.34",
34
- "@mirohq/design-system-styles": "^3.2.32"
33
+ "@mirohq/design-system-icons": "^1.46.2",
34
+ "@mirohq/design-system-styles": "^3.2.33"
35
35
  },
36
36
  "scripts": {
37
37
  "build": "rollup -c ../../../rollup.config.js",