@mirohq/design-system-patterns 1.3.15 → 1.4.0-filter-chip.0

package/dist/main.js

@@ -7,6 +7,11 @@ var designSystemBox = require('@mirohq/design-system-box');
 var designSystemButton = require('@mirohq/design-system-button');
 var designSystemTypography = require('@mirohq/design-system-typography');
 var designSystemExperiments = require('@mirohq/design-system-experiments');
+var designSystemChip = require('@mirohq/design-system-chip');
+var designSystemIcons = require('@mirohq/design-system-icons');
+var designSystemPrimitive = require('@mirohq/design-system-primitive');
+var designSystemUtils = require('@mirohq/design-system-utils');
+var designSystemBaseIcon = require('@mirohq/design-system-base-icon');
 
 const Container = designSystemStitches.styled(designSystemBox.Box, {
   background: "transparent",
@@ -59,5 +64,129 @@ const PatternEmptyState = React.forwardRef(({ heading, description, illustration
   ] });
 });
 
+const activeShell = {
+  // Chip is filled; drop the fill so an applied filter reads as an
+  // outline (border + text carry the state).
+  backgroundColor: "transparent",
+  borderColor: "$border-primary",
+  color: "$text-primary"
+};
+const StyledFilterChip = designSystemStitches.styled(designSystemChip.Chip, {
+  position: "relative",
+  overflow: "visible",
+  boxSizing: "border-box",
+  borderStyle: "solid",
+  borderWidth: "$sm",
+  borderColor: "transparent",
+  marginTop: "$100",
+  // Chip truncates this box; open it so the floating label can poke out.
+  "& > [data-chip-content]": {
+    overflow: "visible"
+  },
+  variants: {
+    active: {
+      true: {
+        "&&": activeShell
+      }
+    }
+  }
+});
+const StyledFloatingLabel = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
+  position: "absolute",
+  top: "-$100",
+  left: "$100",
+  paddingInline: "2px",
+  fontSize: "$125",
+  fontWeight: "$regular",
+  lineHeight: 1.5,
+  color: "$text-primary",
+  // Mask the stroke with the surface the chip sits on so the name reads as a
+  // notch in the outline. Consumers can set `--filter-surface` on any ancestor
+  // (e.g. a gray filter bar) so the notch blends with it; otherwise it falls
+  // back to the theme surface (white in light, dark surface in dark mode).
+  backgroundColor: "var(--filter-surface, var(--colors-background-surface))",
+  borderRadius: "$round",
+  pointerEvents: "none",
+  whiteSpace: "nowrap"
+});
+const StyledLabel = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+  paddingInline: "2px",
+  lineHeight: 1.5
+});
+
+const FilterChipContext = React.createContext({
+  activated: false,
+  value: void 0
+});
+const FilterChipProvider = ({
+  children,
+  activated,
+  value
+}) => {
+  const context = React.useMemo(() => ({ activated, value }), [activated, value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(FilterChipContext.Provider, { value: context, children });
+};
+const useFilterChipContext = () => React.useContext(FilterChipContext);
+
+const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
+  const formattedChildren = designSystemUtils.addPropsToChildren(
+    children,
+    (child) => designSystemBaseIcon.isIconComponent(child),
+    {
+      size: "small",
+      weight: "thin"
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystemChip.Chip.ImageSlot, { ...restProps, ref: forwardRef, children: formattedChildren });
+});
+IconSlot.displayName = "FilterChip.IconSlot";
+
+const Label = React.forwardRef(({ children, ...restProps }, forwardRef) => {
+  const { activated, value } = useFilterChipContext();
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    activated && /* @__PURE__ */ jsxRuntime.jsx(StyledFloatingLabel, { children }),
+    /* @__PURE__ */ jsxRuntime.jsx(StyledLabel, { ...restProps, ref: forwardRef, children: activated && value != null ? value : children })
+  ] });
+});
+Label.displayName = "FilterChip.Label";
+
+const noopPress = () => void 0;
+const FilterChip = React.forwardRef(
+  ({
+    value,
+    active,
+    loading = false,
+    disabled = false,
+    onPress,
+    children,
+    ...restProps
+  }, forwardRef) => {
+    const isActive = active != null ? active : value !== void 0 && value !== null && value !== "";
+    return /* @__PURE__ */ jsxRuntime.jsx(FilterChipProvider, { activated: isActive, value, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      StyledFilterChip,
+      {
+        ...restProps,
+        ref: forwardRef,
+        removable: false,
+        loading,
+        disabled,
+        active: isActive,
+        onPress: onPress != null ? onPress : noopPress,
+        children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(designSystemChip.Chip.ImageSlot, { "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronDown, { size: "small" }) })
+        ]
+      }
+    ) });
+  }
+);
+FilterChip.IconSlot = IconSlot;
+FilterChip.Label = Label;
+FilterChip.displayName = "FilterChip";
+
+exports.FilterChip = FilterChip;
 exports.PatternEmptyState = PatternEmptyState;
 //# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":["../src/empty-state/empty-state.tsx"],"sourcesContent":["import React from 'react'\nimport type { ReactNode, ElementRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Box } from '@mirohq/design-system-box'\nimport { Button } from '@mirohq/design-system-button'\nimport type { ButtonProps } from '@mirohq/design-system-button'\nimport type { BoxProps } from '@mirohq/design-system-box'\nimport { Heading } from '@mirohq/design-system-typography'\nimport { useCanvas26 } from '@mirohq/design-system-experiments'\n\n// Types\n// -----------------------------------------------------------------------------\nexport interface PatternEmptyStateProps extends Omit<BoxProps, 'children'> {\n  heading?: ReactNode\n  description?: ReactNode\n  illustration?: string\n  actions?: {\n    primary: ActionButton & {\n      variant?: 'primary' | 'secondary'\n    }\n    secondary?: ActionButton\n  }\n}\n\ntype BaseActionButtonProps = Omit<ButtonProps, 'children'> & {\n  label: ReactNode\n}\n\ntype ActionButton = Omit<BaseActionButtonProps, 'variant'>\n\n// Styled\n// -----------------------------------------------------------------------------\nconst Container = styled(Box, {\n  background: 'transparent',\n  padding: '$500',\n  display: 'flex',\n  flexDirection: 'column',\n  minWidth: '304px',\n  maxWidth: '480px',\n  textAlign: 'center',\n  alignItems: 'center',\n})\n\nconst Illustration = styled('img', {\n  width: '72px',\n  minHeight: '72px',\n  display: 'block',\n  marginBottom: '$150',\n})\n\nconst Description = styled(Box, {\n  color: '$text-neutrals-subtle',\n  marginTop: '$100',\n  maxWidth: '304px',\n})\n\nconst Actions = styled(Box, {\n  marginTop: '$150',\n  paddingY: '$200',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '$100',\n  alignItems: 'center',\n})\n\nconst BaseActionButton = React.forwardRef<\n  ElementRef<typeof Button>,\n  BaseActionButtonProps\n>(({ label, ...actionProps }, ref) => (\n  <Button ref={ref} {...actionProps}>\n    {label}\n  </Button>\n))\n\n// Component\n// -----------------------------------------------------------------------------\nexport const PatternEmptyState = React.forwardRef<\n  ElementRef<typeof Box>,\n  PatternEmptyStateProps\n>(({ heading, description, illustration, actions, ...restProps }, ref) => {\n  const [isCanvas26] = useCanvas26()\n\n  return (\n    <Container ref={ref} {...restProps}>\n      {illustration != null && !isCanvas26 && (\n        <Illustration src={illustration} aria-hidden alt='' />\n      )}\n      {heading != null && (\n        <Heading\n          ref={ref}\n          level={2}\n          {...(isCanvas26\n            ? { css: { fontFamily: '$display', fontSize: '$350' } }\n            : { styledAs: 'h3' })}\n        >\n          {heading}\n        </Heading>\n      )}\n      {description != null && (\n        <Description css={{ color: '$text-neutrals-subtle' }}>\n          {description}\n        </Description>\n      )}\n      {actions != null && (\n        <Actions>\n          <BaseActionButton variant='primary' {...actions.primary} />\n\n          {actions.secondary != null && (\n            <BaseActionButton {...actions.secondary} variant='ghost' />\n          )}\n        </Actions>\n      )}\n    </Container>\n  )\n})\n"],"names":["styled","Box","Button","useCanvas26","jsxs","jsx","Heading"],"mappings":";;;;;;;;;;AAgCA,MAAM,SAAA,GAAYA,4BAAOC,mBAAA,EAAK;AAAA,EAC5B,UAAA,EAAY,aAAA;AAAA,EACZ,OAAA,EAAS,MAAA;AAAA,EACT,OAAA,EAAS,MAAA;AAAA,EACT,aAAA,EAAe,QAAA;AAAA,EACf,QAAA,EAAU,OAAA;AAAA,EACV,QAAA,EAAU,OAAA;AAAA,EACV,SAAA,EAAW,QAAA;AAAA,EACX,UAAA,EAAY;AACd,CAAC,CAAA;AAED,MAAM,YAAA,GAAeD,4BAAO,KAAA,EAAO;AAAA,EACjC,KAAA,EAAO,MAAA;AAAA,EACP,SAAA,EAAW,MAAA;AAAA,EACX,OAAA,EAAS,OAAA;AAAA,EACT,YAAA,EAAc;AAChB,CAAC,CAAA;AAED,MAAM,WAAA,GAAcA,4BAAOC,mBAAA,EAAK;AAAA,EAC9B,KAAA,EAAO,uBAAA;AAAA,EACP,SAAA,EAAW,MAAA;AAAA,EACX,QAAA,EAAU;AACZ,CAAC,CAAA;AAED,MAAM,OAAA,GAAUD,4BAAOC,mBAAA,EAAK;AAAA,EAC1B,SAAA,EAAW,MAAA;AAAA,EACX,QAAA,EAAU,MAAA;AAAA,EACV,OAAA,EAAS,MAAA;AAAA,EACT,aAAA,EAAe,QAAA;AAAA,EACf,GAAA,EAAK,MAAA;AAAA,EACL,UAAA,EAAY;AACd,CAAC,CAAA;AAED,MAAM,mBAAmB,KAAA,CAAM,UAAA,CAG7B,CAAC,EAAE,OAAO,GAAG,WAAA,EAAY,EAAG,GAAA,oCAC3BC,yBAAA,EAAA,EAAO,GAAA,EAAW,GAAG,WAAA,EACnB,iBACH,CACD,CAAA;AAIM,MAAM,iBAAA,GAAoB,KAAA,CAAM,UAAA,CAGrC,CAAC,EAAE,OAAA,EAAS,WAAA,EAAa,YAAA,EAAc,OAAA,EAAS,GAAG,SAAA,EAAU,EAAG,GAAA,KAAQ;AACxE,EAAA,MAAM,CAAC,UAAU,CAAA,GAAIC,mCAAA,EAAY;AAEjC,EAAA,uBACEC,eAAA,CAAC,SAAA,EAAA,EAAU,GAAA,EAAW,GAAG,SAAA,EACtB,QAAA,EAAA;AAAA,IAAA,YAAA,IAAgB,IAAA,IAAQ,CAAC,UAAA,oBACxBC,cAAA,CAAC,YAAA,EAAA,EAAa,KAAK,YAAA,EAAc,aAAA,EAAW,IAAA,EAAC,GAAA,EAAI,EAAA,EAAG,CAAA;AAAA,IAErD,WAAW,IAAA,oBACVA,cAAA;AAAA,MAACC,8BAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,KAAA,EAAO,CAAA;AAAA,QACN,GAAI,UAAA,GACD,EAAE,GAAA,EAAK,EAAE,UAAA,EAAY,UAAA,EAAY,QAAA,EAAU,MAAA,EAAO,EAAE,GACpD,EAAE,UAAU,IAAA,EAAK;AAAA,QAEpB,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,IAED,WAAA,IAAe,wBACdD,cAAA,CAAC,WAAA,EAAA,EAAY,KAAK,EAAE,KAAA,EAAO,uBAAA,EAAwB,EAChD,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,IAED,OAAA,IAAW,IAAA,oBACVD,eAAA,CAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,gBAAA,EAAA,EAAiB,OAAA,EAAQ,SAAA,EAAW,GAAG,QAAQ,OAAA,EAAS,CAAA;AAAA,MAExD,OAAA,CAAQ,aAAa,IAAA,oBACpBA,cAAA,CAAC,oBAAkB,GAAG,OAAA,CAAQ,SAAA,EAAW,OAAA,EAAQ,OAAA,EAAQ;AAAA,KAAA,EAE7D;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"main.js","sources":["../src/empty-state/empty-state.tsx","../src/filter-chip/filter-chip.styled.tsx","../src/filter-chip/hooks/use-filter-chip-context.tsx","../src/filter-chip/partials/icon-slot.tsx","../src/filter-chip/partials/label.tsx","../src/filter-chip/filter-chip.tsx"],"sourcesContent":["import React from 'react'\nimport type { ReactNode, ElementRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Box } from '@mirohq/design-system-box'\nimport { Button } from '@mirohq/design-system-button'\nimport type { ButtonProps } from '@mirohq/design-system-button'\nimport type { BoxProps } from '@mirohq/design-system-box'\nimport { Heading } from '@mirohq/design-system-typography'\nimport { useCanvas26 } from '@mirohq/design-system-experiments'\n\n// Types\n// -----------------------------------------------------------------------------\nexport interface PatternEmptyStateProps extends Omit<BoxProps, 'children'> {\n  heading?: ReactNode\n  description?: ReactNode\n  illustration?: string\n  actions?: {\n    primary: ActionButton & {\n      variant?: 'primary' | 'secondary'\n    }\n    secondary?: ActionButton\n  }\n}\n\ntype BaseActionButtonProps = Omit<ButtonProps, 'children'> & {\n  label: ReactNode\n}\n\ntype ActionButton = Omit<BaseActionButtonProps, 'variant'>\n\n// Styled\n// -----------------------------------------------------------------------------\nconst Container = styled(Box, {\n  background: 'transparent',\n  padding: '$500',\n  display: 'flex',\n  flexDirection: 'column',\n  minWidth: '304px',\n  maxWidth: '480px',\n  textAlign: 'center',\n  alignItems: 'center',\n})\n\nconst Illustration = styled('img', {\n  width: '72px',\n  minHeight: '72px',\n  display: 'block',\n  marginBottom: '$150',\n})\n\nconst Description = styled(Box, {\n  color: '$text-neutrals-subtle',\n  marginTop: '$100',\n  maxWidth: '304px',\n})\n\nconst Actions = styled(Box, {\n  marginTop: '$150',\n  paddingY: '$200',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '$100',\n  alignItems: 'center',\n})\n\nconst BaseActionButton = React.forwardRef<\n  ElementRef<typeof Button>,\n  BaseActionButtonProps\n>(({ label, ...actionProps }, ref) => (\n  <Button ref={ref} {...actionProps}>\n    {label}\n  </Button>\n))\n\n// Component\n// -----------------------------------------------------------------------------\nexport const PatternEmptyState = React.forwardRef<\n  ElementRef<typeof Box>,\n  PatternEmptyStateProps\n>(({ heading, description, illustration, actions, ...restProps }, ref) => {\n  const [isCanvas26] = useCanvas26()\n\n  return (\n    <Container ref={ref} {...restProps}>\n      {illustration != null && !isCanvas26 && (\n        <Illustration src={illustration} aria-hidden alt='' />\n      )}\n      {heading != null && (\n        <Heading\n          ref={ref}\n          level={2}\n          {...(isCanvas26\n            ? { css: { fontFamily: '$display', fontSize: '$350' } }\n            : { styledAs: 'h3' })}\n        >\n          {heading}\n        </Heading>\n      )}\n      {description != null && (\n        <Description css={{ color: '$text-neutrals-subtle' }}>\n          {description}\n        </Description>\n      )}\n      {actions != null && (\n        <Actions>\n          <BaseActionButton variant='primary' {...actions.primary} />\n\n          {actions.secondary != null && (\n            <BaseActionButton {...actions.secondary} variant='ghost' />\n          )}\n        </Actions>\n      )}\n    </Container>\n  )\n})\n","import { Chip } from '@mirohq/design-system-chip'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nconst activeShell = {\n  // Chip is filled; drop the fill so an applied filter reads as an\n  // outline (border + text carry the state).\n  backgroundColor: 'transparent',\n  borderColor: '$border-primary',\n  color: '$text-primary',\n}\n\nexport const StyledFilterChip = styled(Chip, {\n  position: 'relative',\n  overflow: 'visible',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: '$sm',\n  borderColor: 'transparent',\n  marginTop: '$100',\n  // Chip truncates this box; open it so the floating label can poke out.\n  '& > [data-chip-content]': {\n    overflow: 'visible',\n  },\n  variants: {\n    active: {\n      true: {\n        '&&': activeShell,\n      },\n    },\n  },\n})\n\nexport const StyledFloatingLabel = styled(Primitive.span, {\n  position: 'absolute',\n  top: '-$100',\n  left: '$100',\n  paddingInline: '2px',\n  fontSize: '$125',\n  fontWeight: '$regular',\n  lineHeight: 1.5,\n  color: '$text-primary',\n  // Mask the stroke with the surface the chip sits on so the name reads as a\n  // notch in the outline. Consumers can set `--filter-surface` on any ancestor\n  // (e.g. a gray filter bar) so the notch blends with it; otherwise it falls\n  // back to the theme surface (white in light, dark surface in dark mode).\n  backgroundColor: 'var(--filter-surface, var(--colors-background-surface))',\n  borderRadius: '$round',\n  pointerEvents: 'none',\n  whiteSpace: 'nowrap',\n})\n\nexport const StyledLabel = styled(Primitive.span, {\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  textOverflow: 'ellipsis',\n  paddingInline: '2px',\n  lineHeight: 1.5,\n})\n\nexport type StyledLabelProps = StrictComponentProps<typeof StyledLabel>\n","import { createContext, useContext, useMemo } from 'react'\nimport type { ReactNode } from 'react'\n\ninterface FilterChipContextProps {\n  activated: boolean\n  value: ReactNode\n}\n\nexport interface FilterChipProviderProps extends FilterChipContextProps {\n  children: ReactNode\n}\n\nconst FilterChipContext = createContext<FilterChipContextProps>({\n  activated: false,\n  value: undefined,\n})\n\nexport const FilterChipProvider = ({\n  children,\n  activated,\n  value,\n}: FilterChipProviderProps): JSX.Element => {\n  const context = useMemo(() => ({ activated, value }), [activated, value])\n\n  return (\n    <FilterChipContext.Provider value={context}>\n      {children}\n    </FilterChipContext.Provider>\n  )\n}\n\nexport const useFilterChipContext = (): FilterChipContextProps =>\n  useContext(FilterChipContext)\n","import type { ElementRef, ReactNode } from 'react'\nimport React from 'react'\nimport { Chip } from '@mirohq/design-system-chip'\nimport type { ChipImageSlotProps } from '@mirohq/design-system-chip'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport type { IconReactElement } from '@mirohq/design-system-base-icon'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\n\nexport interface IconSlotProps extends Omit<ChipImageSlotProps, 'children'> {\n  /**\n   * The leading icon.\n   */\n  children: ReactNode\n}\n\nexport const IconSlot = React.forwardRef<\n  ElementRef<typeof Chip.ImageSlot>,\n  IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n  const formattedChildren = addPropsToChildren(\n    children,\n    child => isIconComponent(child as IconReactElement),\n    {\n      size: 'small',\n      weight: 'thin',\n    }\n  )\n\n  return (\n    <Chip.ImageSlot {...restProps} ref={forwardRef}>\n      {formattedChildren}\n    </Chip.ImageSlot>\n  )\n})\n\nIconSlot.displayName = 'FilterChip.IconSlot'\n","import type { ElementRef, ReactNode } from 'react'\nimport React from 'react'\n\nimport { StyledFloatingLabel, StyledLabel } from '../filter-chip.styled'\nimport type { StyledLabelProps } from '../filter-chip.styled'\nimport { useFilterChipContext } from '../hooks/use-filter-chip-context'\n\nexport interface LabelProps extends Omit<StyledLabelProps, 'children'> {\n  /**\n   * The filter's name, e.g. \"Board owner\".\n   */\n  children: ReactNode\n}\n\n/**\n * The filter's name. Shown as the chip's text when idle; once the filter is\n * activated it floats above the `value` summary, which takes its place in the\n * body.\n */\nexport const Label = React.forwardRef<\n  ElementRef<typeof StyledLabel>,\n  LabelProps\n>(({ children, ...restProps }, forwardRef) => {\n  const { activated, value } = useFilterChipContext()\n\n  return (\n    <>\n      {activated && <StyledFloatingLabel>{children}</StyledFloatingLabel>}\n      <StyledLabel {...restProps} ref={forwardRef}>\n        {activated && value != null ? value : children}\n      </StyledLabel>\n    </>\n  )\n})\n\nLabel.displayName = 'FilterChip.Label'\n","import React from 'react'\nimport type {\n  ElementRef,\n  ForwardRefExoticComponent,\n  ReactNode,\n  RefAttributes,\n} from 'react'\nimport { Chip } from '@mirohq/design-system-chip'\nimport type { ChipProps } from '@mirohq/design-system-chip'\nimport { IconChevronDown } from '@mirohq/design-system-icons'\n\nimport { StyledFilterChip } from './filter-chip.styled'\nimport { FilterChipProvider } from './hooks/use-filter-chip-context'\nimport { IconSlot } from './partials/icon-slot'\nimport { Label } from './partials/label'\n\n// Always-on press handler so Chip renders as a BaseButton even when the\n// consumer hasn't passed onPress (e.g. Combobox.Trigger asChild supplies it).\nconst noopPress = (): void => undefined\n\nexport type FilterChipProps = Omit<\n  ChipProps,\n  'removable' | 'onRemove' | 'removeAriaLabel' | 'children' | 'value' | 'ref'\n> &\n  RefAttributes<HTMLButtonElement> & {\n    /**\n     * The chip's anatomy: a `FilterChip.Label` with the filter's name, plus an\n     * optional leading `FilterChip.IconSlot`.\n     */\n    children: ReactNode\n\n    /**\n     * A short summary of the current selection, e.g. \"Active +2\". When present\n     * (or when `active` is set) the name floats above this summary.\n     */\n    value?: ReactNode\n\n    /**\n     * Force the active state. Defaults to whether `value` is set.\n     */\n    active?: boolean\n  }\n\n/**\n * FilterChip is a Chip-based trigger for filters. The filter's name goes in a\n * `FilterChip.Label`, optionally alongside a `FilterChip.IconSlot`. It shows\n * the name when idle, and floats it above a `value` summary once active,\n * with a trailing chevron.\n *\n * It renders a single `<button>` (a pressable Chip) with no overlay of its own,\n * so it is meant to drive a `Combobox` (or any overlay) via\n * `Combobox.Trigger asChild`. `loading` is Chip's loading state.\n *\n * @experimental Beta — the API may still change while teams adopt it.\n */\nexport const FilterChip = React.forwardRef<\n  ElementRef<'button'>,\n  FilterChipProps\n>(\n  (\n    {\n      value,\n      active,\n      loading = false,\n      disabled = false,\n      onPress,\n      children,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const isActive =\n      active ?? (value !== undefined && value !== null && value !== '')\n\n    return (\n      <FilterChipProvider activated={isActive} value={value}>\n        <StyledFilterChip\n          {...restProps}\n          ref={forwardRef as React.Ref<HTMLDivElement | HTMLButtonElement>}\n          removable={false}\n          loading={loading}\n          disabled={disabled}\n          active={isActive}\n          onPress={onPress ?? noopPress}\n        >\n          {children}\n\n          <Chip.ImageSlot aria-hidden>\n            <IconChevronDown size='small' />\n          </Chip.ImageSlot>\n        </StyledFilterChip>\n      </FilterChipProvider>\n    )\n  }\n) as ForwardRefExoticComponent<FilterChipProps> & Partials\n\nexport interface Partials {\n  IconSlot: typeof IconSlot\n  Label: typeof Label\n}\n\nFilterChip.IconSlot = IconSlot\nFilterChip.Label = Label\nFilterChip.displayName = 'FilterChip'\n"],"names":["styled","Box","Button","useCanvas26","jsxs","jsx","Heading","Chip","Primitive","createContext","useMemo","useContext","addPropsToChildren","isIconComponent","Fragment","IconChevronDown"],"mappings":"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"}

package/dist/module.js

@@ -1,10 +1,15 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { createContext, useContext, useMemo } from 'react';
 import { styled } from '@mirohq/design-system-stitches';
 import { Box } from '@mirohq/design-system-box';
 import { Button } from '@mirohq/design-system-button';
 import { Heading } from '@mirohq/design-system-typography';
 import { useCanvas26 } from '@mirohq/design-system-experiments';
+import { Chip } from '@mirohq/design-system-chip';
+import { IconChevronDown } from '@mirohq/design-system-icons';
+import { Primitive } from '@mirohq/design-system-primitive';
+import { addPropsToChildren } from '@mirohq/design-system-utils';
+import { isIconComponent } from '@mirohq/design-system-base-icon';
 
 const Container = styled(Box, {
   background: "transparent",
@@ -57,5 +62,128 @@ const PatternEmptyState = React.forwardRef(({ heading, description, illustration
   ] });
 });
 
-export { PatternEmptyState };
+const activeShell = {
+  // Chip is filled; drop the fill so an applied filter reads as an
+  // outline (border + text carry the state).
+  backgroundColor: "transparent",
+  borderColor: "$border-primary",
+  color: "$text-primary"
+};
+const StyledFilterChip = styled(Chip, {
+  position: "relative",
+  overflow: "visible",
+  boxSizing: "border-box",
+  borderStyle: "solid",
+  borderWidth: "$sm",
+  borderColor: "transparent",
+  marginTop: "$100",
+  // Chip truncates this box; open it so the floating label can poke out.
+  "& > [data-chip-content]": {
+    overflow: "visible"
+  },
+  variants: {
+    active: {
+      true: {
+        "&&": activeShell
+      }
+    }
+  }
+});
+const StyledFloatingLabel = styled(Primitive.span, {
+  position: "absolute",
+  top: "-$100",
+  left: "$100",
+  paddingInline: "2px",
+  fontSize: "$125",
+  fontWeight: "$regular",
+  lineHeight: 1.5,
+  color: "$text-primary",
+  // Mask the stroke with the surface the chip sits on so the name reads as a
+  // notch in the outline. Consumers can set `--filter-surface` on any ancestor
+  // (e.g. a gray filter bar) so the notch blends with it; otherwise it falls
+  // back to the theme surface (white in light, dark surface in dark mode).
+  backgroundColor: "var(--filter-surface, var(--colors-background-surface))",
+  borderRadius: "$round",
+  pointerEvents: "none",
+  whiteSpace: "nowrap"
+});
+const StyledLabel = styled(Primitive.span, {
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+  paddingInline: "2px",
+  lineHeight: 1.5
+});
+
+const FilterChipContext = createContext({
+  activated: false,
+  value: void 0
+});
+const FilterChipProvider = ({
+  children,
+  activated,
+  value
+}) => {
+  const context = useMemo(() => ({ activated, value }), [activated, value]);
+  return /* @__PURE__ */ jsx(FilterChipContext.Provider, { value: context, children });
+};
+const useFilterChipContext = () => useContext(FilterChipContext);
+
+const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
+  const formattedChildren = addPropsToChildren(
+    children,
+    (child) => isIconComponent(child),
+    {
+      size: "small",
+      weight: "thin"
+    }
+  );
+  return /* @__PURE__ */ jsx(Chip.ImageSlot, { ...restProps, ref: forwardRef, children: formattedChildren });
+});
+IconSlot.displayName = "FilterChip.IconSlot";
+
+const Label = React.forwardRef(({ children, ...restProps }, forwardRef) => {
+  const { activated, value } = useFilterChipContext();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    activated && /* @__PURE__ */ jsx(StyledFloatingLabel, { children }),
+    /* @__PURE__ */ jsx(StyledLabel, { ...restProps, ref: forwardRef, children: activated && value != null ? value : children })
+  ] });
+});
+Label.displayName = "FilterChip.Label";
+
+const noopPress = () => void 0;
+const FilterChip = React.forwardRef(
+  ({
+    value,
+    active,
+    loading = false,
+    disabled = false,
+    onPress,
+    children,
+    ...restProps
+  }, forwardRef) => {
+    const isActive = active != null ? active : value !== void 0 && value !== null && value !== "";
+    return /* @__PURE__ */ jsx(FilterChipProvider, { activated: isActive, value, children: /* @__PURE__ */ jsxs(
+      StyledFilterChip,
+      {
+        ...restProps,
+        ref: forwardRef,
+        removable: false,
+        loading,
+        disabled,
+        active: isActive,
+        onPress: onPress != null ? onPress : noopPress,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(Chip.ImageSlot, { "aria-hidden": true, children: /* @__PURE__ */ jsx(IconChevronDown, { size: "small" }) })
+        ]
+      }
+    ) });
+  }
+);
+FilterChip.IconSlot = IconSlot;
+FilterChip.Label = Label;
+FilterChip.displayName = "FilterChip";
+
+export { FilterChip, PatternEmptyState };
 //# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../src/empty-state/empty-state.tsx"],"sourcesContent":["import React from 'react'\nimport type { ReactNode, ElementRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Box } from '@mirohq/design-system-box'\nimport { Button } from '@mirohq/design-system-button'\nimport type { ButtonProps } from '@mirohq/design-system-button'\nimport type { BoxProps } from '@mirohq/design-system-box'\nimport { Heading } from '@mirohq/design-system-typography'\nimport { useCanvas26 } from '@mirohq/design-system-experiments'\n\n// Types\n// -----------------------------------------------------------------------------\nexport interface PatternEmptyStateProps extends Omit<BoxProps, 'children'> {\n  heading?: ReactNode\n  description?: ReactNode\n  illustration?: string\n  actions?: {\n    primary: ActionButton & {\n      variant?: 'primary' | 'secondary'\n    }\n    secondary?: ActionButton\n  }\n}\n\ntype BaseActionButtonProps = Omit<ButtonProps, 'children'> & {\n  label: ReactNode\n}\n\ntype ActionButton = Omit<BaseActionButtonProps, 'variant'>\n\n// Styled\n// -----------------------------------------------------------------------------\nconst Container = styled(Box, {\n  background: 'transparent',\n  padding: '$500',\n  display: 'flex',\n  flexDirection: 'column',\n  minWidth: '304px',\n  maxWidth: '480px',\n  textAlign: 'center',\n  alignItems: 'center',\n})\n\nconst Illustration = styled('img', {\n  width: '72px',\n  minHeight: '72px',\n  display: 'block',\n  marginBottom: '$150',\n})\n\nconst Description = styled(Box, {\n  color: '$text-neutrals-subtle',\n  marginTop: '$100',\n  maxWidth: '304px',\n})\n\nconst Actions = styled(Box, {\n  marginTop: '$150',\n  paddingY: '$200',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '$100',\n  alignItems: 'center',\n})\n\nconst BaseActionButton = React.forwardRef<\n  ElementRef<typeof Button>,\n  BaseActionButtonProps\n>(({ label, ...actionProps }, ref) => (\n  <Button ref={ref} {...actionProps}>\n    {label}\n  </Button>\n))\n\n// Component\n// -----------------------------------------------------------------------------\nexport const PatternEmptyState = React.forwardRef<\n  ElementRef<typeof Box>,\n  PatternEmptyStateProps\n>(({ heading, description, illustration, actions, ...restProps }, ref) => {\n  const [isCanvas26] = useCanvas26()\n\n  return (\n    <Container ref={ref} {...restProps}>\n      {illustration != null && !isCanvas26 && (\n        <Illustration src={illustration} aria-hidden alt='' />\n      )}\n      {heading != null && (\n        <Heading\n          ref={ref}\n          level={2}\n          {...(isCanvas26\n            ? { css: { fontFamily: '$display', fontSize: '$350' } }\n            : { styledAs: 'h3' })}\n        >\n          {heading}\n        </Heading>\n      )}\n      {description != null && (\n        <Description css={{ color: '$text-neutrals-subtle' }}>\n          {description}\n        </Description>\n      )}\n      {actions != null && (\n        <Actions>\n          <BaseActionButton variant='primary' {...actions.primary} />\n\n          {actions.secondary != null && (\n            <BaseActionButton {...actions.secondary} variant='ghost' />\n          )}\n        </Actions>\n      )}\n    </Container>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;AAgCA,MAAM,SAAA,GAAY,OAAO,GAAA,EAAK;AAAA,EAC5B,UAAA,EAAY,aAAA;AAAA,EACZ,OAAA,EAAS,MAAA;AAAA,EACT,OAAA,EAAS,MAAA;AAAA,EACT,aAAA,EAAe,QAAA;AAAA,EACf,QAAA,EAAU,OAAA;AAAA,EACV,QAAA,EAAU,OAAA;AAAA,EACV,SAAA,EAAW,QAAA;AAAA,EACX,UAAA,EAAY;AACd,CAAC,CAAA;AAED,MAAM,YAAA,GAAe,OAAO,KAAA,EAAO;AAAA,EACjC,KAAA,EAAO,MAAA;AAAA,EACP,SAAA,EAAW,MAAA;AAAA,EACX,OAAA,EAAS,OAAA;AAAA,EACT,YAAA,EAAc;AAChB,CAAC,CAAA;AAED,MAAM,WAAA,GAAc,OAAO,GAAA,EAAK;AAAA,EAC9B,KAAA,EAAO,uBAAA;AAAA,EACP,SAAA,EAAW,MAAA;AAAA,EACX,QAAA,EAAU;AACZ,CAAC,CAAA;AAED,MAAM,OAAA,GAAU,OAAO,GAAA,EAAK;AAAA,EAC1B,SAAA,EAAW,MAAA;AAAA,EACX,QAAA,EAAU,MAAA;AAAA,EACV,OAAA,EAAS,MAAA;AAAA,EACT,aAAA,EAAe,QAAA;AAAA,EACf,GAAA,EAAK,MAAA;AAAA,EACL,UAAA,EAAY;AACd,CAAC,CAAA;AAED,MAAM,mBAAmB,KAAA,CAAM,UAAA,CAG7B,CAAC,EAAE,OAAO,GAAG,WAAA,EAAY,EAAG,GAAA,yBAC3B,MAAA,EAAA,EAAO,GAAA,EAAW,GAAG,WAAA,EACnB,iBACH,CACD,CAAA;AAIM,MAAM,iBAAA,GAAoB,KAAA,CAAM,UAAA,CAGrC,CAAC,EAAE,OAAA,EAAS,WAAA,EAAa,YAAA,EAAc,OAAA,EAAS,GAAG,SAAA,EAAU,EAAG,GAAA,KAAQ;AACxE,EAAA,MAAM,CAAC,UAAU,CAAA,GAAI,WAAA,EAAY;AAEjC,EAAA,uBACE,IAAA,CAAC,SAAA,EAAA,EAAU,GAAA,EAAW,GAAG,SAAA,EACtB,QAAA,EAAA;AAAA,IAAA,YAAA,IAAgB,IAAA,IAAQ,CAAC,UAAA,oBACxB,GAAA,CAAC,YAAA,EAAA,EAAa,KAAK,YAAA,EAAc,aAAA,EAAW,IAAA,EAAC,GAAA,EAAI,EAAA,EAAG,CAAA;AAAA,IAErD,WAAW,IAAA,oBACV,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,KAAA,EAAO,CAAA;AAAA,QACN,GAAI,UAAA,GACD,EAAE,GAAA,EAAK,EAAE,UAAA,EAAY,UAAA,EAAY,QAAA,EAAU,MAAA,EAAO,EAAE,GACpD,EAAE,UAAU,IAAA,EAAK;AAAA,QAEpB,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,IAED,WAAA,IAAe,wBACd,GAAA,CAAC,WAAA,EAAA,EAAY,KAAK,EAAE,KAAA,EAAO,uBAAA,EAAwB,EAChD,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,IAED,OAAA,IAAW,IAAA,oBACV,IAAA,CAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,gBAAA,EAAA,EAAiB,OAAA,EAAQ,SAAA,EAAW,GAAG,QAAQ,OAAA,EAAS,CAAA;AAAA,MAExD,OAAA,CAAQ,aAAa,IAAA,oBACpB,GAAA,CAAC,oBAAkB,GAAG,OAAA,CAAQ,SAAA,EAAW,OAAA,EAAQ,OAAA,EAAQ;AAAA,KAAA,EAE7D;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"module.js","sources":["../src/empty-state/empty-state.tsx","../src/filter-chip/filter-chip.styled.tsx","../src/filter-chip/hooks/use-filter-chip-context.tsx","../src/filter-chip/partials/icon-slot.tsx","../src/filter-chip/partials/label.tsx","../src/filter-chip/filter-chip.tsx"],"sourcesContent":["import React from 'react'\nimport type { ReactNode, ElementRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Box } from '@mirohq/design-system-box'\nimport { Button } from '@mirohq/design-system-button'\nimport type { ButtonProps } from '@mirohq/design-system-button'\nimport type { BoxProps } from '@mirohq/design-system-box'\nimport { Heading } from '@mirohq/design-system-typography'\nimport { useCanvas26 } from '@mirohq/design-system-experiments'\n\n// Types\n// -----------------------------------------------------------------------------\nexport interface PatternEmptyStateProps extends Omit<BoxProps, 'children'> {\n  heading?: ReactNode\n  description?: ReactNode\n  illustration?: string\n  actions?: {\n    primary: ActionButton & {\n      variant?: 'primary' | 'secondary'\n    }\n    secondary?: ActionButton\n  }\n}\n\ntype BaseActionButtonProps = Omit<ButtonProps, 'children'> & {\n  label: ReactNode\n}\n\ntype ActionButton = Omit<BaseActionButtonProps, 'variant'>\n\n// Styled\n// -----------------------------------------------------------------------------\nconst Container = styled(Box, {\n  background: 'transparent',\n  padding: '$500',\n  display: 'flex',\n  flexDirection: 'column',\n  minWidth: '304px',\n  maxWidth: '480px',\n  textAlign: 'center',\n  alignItems: 'center',\n})\n\nconst Illustration = styled('img', {\n  width: '72px',\n  minHeight: '72px',\n  display: 'block',\n  marginBottom: '$150',\n})\n\nconst Description = styled(Box, {\n  color: '$text-neutrals-subtle',\n  marginTop: '$100',\n  maxWidth: '304px',\n})\n\nconst Actions = styled(Box, {\n  marginTop: '$150',\n  paddingY: '$200',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '$100',\n  alignItems: 'center',\n})\n\nconst BaseActionButton = React.forwardRef<\n  ElementRef<typeof Button>,\n  BaseActionButtonProps\n>(({ label, ...actionProps }, ref) => (\n  <Button ref={ref} {...actionProps}>\n    {label}\n  </Button>\n))\n\n// Component\n// -----------------------------------------------------------------------------\nexport const PatternEmptyState = React.forwardRef<\n  ElementRef<typeof Box>,\n  PatternEmptyStateProps\n>(({ heading, description, illustration, actions, ...restProps }, ref) => {\n  const [isCanvas26] = useCanvas26()\n\n  return (\n    <Container ref={ref} {...restProps}>\n      {illustration != null && !isCanvas26 && (\n        <Illustration src={illustration} aria-hidden alt='' />\n      )}\n      {heading != null && (\n        <Heading\n          ref={ref}\n          level={2}\n          {...(isCanvas26\n            ? { css: { fontFamily: '$display', fontSize: '$350' } }\n            : { styledAs: 'h3' })}\n        >\n          {heading}\n        </Heading>\n      )}\n      {description != null && (\n        <Description css={{ color: '$text-neutrals-subtle' }}>\n          {description}\n        </Description>\n      )}\n      {actions != null && (\n        <Actions>\n          <BaseActionButton variant='primary' {...actions.primary} />\n\n          {actions.secondary != null && (\n            <BaseActionButton {...actions.secondary} variant='ghost' />\n          )}\n        </Actions>\n      )}\n    </Container>\n  )\n})\n","import { Chip } from '@mirohq/design-system-chip'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nconst activeShell = {\n  // Chip is filled; drop the fill so an applied filter reads as an\n  // outline (border + text carry the state).\n  backgroundColor: 'transparent',\n  borderColor: '$border-primary',\n  color: '$text-primary',\n}\n\nexport const StyledFilterChip = styled(Chip, {\n  position: 'relative',\n  overflow: 'visible',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: '$sm',\n  borderColor: 'transparent',\n  marginTop: '$100',\n  // Chip truncates this box; open it so the floating label can poke out.\n  '& > [data-chip-content]': {\n    overflow: 'visible',\n  },\n  variants: {\n    active: {\n      true: {\n        '&&': activeShell,\n      },\n    },\n  },\n})\n\nexport const StyledFloatingLabel = styled(Primitive.span, {\n  position: 'absolute',\n  top: '-$100',\n  left: '$100',\n  paddingInline: '2px',\n  fontSize: '$125',\n  fontWeight: '$regular',\n  lineHeight: 1.5,\n  color: '$text-primary',\n  // Mask the stroke with the surface the chip sits on so the name reads as a\n  // notch in the outline. Consumers can set `--filter-surface` on any ancestor\n  // (e.g. a gray filter bar) so the notch blends with it; otherwise it falls\n  // back to the theme surface (white in light, dark surface in dark mode).\n  backgroundColor: 'var(--filter-surface, var(--colors-background-surface))',\n  borderRadius: '$round',\n  pointerEvents: 'none',\n  whiteSpace: 'nowrap',\n})\n\nexport const StyledLabel = styled(Primitive.span, {\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  textOverflow: 'ellipsis',\n  paddingInline: '2px',\n  lineHeight: 1.5,\n})\n\nexport type StyledLabelProps = StrictComponentProps<typeof StyledLabel>\n","import { createContext, useContext, useMemo } from 'react'\nimport type { ReactNode } from 'react'\n\ninterface FilterChipContextProps {\n  activated: boolean\n  value: ReactNode\n}\n\nexport interface FilterChipProviderProps extends FilterChipContextProps {\n  children: ReactNode\n}\n\nconst FilterChipContext = createContext<FilterChipContextProps>({\n  activated: false,\n  value: undefined,\n})\n\nexport const FilterChipProvider = ({\n  children,\n  activated,\n  value,\n}: FilterChipProviderProps): JSX.Element => {\n  const context = useMemo(() => ({ activated, value }), [activated, value])\n\n  return (\n    <FilterChipContext.Provider value={context}>\n      {children}\n    </FilterChipContext.Provider>\n  )\n}\n\nexport const useFilterChipContext = (): FilterChipContextProps =>\n  useContext(FilterChipContext)\n","import type { ElementRef, ReactNode } from 'react'\nimport React from 'react'\nimport { Chip } from '@mirohq/design-system-chip'\nimport type { ChipImageSlotProps } from '@mirohq/design-system-chip'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport type { IconReactElement } from '@mirohq/design-system-base-icon'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\n\nexport interface IconSlotProps extends Omit<ChipImageSlotProps, 'children'> {\n  /**\n   * The leading icon.\n   */\n  children: ReactNode\n}\n\nexport const IconSlot = React.forwardRef<\n  ElementRef<typeof Chip.ImageSlot>,\n  IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n  const formattedChildren = addPropsToChildren(\n    children,\n    child => isIconComponent(child as IconReactElement),\n    {\n      size: 'small',\n      weight: 'thin',\n    }\n  )\n\n  return (\n    <Chip.ImageSlot {...restProps} ref={forwardRef}>\n      {formattedChildren}\n    </Chip.ImageSlot>\n  )\n})\n\nIconSlot.displayName = 'FilterChip.IconSlot'\n","import type { ElementRef, ReactNode } from 'react'\nimport React from 'react'\n\nimport { StyledFloatingLabel, StyledLabel } from '../filter-chip.styled'\nimport type { StyledLabelProps } from '../filter-chip.styled'\nimport { useFilterChipContext } from '../hooks/use-filter-chip-context'\n\nexport interface LabelProps extends Omit<StyledLabelProps, 'children'> {\n  /**\n   * The filter's name, e.g. \"Board owner\".\n   */\n  children: ReactNode\n}\n\n/**\n * The filter's name. Shown as the chip's text when idle; once the filter is\n * activated it floats above the `value` summary, which takes its place in the\n * body.\n */\nexport const Label = React.forwardRef<\n  ElementRef<typeof StyledLabel>,\n  LabelProps\n>(({ children, ...restProps }, forwardRef) => {\n  const { activated, value } = useFilterChipContext()\n\n  return (\n    <>\n      {activated && <StyledFloatingLabel>{children}</StyledFloatingLabel>}\n      <StyledLabel {...restProps} ref={forwardRef}>\n        {activated && value != null ? value : children}\n      </StyledLabel>\n    </>\n  )\n})\n\nLabel.displayName = 'FilterChip.Label'\n","import React from 'react'\nimport type {\n  ElementRef,\n  ForwardRefExoticComponent,\n  ReactNode,\n  RefAttributes,\n} from 'react'\nimport { Chip } from '@mirohq/design-system-chip'\nimport type { ChipProps } from '@mirohq/design-system-chip'\nimport { IconChevronDown } from '@mirohq/design-system-icons'\n\nimport { StyledFilterChip } from './filter-chip.styled'\nimport { FilterChipProvider } from './hooks/use-filter-chip-context'\nimport { IconSlot } from './partials/icon-slot'\nimport { Label } from './partials/label'\n\n// Always-on press handler so Chip renders as a BaseButton even when the\n// consumer hasn't passed onPress (e.g. Combobox.Trigger asChild supplies it).\nconst noopPress = (): void => undefined\n\nexport type FilterChipProps = Omit<\n  ChipProps,\n  'removable' | 'onRemove' | 'removeAriaLabel' | 'children' | 'value' | 'ref'\n> &\n  RefAttributes<HTMLButtonElement> & {\n    /**\n     * The chip's anatomy: a `FilterChip.Label` with the filter's name, plus an\n     * optional leading `FilterChip.IconSlot`.\n     */\n    children: ReactNode\n\n    /**\n     * A short summary of the current selection, e.g. \"Active +2\". When present\n     * (or when `active` is set) the name floats above this summary.\n     */\n    value?: ReactNode\n\n    /**\n     * Force the active state. Defaults to whether `value` is set.\n     */\n    active?: boolean\n  }\n\n/**\n * FilterChip is a Chip-based trigger for filters. The filter's name goes in a\n * `FilterChip.Label`, optionally alongside a `FilterChip.IconSlot`. It shows\n * the name when idle, and floats it above a `value` summary once active,\n * with a trailing chevron.\n *\n * It renders a single `<button>` (a pressable Chip) with no overlay of its own,\n * so it is meant to drive a `Combobox` (or any overlay) via\n * `Combobox.Trigger asChild`. `loading` is Chip's loading state.\n *\n * @experimental Beta — the API may still change while teams adopt it.\n */\nexport const FilterChip = React.forwardRef<\n  ElementRef<'button'>,\n  FilterChipProps\n>(\n  (\n    {\n      value,\n      active,\n      loading = false,\n      disabled = false,\n      onPress,\n      children,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const isActive =\n      active ?? (value !== undefined && value !== null && value !== '')\n\n    return (\n      <FilterChipProvider activated={isActive} value={value}>\n        <StyledFilterChip\n          {...restProps}\n          ref={forwardRef as React.Ref<HTMLDivElement | HTMLButtonElement>}\n          removable={false}\n          loading={loading}\n          disabled={disabled}\n          active={isActive}\n          onPress={onPress ?? noopPress}\n        >\n          {children}\n\n          <Chip.ImageSlot aria-hidden>\n            <IconChevronDown size='small' />\n          </Chip.ImageSlot>\n        </StyledFilterChip>\n      </FilterChipProvider>\n    )\n  }\n) as ForwardRefExoticComponent<FilterChipProps> & Partials\n\nexport interface Partials {\n  IconSlot: typeof IconSlot\n  Label: typeof Label\n}\n\nFilterChip.IconSlot = IconSlot\nFilterChip.Label = Label\nFilterChip.displayName = 'FilterChip'\n"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -1,6 +1,11 @@
-import React, { ReactNode } from 'react';
+import * as React from 'react';
+import React__default, { ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { ButtonProps } from '@mirohq/design-system-button';
 import { BoxProps } from '@mirohq/design-system-box';
+import { ChipImageSlotProps, ChipProps } from '@mirohq/design-system-chip';
+import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
+import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
+import { StrictComponentProps } from '@mirohq/design-system-stitches';
 
 interface PatternEmptyStateProps extends Omit<BoxProps, 'children'> {
     heading?: ReactNode;
@@ -17,7 +22,85 @@ type BaseActionButtonProps = Omit<ButtonProps, 'children'> & {
     label: ReactNode;
 };
 type ActionButton = Omit<BaseActionButtonProps, 'variant'>;
-declare const PatternEmptyState: React.ForwardRefExoticComponent<Omit<PatternEmptyStateProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const PatternEmptyState: React__default.ForwardRefExoticComponent<Omit<PatternEmptyStateProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
-export { PatternEmptyState };
-export type { PatternEmptyStateProps };
+interface IconSlotProps extends Omit<ChipImageSlotProps, 'children'> {
+    /**
+     * The leading icon.
+     */
+    children: ReactNode;
+}
+declare const IconSlot: React__default.ForwardRefExoticComponent<Omit<IconSlotProps, "ref"> & React__default.RefAttributes<HTMLSpanElement>>;
+
+/* Utilities */
+/* ========================================================================== */
+
+/** Returns a string with the given prefix followed by the given values. */
+type Prefixed<K extends string, T> = `${K}${Extract<T, boolean | number | string>}`
+
+type TransformProps<Props, Media> = {
+	[K in keyof Props]: (
+		| Props[K]
+		| (
+			& {
+				[KMedia in Prefixed<'@', 'initial' | keyof Media>]?: Props[K]
+			}
+			& {
+				[KMedia in string]: Props[K]
+			}
+		)
+	)
+}
+
+declare const StyledLabel: 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">>, {}, {}>;
+type StyledLabelProps = StrictComponentProps<typeof StyledLabel>;
+
+interface LabelProps extends Omit<StyledLabelProps, 'children'> {
+    /**
+     * The filter's name, e.g. "Board owner".
+     */
+    children: ReactNode;
+}
+/**
+ * The filter's name. Shown as the chip's text when idle; once the filter is
+ * activated it floats above the `value` summary, which takes its place in the
+ * body.
+ */
+declare const Label: React__default.ForwardRefExoticComponent<Omit<LabelProps, "ref"> & React__default.RefAttributes<HTMLSpanElement>>;
+
+type FilterChipProps = Omit<ChipProps, 'removable' | 'onRemove' | 'removeAriaLabel' | 'children' | 'value' | 'ref'> & RefAttributes<HTMLButtonElement> & {
+    /**
+     * The chip's anatomy: a `FilterChip.Label` with the filter's name, plus an
+     * optional leading `FilterChip.IconSlot`.
+     */
+    children: ReactNode;
+    /**
+     * A short summary of the current selection, e.g. "Active +2". When present
+     * (or when `active` is set) the name floats above this summary.
+     */
+    value?: ReactNode;
+    /**
+     * Force the active state. Defaults to whether `value` is set.
+     */
+    active?: boolean;
+};
+/**
+ * FilterChip is a Chip-based trigger for filters. The filter's name goes in a
+ * `FilterChip.Label`, optionally alongside a `FilterChip.IconSlot`. It shows
+ * the name when idle, and floats it above a `value` summary once active,
+ * with a trailing chevron.
+ *
+ * It renders a single `<button>` (a pressable Chip) with no overlay of its own,
+ * so it is meant to drive a `Combobox` (or any overlay) via
+ * `Combobox.Trigger asChild`. `loading` is Chip's loading state.
+ *
+ * @experimental Beta — the API may still change while teams adopt it.
+ */
+declare const FilterChip: ForwardRefExoticComponent<FilterChipProps> & Partials;
+interface Partials {
+    IconSlot: typeof IconSlot;
+    Label: typeof Label;
+}
+
+export { FilterChip, PatternEmptyState };
+export type { IconSlotProps as FilterChipIconSlotProps, LabelProps as FilterChipLabelProps, FilterChipProps, PatternEmptyStateProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-patterns",
-  "version": "1.3.15",
+  "version": "1.4.0-filter-chip.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -26,11 +26,16 @@
     "react": "^16.14 || ^17 || ^18 || ^19"
   },
   "dependencies": {
+    "@mirohq/design-system-base-icon": "^1.3.0",
     "@mirohq/design-system-box": "^3.2.34",
     "@mirohq/design-system-button": "^5.3.14",
-    "@mirohq/design-system-typography": "^1.3.34",
+    "@mirohq/design-system-chip": "^1.3.0-filter-chip.0",
     "@mirohq/design-system-experiments": "^1.1.0",
-    "@mirohq/design-system-stitches": "^3.3.32"
+    "@mirohq/design-system-icons": "^1.46.0",
+    "@mirohq/design-system-primitive": "^2.2.1",
+    "@mirohq/design-system-stitches": "^3.3.32",
+    "@mirohq/design-system-typography": "^1.3.34",
+    "@mirohq/design-system-utils": "^1.3.0"
   },
   "devDependencies": {
     "@mirohq/brand-assets": "^1.1.1"