@mattermost/compass-ui 0.1.0-alpha.3 → 0.1.0-alpha.30

package/dist/components/icon-button/IconButton.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),B=require("../../utils/string.cjs"),t=require("./IconButton.module.scss.cjs"),T={"x-small":"12",small:"16",medium:"20",large:"24"};function q({active:s=!1,className:l="",count:a,destructive:u=!1,icon:i,padding:c="default",rounded:d=!1,size:r="medium",style:f="default",toggled:n=!1,unreadBadge:b=!1,disabled:_,type:m="button","aria-label":C,...v}){const N=t.default[`icon-button--size-${B.toKebab(r)}`],g=c==="compact"?t.default["icon-button--padding-compact"]:"",p=f==="inverted"?t.default["icon-button--style-inverted"]:"",I=u?t.default["icon-button--destructive"]:"",h=d?t.default["icon-button--rounded"]:"",j=n?t.default["icon-button--toggled"]:"",O=s?t.default["icon-button--active"]:"",o=a!==void 0,x=o?t.default["icon-button--has-count"]:"",S=[t.default["icon-button"],N,g,p,I,h,j,O,x,l].filter(Boolean).join(" ");return e.jsxs("button",{className:S,type:m,disabled:_,"aria-label":C,"aria-pressed":n?!0:void 0,"data-active":s?"true":void 0,...v,children:[e.jsxs("span",{className:t.default["icon-button__icon-slot"],"aria-hidden":!0,children:[i,b&&e.jsx("span",{className:t.default["icon-button__unread-badge"]})]}),o&&e.jsx("span",{className:t.default["icon-button__count"],children:a})]})}exports.ICON_BUTTON_ICON_SIZES=T;exports.default=q;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),V=require("react"),x=require("../icon/Icon.cjs"),j=require("../spinner/Spinner.cjs"),W=require("../../utils/slot.cjs"),X=require("../../utils/string.cjs"),e=require("./IconButton.module.scss.cjs"),b={"x-small":"12",small:"16",medium:"20",large:"24"};function I({className:m="",count:a,destructive:i=!1,padding:o="default",rounded:l=!1,size:n="medium",style:u="default",active:c=!1,toggled:s}){return[e.default["icon-button"],e.default[`icon-button--size-${X.toKebab(n)}`],o==="compact"?e.default["icon-button--padding-compact"]:"",u==="inverted"?e.default["icon-button--style-inverted"]:"",i?e.default["icon-button--destructive"]:"",l?e.default["icon-button--rounded"]:"",s?e.default["icon-button--toggled"]:"",c?e.default["icon-button--active"]:"",a!==void 0?e.default["icon-button--has-count"]:"",m].filter(Boolean).join(" ")}const B=V.forwardRef(function(a,i){if(a.asChild){const{active:h=!1,className:E="",count:f,destructive:L=!1,icon:M,loading:d=!1,padding:U="default",rounded:Z=!1,size:N="medium",style:C="default",unreadBadge:A=!1,disabled:F,children:K,"aria-label":$,asChild:ee,...k}=a,G=I({className:E,count:f,destructive:L,padding:U,rounded:Z,size:N,style:C,active:h}),p=b[N],H=!!(F||d),J=f!==void 0,Q=t.jsxs(t.Fragment,{children:[t.jsxs("span",{className:e.default["icon-button__icon-slot"],"aria-hidden":!0,children:[d?t.jsx(j.default,{size:p,inverted:C==="inverted"}):t.jsx(x.IconSlotContext.Provider,{value:{size:p},children:M}),A&&!d&&t.jsx("span",{className:e.default["icon-button__unread-badge"]})]}),J&&t.jsx("span",{className:e.default["icon-button__count"],children:f})]});return W.renderAsChild({child:K,props:{...k,className:G,"aria-label":$,"data-active":h?"true":void 0,...d?{"aria-busy":!0}:null},ref:i,content:Q,disabled:H,disabledClassName:e.default["icon-button--disabled"],warnOnChildContent:!0})}const{active:o=!1,className:l="",count:n,destructive:u=!1,icon:c,loading:s=!1,padding:z="default",rounded:S=!1,size:v="medium",style:g="default",toggled:r,unreadBadge:y=!1,disabled:O,type:q="button","aria-label":T,asChild:Y,...R}=a,P=I({className:l,count:n,destructive:u,padding:z,rounded:S,size:v,style:g,active:o,toggled:r}),_=b[v],w=!!(O||s),D=n!==void 0;return t.jsxs("button",{ref:i,className:P,type:q,disabled:w,"aria-label":T,"aria-pressed":r===void 0?void 0:r,"data-active":o?"true":void 0,...R,children:[t.jsxs("span",{className:e.default["icon-button__icon-slot"],"aria-hidden":!0,children:[s?t.jsx(j.default,{size:_,inverted:g==="inverted"}):t.jsx(x.IconSlotContext.Provider,{value:{size:_},children:c}),y&&!s&&t.jsx("span",{className:e.default["icon-button__unread-badge"]})]}),D&&t.jsx("span",{className:e.default["icon-button__count"],children:n})]})});B.displayName="IconButton";exports.ICON_BUTTON_ICON_SIZES=b;exports.default=B;
 //# sourceMappingURL=IconButton.cjs.map

package/dist/components/icon-button/IconButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.cjs","sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport { toKebab } from '@/utils/string';\nimport styles from './IconButton.module.scss';\n\nexport type IconButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\n/** Figma \"Style\": Default (light context) | Inverted (dark context). */\nexport type IconButtonStyle = 'default' | 'inverted';\n\nexport type IconButtonPadding = 'default' | 'compact';\n\nexport interface IconButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'style'\n> {\n  /** When true, forces the subtler pressed/active visual (lighter than toggled). */\n  active?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Numeric count shown inline after the icon. Figma: Count. */\n  count?: number;\n  /** When true, uses destructive (danger) styling. Figma: Destructive. */\n  destructive?: boolean;\n  /** Icon to show. Size the glyph via SVG_SIZE_MAP: e.g. `<Icon glyph={<GlobeIcon size={SVG_SIZE_MAP['16']} />} size=\"16\" />`. */\n  icon: ReactNode;\n  /** Padding variant. Figma: Padding = Default | Compact. */\n  padding?: IconButtonPadding;\n  /** When true, uses full border radius (pill). Figma: Rounded = On. */\n  rounded?: boolean;\n  /** Size variant. Figma: Size. Default: Medium. */\n  size?: IconButtonSize;\n  /** Default | Inverted. Figma: Style (for light vs dark backgrounds). */\n  style?: IconButtonStyle;\n  /** When true, shows toggled/selected state. Figma: Toggled = On. */\n  toggled?: boolean;\n  /** When true, shows a small unread dot over the icon. Figma: Unread Badge. */\n  unreadBadge?: boolean;\n}\n\n/** Icon size (px) per IconButton size. Use with Icon: size=\"12\" | \"16\" | \"20\" | \"24\". */\nexport const ICON_BUTTON_ICON_SIZES: Record<\n  IconButtonSize,\n  '12' | '16' | '20' | '24'\n> = {\n  'x-small': '12',\n  small: '16',\n  medium: '20',\n  large: '24',\n};\n\n/**\n * Icon Buttons are compact, label-free actions for tight surfaces — channel headers, message\n * hover actions, modal dismissals, toolbar slots. They lean on the icon to communicate\n * intent, so every Icon Button must pair with a tooltip or `aria-label` that makes the\n * action explicit.\n */\nexport default function IconButton({\n  active = false,\n  className = '',\n  count,\n  destructive = false,\n  icon,\n  padding = 'default',\n  rounded = false,\n  size = 'medium',\n  style = 'default',\n  toggled = false,\n  unreadBadge = false,\n  disabled,\n  type = 'button',\n  'aria-label': ariaLabel,\n  ...rest\n}: IconButtonProps) {\n  const sizeClass = styles[`icon-button--size-${toKebab(size)}`];\n  const paddingClass =\n    padding === 'compact' ? styles['icon-button--padding-compact'] : '';\n  const styleClass =\n    style === 'inverted' ? styles['icon-button--style-inverted'] : '';\n  const destructiveClass = destructive\n    ? styles['icon-button--destructive']\n    : '';\n  const roundedClass = rounded ? styles['icon-button--rounded'] : '';\n  const toggledClass = toggled ? styles['icon-button--toggled'] : '';\n  const activeClass = active ? styles['icon-button--active'] : '';\n  const hasCount = count !== undefined;\n  const hasCountClass = hasCount ? styles['icon-button--has-count'] : '';\n\n  const rootClass = [\n    styles['icon-button'],\n    sizeClass,\n    paddingClass,\n    styleClass,\n    destructiveClass,\n    roundedClass,\n    toggledClass,\n    activeClass,\n    hasCountClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      className={rootClass}\n      type={type}\n      disabled={disabled}\n      aria-label={ariaLabel}\n      aria-pressed={toggled ? true : undefined}\n      data-active={active ? 'true' : undefined}\n      {...rest}\n    >\n      <span className={styles['icon-button__icon-slot']} aria-hidden>\n        {icon}\n        {unreadBadge && (\n          <span className={styles['icon-button__unread-badge']} />\n        )}\n      </span>\n      {hasCount && (\n        <span className={styles['icon-button__count']}>{count}</span>\n      )}\n    </button>\n  );\n}\n"],"names":["ICON_BUTTON_ICON_SIZES","IconButton","active","className","count","destructive","icon","padding","rounded","size","style","toggled","unreadBadge","disabled","type","ariaLabel","rest","sizeClass","styles","toKebab","paddingClass","styleClass","destructiveClass","roundedClass","toggledClass","activeClass","hasCount","hasCountClass","rootClass","jsxs","jsx"],"mappings":"+NAwCaA,EAGT,CACF,UAAW,KACX,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAQA,SAAwBC,EAAW,CACjC,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,MAAAC,EACA,YAAAC,EAAc,GACd,KAAAC,EACA,QAAAC,EAAU,UACV,QAAAC,EAAU,GACV,KAAAC,EAAO,SACP,MAAAC,EAAQ,UACR,QAAAC,EAAU,GACV,YAAAC,EAAc,GACd,SAAAC,EACA,KAAAC,EAAO,SACP,aAAcC,EACd,GAAGC,CACL,EAAoB,CAClB,MAAMC,EAAYC,EAAAA,QAAO,qBAAqBC,EAAAA,QAAQV,CAAI,CAAC,EAAE,EACvDW,EACJb,IAAY,UAAYW,EAAAA,QAAO,8BAA8B,EAAI,GAC7DG,EACJX,IAAU,WAAaQ,EAAAA,QAAO,6BAA6B,EAAI,GAC3DI,EAAmBjB,EACrBa,UAAO,0BAA0B,EACjC,GACEK,EAAef,EAAUU,UAAO,sBAAsB,EAAI,GAC1DM,EAAeb,EAAUO,UAAO,sBAAsB,EAAI,GAC1DO,EAAcvB,EAASgB,UAAO,qBAAqB,EAAI,GACvDQ,EAAWtB,IAAU,OACrBuB,EAAgBD,EAAWR,UAAO,wBAAwB,EAAI,GAE9DU,EAAY,CAChBV,EAAAA,QAAO,aAAa,EACpBD,EACAG,EACAC,EACAC,EACAC,EACAC,EACAC,EACAE,EACAxB,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACE0B,EAAAA,KAAC,SAAA,CACC,UAAWD,EACX,KAAAd,EACA,SAAAD,EACA,aAAYE,EACZ,eAAcJ,EAAU,GAAO,OAC/B,cAAaT,EAAS,OAAS,OAC9B,GAAGc,EAEJ,SAAA,CAAAa,OAAC,QAAK,UAAWX,EAAAA,QAAO,wBAAwB,EAAG,cAAW,GAC3D,SAAA,CAAAZ,EACAM,GACCkB,EAAAA,IAAC,OAAA,CAAK,UAAWZ,EAAAA,QAAO,2BAA2B,CAAA,CAAG,CAAA,EAE1D,EACCQ,GACCI,EAAAA,IAAC,OAAA,CAAK,UAAWZ,EAAAA,QAAO,oBAAoB,EAAI,SAAAd,CAAA,CAAM,CAAA,CAAA,CAAA,CAI9D"}
+{"version":3,"file":"IconButton.cjs","sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefAttributes,\n} from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport { renderAsChild } from '@/utils/slot';\nimport { toKebab } from '@/utils/string';\nimport styles from './IconButton.module.scss';\n\nexport type IconButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\n/** Figma \"Style\": Default (light context) | Inverted (dark context). */\nexport type IconButtonStyle = 'default' | 'inverted';\n\nexport type IconButtonPadding = 'default' | 'compact';\n\ninterface IconButtonOwnProps {\n  /** When true, forces the subtler pressed/active visual (lighter than toggled). */\n  active?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Numeric count shown inline after the icon. Figma: Count. */\n  count?: number;\n  /** When true, uses destructive (danger) styling. Figma: Destructive. */\n  destructive?: boolean;\n  /** Icon to show. Pass `<Icon glyph={<YourIcon />} />` — IconButton provides the correct size via context; no `size` prop needed on the Icon. */\n  icon: ReactNode;\n  /** When true, shows a Spinner in place of the icon and disables the button (or blocks navigation when `asChild`). */\n  loading?: boolean;\n  /** Padding variant. Figma: Padding = Default | Compact. */\n  padding?: IconButtonPadding;\n  /** When true, uses full border radius (pill). Figma: Rounded = On. */\n  rounded?: boolean;\n  /** Size variant. Figma: Size. Default: Medium. */\n  size?: IconButtonSize;\n  /** Default | Inverted. Figma: Style (for light vs dark backgrounds). Replaces the HTML `style` attribute. */\n  style?: IconButtonStyle;\n  /** When true, shows a small unread dot over the icon. Figma: Unread Badge. */\n  unreadBadge?: boolean;\n  /**\n   * When true, disables the control. On a native `<button>`, sets the `disabled`\n   * attribute. With `asChild`, sets `aria-disabled`, applies disabled styles, and\n   * blocks click / middle-click navigation (the link stays focusable).\n   */\n  disabled?: boolean;\n}\n\nexport interface IconButtonProps\n  extends\n    IconButtonOwnProps,\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {\n  /**\n   * When true, merges IconButton props onto the single child element instead of\n   * rendering a `<button>`. Use with `<a>` or a router `Link`. Default: false.\n   */\n  asChild?: false;\n  /**\n   * When true, shows toggled/selected state. Figma: Toggled = On. When omitted,\n   * the control is not a toggle. Only applies to the native `<button>` (maps to\n   * `aria-pressed`); not available with `asChild`.\n   */\n  toggled?: boolean;\n}\n\nexport interface IconButtonAsChildProps\n  extends\n    IconButtonOwnProps,\n    Omit<HTMLAttributes<HTMLElement>, 'children' | 'color' | 'style'> {\n  /**\n   * Merges IconButton props onto the single child element instead of rendering a\n   * `<button>`. The child's own props (`href`, `to`, `target`, …) stay on the\n   * child. Do not pass `type` or `toggled` — they are not available on links.\n   * Pass an empty child; IconButton supplies the icon anatomy.\n   */\n  asChild: true;\n  /** Single empty element to render as the IconButton (e.g. `<a href=\"…\" />`). */\n  children: ReactElement;\n  /**\n   * Accessible name for the icon-only link. Required with `asChild`. An\n   * `aria-label` on the child also satisfies this (child props win).\n   */\n  'aria-label': string;\n}\n\n/**\n * @deprecated No longer needed — IconButton sets the icon size via context.\n * Pass `<Icon glyph={<YourIcon />} />` without a size prop.\n */\nexport const ICON_BUTTON_ICON_SIZES: Record<\n  IconButtonSize,\n  '12' | '16' | '20' | '24'\n> = {\n  'x-small': '12',\n  small: '16',\n  medium: '20',\n  large: '24',\n};\n\ntype IconButtonComponent = {\n  (\n    props: IconButtonAsChildProps & RefAttributes<HTMLElement>,\n  ): ReactElement | null;\n  (\n    props: IconButtonProps & RefAttributes<HTMLButtonElement>,\n  ): ReactElement | null;\n  displayName?: string;\n};\n\nfunction buildRootClass({\n  className = '',\n  count,\n  destructive = false,\n  padding = 'default',\n  rounded = false,\n  size = 'medium',\n  style = 'default',\n  active = false,\n  toggled,\n}: {\n  className?: string;\n  count?: number;\n  destructive?: boolean;\n  padding?: IconButtonPadding;\n  rounded?: boolean;\n  size?: IconButtonSize;\n  style?: IconButtonStyle;\n  active?: boolean;\n  toggled?: boolean;\n}): string {\n  return [\n    styles['icon-button'],\n    styles[`icon-button--size-${toKebab(size)}`],\n    padding === 'compact' ? styles['icon-button--padding-compact'] : '',\n    style === 'inverted' ? styles['icon-button--style-inverted'] : '',\n    destructive ? styles['icon-button--destructive'] : '',\n    rounded ? styles['icon-button--rounded'] : '',\n    toggled ? styles['icon-button--toggled'] : '',\n    active ? styles['icon-button--active'] : '',\n    count !== undefined ? styles['icon-button--has-count'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n}\n\n/**\n * Icon Buttons are compact, label-free actions for tight surfaces — channel headers, message\n * hover actions, modal dismissals, toolbar slots. They lean on the icon to communicate\n * intent, so every Icon Button must pair with a tooltip or `aria-label` that makes the\n * action explicit.\n *\n * Pass `asChild` with a single empty `<a>` or router `Link` child to render a navigational\n * icon control with Icon Button styling (no nested `<button>`).\n */\nconst IconButton = forwardRef(function IconButton(\n  props: IconButtonProps | IconButtonAsChildProps,\n  ref: Ref<HTMLButtonElement | HTMLElement>,\n) {\n  if (props.asChild) {\n    const {\n      active = false,\n      className = '',\n      count,\n      destructive = false,\n      icon,\n      loading = false,\n      padding = 'default',\n      rounded = false,\n      size = 'medium',\n      style = 'default',\n      unreadBadge = false,\n      disabled,\n      children,\n      'aria-label': ariaLabel,\n      asChild,\n      ...rest\n    } = props;\n    void asChild;\n\n    const rootClass = buildRootClass({\n      className,\n      count,\n      destructive,\n      padding,\n      rounded,\n      size,\n      style,\n      active,\n    });\n    const spinnerSize = ICON_BUTTON_ICON_SIZES[size];\n    const isDisabled = Boolean(disabled || loading);\n    const hasCount = count !== undefined;\n\n    const anatomy = (\n      <>\n        <span className={styles['icon-button__icon-slot']} aria-hidden>\n          {loading ? (\n            <Spinner size={spinnerSize} inverted={style === 'inverted'} />\n          ) : (\n            <IconSlotContext.Provider value={{ size: spinnerSize }}>\n              {icon}\n            </IconSlotContext.Provider>\n          )}\n          {unreadBadge && !loading && (\n            <span className={styles['icon-button__unread-badge']} />\n          )}\n        </span>\n        {hasCount && (\n          <span className={styles['icon-button__count']}>{count}</span>\n        )}\n      </>\n    );\n\n    return renderAsChild({\n      child: children,\n      props: {\n        ...rest,\n        className: rootClass,\n        'aria-label': ariaLabel,\n        'data-active': active ? 'true' : undefined,\n        ...(loading ? { 'aria-busy': true } : null),\n      },\n      ref,\n      content: anatomy,\n      disabled: isDisabled,\n      disabledClassName: styles['icon-button--disabled'],\n      warnOnChildContent: true,\n    });\n  }\n\n  const {\n    active = false,\n    className = '',\n    count,\n    destructive = false,\n    icon,\n    loading = false,\n    padding = 'default',\n    rounded = false,\n    size = 'medium',\n    style = 'default',\n    toggled,\n    unreadBadge = false,\n    disabled,\n    type = 'button',\n    'aria-label': ariaLabel,\n    asChild,\n    ...rest\n  } = props;\n  void asChild;\n\n  const rootClass = buildRootClass({\n    className,\n    count,\n    destructive,\n    padding,\n    rounded,\n    size,\n    style,\n    active,\n    toggled,\n  });\n  const spinnerSize = ICON_BUTTON_ICON_SIZES[size];\n  const isDisabled = Boolean(disabled || loading);\n  const hasCount = count !== undefined;\n\n  return (\n    <button\n      ref={ref as Ref<HTMLButtonElement>}\n      className={rootClass}\n      type={type}\n      disabled={isDisabled}\n      aria-label={ariaLabel}\n      aria-pressed={toggled === undefined ? undefined : toggled}\n      data-active={active ? 'true' : undefined}\n      {...rest}\n    >\n      <span className={styles['icon-button__icon-slot']} aria-hidden>\n        {loading ? (\n          <Spinner size={spinnerSize} inverted={style === 'inverted'} />\n        ) : (\n          <IconSlotContext.Provider value={{ size: spinnerSize }}>\n            {icon}\n          </IconSlotContext.Provider>\n        )}\n        {unreadBadge && !loading && (\n          <span className={styles['icon-button__unread-badge']} />\n        )}\n      </span>\n      {hasCount && (\n        <span className={styles['icon-button__count']}>{count}</span>\n      )}\n    </button>\n  );\n}) as IconButtonComponent;\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n"],"names":["ICON_BUTTON_ICON_SIZES","buildRootClass","className","count","destructive","padding","rounded","size","style","active","toggled","styles","toKebab","IconButton","forwardRef","props","ref","icon","loading","unreadBadge","disabled","children","ariaLabel","asChild","rest","rootClass","spinnerSize","isDisabled","hasCount","anatomy","jsxs","Fragment","jsx","Spinner","IconSlotContext","renderAsChild","type"],"mappings":"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"}

package/dist/components/icon-button/IconButton.css

@@ -0,0 +1 @@
+._icon-button_1d2d4_13{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-family-body);border-radius:var(--radius-s);border:0;cursor:pointer;text-decoration:none;background-color:transparent;--icon-button-fg: rgba(var(--center-channel-color-rgb), .64);color:var(--icon-button-fg);outline:none}._icon-button_1d2d4_13:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:3px;animation:_focus-ring-in_1d2d4_1 var(--duration-quick) var(--ease-transition)}@media(prefers-reduced-motion:reduce){._icon-button_1d2d4_13:focus-visible{animation:none}}._icon-button_1d2d4_13:not(._-host-shadow-a_1d2d4_38):not(._-host-shadow-b_1d2d4_38){border-radius:var(--radius-s)}@keyframes _focus-ring-in_1d2d4_1{0%{outline-color:transparent;outline-offset:0}}._icon-button_1d2d4_13:any-link,._icon-button_1d2d4_13:hover,._icon-button_1d2d4_13:focus,._icon-button_1d2d4_13:active,._icon-button_1d2d4_13:visited{color:var(--icon-button-fg);text-decoration:none}._icon-button_1d2d4_13:is(:disabled,._icon-button--disabled_1d2d4_51){cursor:not-allowed;opacity:.5}._icon-button_1d2d4_13:is(:hover,:focus-visible):not(:disabled,._icon-button--disabled_1d2d4_51):not(:active):not(._icon-button--active_1d2d4_55):not(._icon-button--toggled_1d2d4_55){background-color:rgba(var(--center-channel-color-rgb),.08);--icon-button-fg: rgba(var(--center-channel-color-rgb), .75);color:rgba(var(--center-channel-color-rgb),.75)}._icon-button_1d2d4_13:active:not(:disabled,._icon-button--disabled_1d2d4_51):not(._icon-button--toggled_1d2d4_55){background-color:rgba(var(--button-bg-rgb),.08);--icon-button-fg: var(--link-color);color:var(--link-color)}._icon-button__icon-slot_1d2d4_65{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._icon-button__unread-badge_1d2d4_72{position:absolute;top:-1px;right:-1px;width:6px;height:6px;border-radius:var(--radius-pill);background-color:var(--sidebar-text-active-border);box-shadow:0 0 0 2px var(--center-channel-bg);pointer-events:none}._icon-button__count_1d2d4_83{font-weight:var(--font-weight-semibold);color:inherit}._icon-button--size-x-small_1d2d4_87{width:24px;height:24px;padding:var(--spacing-xxs)}._icon-button--size-x-small_1d2d4_87 ._icon-button__count_1d2d4_83{font-size:var(--font-size-75);line-height:12px}._icon-button--size-x-small_1d2d4_87._icon-button--padding-compact_1d2d4_96{width:20px;height:20px;padding:var(--spacing-xxxs)}._icon-button--size-small_1d2d4_101{width:32px;height:32px;padding:var(--spacing-xs)}._icon-button--size-small_1d2d4_101 ._icon-button__count_1d2d4_83{font-size:var(--font-size-100);line-height:var(--line-height-75)}._icon-button--size-small_1d2d4_101._icon-button--padding-compact_1d2d4_96{width:28px;height:28px;padding:var(--spacing-xxs)}._icon-button--size-medium_1d2d4_115{width:40px;height:40px;padding:var(--spacing-s)}._icon-button--size-medium_1d2d4_115 ._icon-button__count_1d2d4_83{font-size:var(--font-size-200);line-height:var(--line-height-75)}._icon-button--size-medium_1d2d4_115._icon-button--padding-compact_1d2d4_96{width:36px;height:36px;padding:var(--spacing-xs)}._icon-button--size-large_1d2d4_129{width:48px;height:48px;padding:var(--spacing-m)}._icon-button--size-large_1d2d4_129 ._icon-button__count_1d2d4_83{font-size:var(--font-size-300);line-height:var(--line-height-100)}._icon-button--size-large_1d2d4_129._icon-button--padding-compact_1d2d4_96{width:44px;height:44px;padding:var(--spacing-s)}._icon-button--has-count_1d2d4_143{width:auto;gap:var(--spacing-xxxs)}._icon-button--has-count_1d2d4_143._icon-button--padding-compact_1d2d4_96{width:auto}._icon-button--rounded_1d2d4_150:not(._-host-shadow-a_1d2d4_38):not(._-host-shadow-b_1d2d4_38){border-radius:var(--radius-pill)}._icon-button--active_1d2d4_55:not(:disabled,._icon-button--disabled_1d2d4_51){background-color:rgba(var(--button-bg-rgb),.08);--icon-button-fg: var(--link-color);color:var(--link-color)}._icon-button--active_1d2d4_55:not(:disabled,._icon-button--disabled_1d2d4_51):is(:hover,:focus-visible):not(:disabled,._icon-button--disabled_1d2d4_51):not(:active){background-color:rgba(var(--button-bg-rgb),.12);--icon-button-fg: var(--link-color);color:var(--link-color)}._icon-button--active_1d2d4_55:not(:disabled,._icon-button--disabled_1d2d4_51):active:not(:disabled,._icon-button--disabled_1d2d4_51){background-color:rgba(var(--button-bg-rgb),.16);--icon-button-fg: var(--link-color);color:var(--link-color)}._icon-button--toggled_1d2d4_55{background-color:var(--button-bg);--icon-button-fg: var(--button-color);color:var(--button-color)}._icon-button--toggled_1d2d4_55:is(:hover,:focus-visible):not(:disabled,._icon-button--disabled_1d2d4_51):not(:active){background-color:color-mix(in srgb,black 8%,var(--button-bg));--icon-button-fg: var(--button-color);color:var(--button-color)}._icon-button--toggled_1d2d4_55:active:not(:disabled,._icon-button--disabled_1d2d4_51){background-color:color-mix(in srgb,black 16%,var(--button-bg));--icon-button-fg: var(--button-color);color:var(--button-color)}._icon-button--toggled_1d2d4_55 ._icon-button__unread-badge_1d2d4_72{box-shadow:0 0 0 2px var(--button-bg)}._icon-button--style-inverted_1d2d4_186{background-color:transparent;--icon-button-fg: rgba(var(--sidebar-text-rgb), .64);color:rgba(var(--sidebar-text-rgb),.64)}._icon-button--style-inverted_1d2d4_186 ._icon-button__unread-badge_1d2d4_72{box-shadow:0 0 0 2px var(--sidebar-header-bg)}._icon-button--style-inverted_1d2d4_186:is(:hover,:focus-visible):not(:disabled,._icon-button--disabled_1d2d4_51):not(:active):not(._icon-button--toggled_1d2d4_55):not(._icon-button--active_1d2d4_55){background-color:rgba(var(--sidebar-text-rgb),.08);--icon-button-fg: var(--sidebar-text);color:var(--sidebar-text)}._icon-button--style-inverted_1d2d4_186:active:not(:disabled,._icon-button--disabled_1d2d4_51):not(._icon-button--toggled_1d2d4_55){background-color:rgba(var(--sidebar-text-rgb),.16);--icon-button-fg: var(--sidebar-text);color:var(--sidebar-text)}._icon-button--style-inverted_1d2d4_186._icon-button--active_1d2d4_55:not(:disabled,._icon-button--disabled_1d2d4_51){background-color:rgba(var(--sidebar-text-rgb),.16);--icon-button-fg: var(--sidebar-text);color:var(--sidebar-text)}._icon-button--style-inverted_1d2d4_186._icon-button--active_1d2d4_55:not(:disabled,._icon-button--disabled_1d2d4_51):is(:hover,:focus-visible):not(:disabled,._icon-button--disabled_1d2d4_51):not(:active){background-color:rgba(var(--sidebar-text-rgb),.2);--icon-button-fg: var(--sidebar-text);color:var(--sidebar-text)}._icon-button--style-inverted_1d2d4_186._icon-button--active_1d2d4_55:not(:disabled,._icon-button--disabled_1d2d4_51):active:not(:disabled,._icon-button--disabled_1d2d4_51){background-color:rgba(var(--sidebar-text-rgb),.24);--icon-button-fg: var(--sidebar-text);color:var(--sidebar-text)}._icon-button--style-inverted_1d2d4_186._icon-button--toggled_1d2d4_55{background-color:var(--sidebar-text);--icon-button-fg: var(--sidebar-bg);color:var(--sidebar-bg)}._icon-button--style-inverted_1d2d4_186._icon-button--toggled_1d2d4_55:is(:hover,:focus-visible):not(:disabled,._icon-button--disabled_1d2d4_51):not(:active){background-color:rgba(var(--sidebar-text-rgb),.92);--icon-button-fg: var(--sidebar-bg);color:var(--sidebar-bg)}._icon-button--style-inverted_1d2d4_186._icon-button--toggled_1d2d4_55:active:not(:disabled,._icon-button--disabled_1d2d4_51){background-color:rgba(var(--sidebar-text-rgb),.88);--icon-button-fg: var(--sidebar-bg);color:var(--sidebar-bg)}._icon-button--style-inverted_1d2d4_186._icon-button--toggled_1d2d4_55 ._icon-button__unread-badge_1d2d4_72{box-shadow:0 0 0 2px var(--sidebar-text)}._icon-button--style-inverted_1d2d4_186._icon-button--destructive_1d2d4_237{--focus-ring-color: var(--error-text, var(--color-danger));background-color:transparent;--icon-button-fg: var(--error-text, var(--color-danger));color:var(--error-text, var(--color-danger))}._icon-button--style-inverted_1d2d4_186._icon-button--destructive_1d2d4_237:is(:hover,:focus-visible):not(:disabled,._icon-button--disabled_1d2d4_51):not(:active){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);--icon-button-fg: var(--error-text, var(--color-danger));color:var(--error-text, var(--color-danger))}._icon-button--style-inverted_1d2d4_186._icon-button--destructive_1d2d4_237:active:not(:disabled,._icon-button--disabled_1d2d4_51):not(._icon-button--toggled_1d2d4_55){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);--icon-button-fg: var(--error-text, var(--color-danger));color:var(--error-text, var(--color-danger))}._icon-button--destructive_1d2d4_237{--focus-ring-color: var(--error-text, var(--color-danger));background-color:transparent;--icon-button-fg: var(--error-text, var(--color-danger));color:var(--error-text, var(--color-danger))}._icon-button--destructive_1d2d4_237:is(:hover,:focus-visible):not(:disabled,._icon-button--disabled_1d2d4_51):not(:active){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);--icon-button-fg: var(--error-text, var(--color-danger));color:var(--error-text, var(--color-danger))}._icon-button--destructive_1d2d4_237:active:not(:disabled,._icon-button--disabled_1d2d4_51):not(._icon-button--toggled_1d2d4_55){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);--icon-button-fg: var(--error-text, var(--color-danger));color:var(--error-text, var(--color-danger))}

package/dist/components/icon-button/IconButton.d.ts

@@ -1,9 +1,9 @@
-import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { ButtonHTMLAttributes, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
 export type IconButtonSize = 'x-small' | 'small' | 'medium' | 'large';
 /** Figma "Style": Default (light context) | Inverted (dark context). */
 export type IconButtonStyle = 'default' | 'inverted';
 export type IconButtonPadding = 'default' | 'compact';
-export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
+interface IconButtonOwnProps {
     /** When true, forces the subtler pressed/active visual (lighter than toggled). */
     active?: boolean;
     /** Optional CSS class name. */
@@ -12,28 +12,75 @@ export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonEle
     count?: number;
     /** When true, uses destructive (danger) styling. Figma: Destructive. */
     destructive?: boolean;
-    /** Icon to show. Size the glyph via SVG_SIZE_MAP: e.g. `<Icon glyph={<GlobeIcon size={SVG_SIZE_MAP['16']} />} size="16" />`. */
+    /** Icon to show. Pass `<Icon glyph={<YourIcon />} />` — IconButton provides the correct size via context; no `size` prop needed on the Icon. */
     icon: ReactNode;
+    /** When true, shows a Spinner in place of the icon and disables the button (or blocks navigation when `asChild`). */
+    loading?: boolean;
     /** Padding variant. Figma: Padding = Default | Compact. */
     padding?: IconButtonPadding;
     /** When true, uses full border radius (pill). Figma: Rounded = On. */
     rounded?: boolean;
     /** Size variant. Figma: Size. Default: Medium. */
     size?: IconButtonSize;
-    /** Default | Inverted. Figma: Style (for light vs dark backgrounds). */
+    /** Default | Inverted. Figma: Style (for light vs dark backgrounds). Replaces the HTML `style` attribute. */
     style?: IconButtonStyle;
-    /** When true, shows toggled/selected state. Figma: Toggled = On. */
-    toggled?: boolean;
     /** When true, shows a small unread dot over the icon. Figma: Unread Badge. */
     unreadBadge?: boolean;
+    /**
+     * When true, disables the control. On a native `<button>`, sets the `disabled`
+     * attribute. With `asChild`, sets `aria-disabled`, applies disabled styles, and
+     * blocks click / middle-click navigation (the link stays focusable).
+     */
+    disabled?: boolean;
+}
+export interface IconButtonProps extends IconButtonOwnProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
+    /**
+     * When true, merges IconButton props onto the single child element instead of
+     * rendering a `<button>`. Use with `<a>` or a router `Link`. Default: false.
+     */
+    asChild?: false;
+    /**
+     * When true, shows toggled/selected state. Figma: Toggled = On. When omitted,
+     * the control is not a toggle. Only applies to the native `<button>` (maps to
+     * `aria-pressed`); not available with `asChild`.
+     */
+    toggled?: boolean;
 }
-/** Icon size (px) per IconButton size. Use with Icon: size="12" | "16" | "20" | "24". */
+export interface IconButtonAsChildProps extends IconButtonOwnProps, Omit<HTMLAttributes<HTMLElement>, 'children' | 'color' | 'style'> {
+    /**
+     * Merges IconButton props onto the single child element instead of rendering a
+     * `<button>`. The child's own props (`href`, `to`, `target`, …) stay on the
+     * child. Do not pass `type` or `toggled` — they are not available on links.
+     * Pass an empty child; IconButton supplies the icon anatomy.
+     */
+    asChild: true;
+    /** Single empty element to render as the IconButton (e.g. `<a href="…" />`). */
+    children: ReactElement;
+    /**
+     * Accessible name for the icon-only link. Required with `asChild`. An
+     * `aria-label` on the child also satisfies this (child props win).
+     */
+    'aria-label': string;
+}
+/**
+ * @deprecated No longer needed — IconButton sets the icon size via context.
+ * Pass `<Icon glyph={<YourIcon />} />` without a size prop.
+ */
 export declare const ICON_BUTTON_ICON_SIZES: Record<IconButtonSize, '12' | '16' | '20' | '24'>;
+type IconButtonComponent = {
+    (props: IconButtonAsChildProps & RefAttributes<HTMLElement>): ReactElement | null;
+    (props: IconButtonProps & RefAttributes<HTMLButtonElement>): ReactElement | null;
+    displayName?: string;
+};
 /**
  * Icon Buttons are compact, label-free actions for tight surfaces — channel headers, message
  * hover actions, modal dismissals, toolbar slots. They lean on the icon to communicate
  * intent, so every Icon Button must pair with a tooltip or `aria-label` that makes the
  * action explicit.
+ *
+ * Pass `asChild` with a single empty `<a>` or router `Link` child to render a navigational
+ * icon control with Icon Button styling (no nested `<button>`).
  */
-export default function IconButton({ active, className, count, destructive, icon, padding, rounded, size, style, toggled, unreadBadge, disabled, type, 'aria-label': ariaLabel, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+declare const IconButton: IconButtonComponent;
+export default IconButton;
 //# sourceMappingURL=IconButton.d.ts.map

package/dist/components/icon-button/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI7D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtE,wEAAwE;AACxE,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,OAAO,CACR;IACC,kFAAkF;IAClF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gIAAgI;IAChI,IAAI,EAAE,SAAS,CAAC;IAChB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,wEAAwE;IACxE,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,yFAAyF;AACzF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CACzC,cAAc,EACd,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAM1B,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,MAAc,EACd,SAAc,EACd,KAAK,EACL,WAAmB,EACnB,IAAI,EACJ,OAAmB,EACnB,OAAe,EACf,IAAe,EACf,KAAiB,EACjB,OAAe,EACf,WAAmB,EACnB,QAAQ,EACR,IAAe,EACf,YAAY,EAAE,SAAS,EACvB,GAAG,IAAI,EACR,EAAE,eAAe,2CAmDjB"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,SAAS,EAEd,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AAOf,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtE,wEAAwE;AACxE,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtD,UAAU,kBAAkB;IAC1B,kFAAkF;IAClF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gJAAgJ;IAChJ,IAAI,EAAE,SAAS,CAAC;IAChB,qHAAqH;IACrH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,6GAA6G;IAC7G,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eACf,SACE,kBAAkB,EAClB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IACxD;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,sBACf,SACE,kBAAkB,EAClB,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;IACnE;;;;;OAKG;IACH,OAAO,EAAE,IAAI,CAAC;IACd,gFAAgF;IAChF,QAAQ,EAAE,YAAY,CAAC;IACvB;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CACzC,cAAc,EACd,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAM1B,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,CACE,KAAK,EAAE,sBAAsB,GAAG,aAAa,CAAC,WAAW,CAAC,GACzD,YAAY,GAAG,IAAI,CAAC;IACvB,CACE,KAAK,EAAE,eAAe,GAAG,aAAa,CAAC,iBAAiB,CAAC,GACxD,YAAY,GAAG,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAuCF;;;;;;;;GAQG;AACH,QAAA,MAAM,UAAU,EA4IV,mBAAmB,CAAC;AAI1B,eAAe,UAAU,CAAC"}

package/dist/components/icon-button/IconButton.js

@@ -1,63 +1,144 @@
-import { jsxs as e, jsx as c } from "react/jsx-runtime";
-import { toKebab as z } from "../../utils/string.js";
-import t from "./IconButton.module.scss.js";
-const K = {
+import { jsxs as l, Fragment as V, jsx as a } from "react/jsx-runtime";
+import { forwardRef as W } from "react";
+import { IconSlotContext as z } from "../icon/Icon.js";
+import y from "../spinner/Spinner.js";
+import { renderAsChild as X } from "../../utils/slot.js";
+import { toKebab as Y } from "../../utils/string.js";
+import e from "./IconButton.module.scss.js";
+const B = {
   "x-small": "12",
   small: "16",
   medium: "20",
   large: "24"
 };
-function U({
-  active: o = !1,
-  className: i = "",
-  count: s,
-  destructive: l = !1,
-  icon: u,
-  padding: d = "default",
-  rounded: r = !1,
-  size: b = "medium",
-  style: m = "default",
-  toggled: n = !1,
-  unreadBadge: f = !1,
-  disabled: C,
-  type: p = "button",
-  "aria-label": v,
-  ..._
+function I({
+  className: f = "",
+  count: t,
+  destructive: o = !1,
+  padding: s = "default",
+  rounded: c = !1,
+  size: n = "medium",
+  style: r = "default",
+  active: u = !1,
+  toggled: i
 }) {
-  const h = t[`icon-button--size-${z(b)}`], N = d === "compact" ? t["icon-button--padding-compact"] : "", g = m === "inverted" ? t["icon-button--style-inverted"] : "", x = l ? t["icon-button--destructive"] : "", I = r ? t["icon-button--rounded"] : "", j = n ? t["icon-button--toggled"] : "", y = o ? t["icon-button--active"] : "", a = s !== void 0, B = a ? t["icon-button--has-count"] : "", O = [
-    t["icon-button"],
-    h,
-    N,
-    g,
-    x,
-    I,
-    j,
-    y,
-    B,
-    i
+  return [
+    e["icon-button"],
+    e[`icon-button--size-${Y(n)}`],
+    s === "compact" ? e["icon-button--padding-compact"] : "",
+    r === "inverted" ? e["icon-button--style-inverted"] : "",
+    o ? e["icon-button--destructive"] : "",
+    c ? e["icon-button--rounded"] : "",
+    i ? e["icon-button--toggled"] : "",
+    u ? e["icon-button--active"] : "",
+    t !== void 0 ? e["icon-button--has-count"] : "",
+    f
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e(
+}
+const ee = W(function(t, o) {
+  if (t.asChild) {
+    const {
+      active: g = !1,
+      className: A = "",
+      count: b,
+      destructive: E = !1,
+      icon: F,
+      loading: d = !1,
+      padding: K = "default",
+      rounded: U = !1,
+      size: N = "medium",
+      style: C = "default",
+      unreadBadge: Z = !1,
+      disabled: $,
+      children: k,
+      "aria-label": q,
+      asChild: te,
+      ...G
+    } = t, H = I({
+      className: A,
+      count: b,
+      destructive: E,
+      padding: K,
+      rounded: U,
+      size: N,
+      style: C,
+      active: g
+    }), _ = B[N], J = !!($ || d), M = b !== void 0, Q = /* @__PURE__ */ l(V, { children: [
+      /* @__PURE__ */ l("span", { className: e["icon-button__icon-slot"], "aria-hidden": !0, children: [
+        d ? /* @__PURE__ */ a(y, { size: _, inverted: C === "inverted" }) : /* @__PURE__ */ a(z.Provider, { value: { size: _ }, children: F }),
+        Z && !d && /* @__PURE__ */ a("span", { className: e["icon-button__unread-badge"] })
+      ] }),
+      M && /* @__PURE__ */ a("span", { className: e["icon-button__count"], children: b })
+    ] });
+    return X({
+      child: k,
+      props: {
+        ...G,
+        className: H,
+        "aria-label": q,
+        "data-active": g ? "true" : void 0,
+        ...d ? { "aria-busy": !0 } : null
+      },
+      ref: o,
+      content: Q,
+      disabled: J,
+      disabledClassName: e["icon-button--disabled"],
+      warnOnChildContent: !0
+    });
+  }
+  const {
+    active: s = !1,
+    className: c = "",
+    count: n,
+    destructive: r = !1,
+    icon: u,
+    loading: i = !1,
+    padding: S = "default",
+    rounded: x = !1,
+    size: v = "medium",
+    style: p = "default",
+    toggled: m,
+    unreadBadge: O = !1,
+    disabled: j,
+    type: w = "button",
+    "aria-label": D,
+    asChild: ae,
+    ...L
+  } = t, P = I({
+    className: c,
+    count: n,
+    destructive: r,
+    padding: S,
+    rounded: x,
+    size: v,
+    style: p,
+    active: s,
+    toggled: m
+  }), h = B[v], R = !!(j || i), T = n !== void 0;
+  return /* @__PURE__ */ l(
     "button",
     {
-      className: O,
-      type: p,
-      disabled: C,
-      "aria-label": v,
-      "aria-pressed": n ? !0 : void 0,
-      "data-active": o ? "true" : void 0,
-      ..._,
+      ref: o,
+      className: P,
+      type: w,
+      disabled: R,
+      "aria-label": D,
+      "aria-pressed": m === void 0 ? void 0 : m,
+      "data-active": s ? "true" : void 0,
+      ...L,
       children: [
-        /* @__PURE__ */ e("span", { className: t["icon-button__icon-slot"], "aria-hidden": !0, children: [
-          u,
-          f && /* @__PURE__ */ c("span", { className: t["icon-button__unread-badge"] })
+        /* @__PURE__ */ l("span", { className: e["icon-button__icon-slot"], "aria-hidden": !0, children: [
+          i ? /* @__PURE__ */ a(y, { size: h, inverted: p === "inverted" }) : /* @__PURE__ */ a(z.Provider, { value: { size: h }, children: u }),
+          O && !i && /* @__PURE__ */ a("span", { className: e["icon-button__unread-badge"] })
         ] }),
-        a && /* @__PURE__ */ c("span", { className: t["icon-button__count"], children: s })
+        T && /* @__PURE__ */ a("span", { className: e["icon-button__count"], children: n })
       ]
     }
   );
-}
+});
+ee.displayName = "IconButton";
 export {
-  K as ICON_BUTTON_ICON_SIZES,
-  U as default
+  B as ICON_BUTTON_ICON_SIZES,
+  ee as default
 };
 //# sourceMappingURL=IconButton.js.map

package/dist/components/icon-button/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport { toKebab } from '@/utils/string';\nimport styles from './IconButton.module.scss';\n\nexport type IconButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\n/** Figma \"Style\": Default (light context) | Inverted (dark context). */\nexport type IconButtonStyle = 'default' | 'inverted';\n\nexport type IconButtonPadding = 'default' | 'compact';\n\nexport interface IconButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'style'\n> {\n  /** When true, forces the subtler pressed/active visual (lighter than toggled). */\n  active?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Numeric count shown inline after the icon. Figma: Count. */\n  count?: number;\n  /** When true, uses destructive (danger) styling. Figma: Destructive. */\n  destructive?: boolean;\n  /** Icon to show. Size the glyph via SVG_SIZE_MAP: e.g. `<Icon glyph={<GlobeIcon size={SVG_SIZE_MAP['16']} />} size=\"16\" />`. */\n  icon: ReactNode;\n  /** Padding variant. Figma: Padding = Default | Compact. */\n  padding?: IconButtonPadding;\n  /** When true, uses full border radius (pill). Figma: Rounded = On. */\n  rounded?: boolean;\n  /** Size variant. Figma: Size. Default: Medium. */\n  size?: IconButtonSize;\n  /** Default | Inverted. Figma: Style (for light vs dark backgrounds). */\n  style?: IconButtonStyle;\n  /** When true, shows toggled/selected state. Figma: Toggled = On. */\n  toggled?: boolean;\n  /** When true, shows a small unread dot over the icon. Figma: Unread Badge. */\n  unreadBadge?: boolean;\n}\n\n/** Icon size (px) per IconButton size. Use with Icon: size=\"12\" | \"16\" | \"20\" | \"24\". */\nexport const ICON_BUTTON_ICON_SIZES: Record<\n  IconButtonSize,\n  '12' | '16' | '20' | '24'\n> = {\n  'x-small': '12',\n  small: '16',\n  medium: '20',\n  large: '24',\n};\n\n/**\n * Icon Buttons are compact, label-free actions for tight surfaces — channel headers, message\n * hover actions, modal dismissals, toolbar slots. They lean on the icon to communicate\n * intent, so every Icon Button must pair with a tooltip or `aria-label` that makes the\n * action explicit.\n */\nexport default function IconButton({\n  active = false,\n  className = '',\n  count,\n  destructive = false,\n  icon,\n  padding = 'default',\n  rounded = false,\n  size = 'medium',\n  style = 'default',\n  toggled = false,\n  unreadBadge = false,\n  disabled,\n  type = 'button',\n  'aria-label': ariaLabel,\n  ...rest\n}: IconButtonProps) {\n  const sizeClass = styles[`icon-button--size-${toKebab(size)}`];\n  const paddingClass =\n    padding === 'compact' ? styles['icon-button--padding-compact'] : '';\n  const styleClass =\n    style === 'inverted' ? styles['icon-button--style-inverted'] : '';\n  const destructiveClass = destructive\n    ? styles['icon-button--destructive']\n    : '';\n  const roundedClass = rounded ? styles['icon-button--rounded'] : '';\n  const toggledClass = toggled ? styles['icon-button--toggled'] : '';\n  const activeClass = active ? styles['icon-button--active'] : '';\n  const hasCount = count !== undefined;\n  const hasCountClass = hasCount ? styles['icon-button--has-count'] : '';\n\n  const rootClass = [\n    styles['icon-button'],\n    sizeClass,\n    paddingClass,\n    styleClass,\n    destructiveClass,\n    roundedClass,\n    toggledClass,\n    activeClass,\n    hasCountClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      className={rootClass}\n      type={type}\n      disabled={disabled}\n      aria-label={ariaLabel}\n      aria-pressed={toggled ? true : undefined}\n      data-active={active ? 'true' : undefined}\n      {...rest}\n    >\n      <span className={styles['icon-button__icon-slot']} aria-hidden>\n        {icon}\n        {unreadBadge && (\n          <span className={styles['icon-button__unread-badge']} />\n        )}\n      </span>\n      {hasCount && (\n        <span className={styles['icon-button__count']}>{count}</span>\n      )}\n    </button>\n  );\n}\n"],"names":["ICON_BUTTON_ICON_SIZES","IconButton","active","className","count","destructive","icon","padding","rounded","size","style","toggled","unreadBadge","disabled","type","ariaLabel","rest","sizeClass","styles","toKebab","paddingClass","styleClass","destructiveClass","roundedClass","toggledClass","activeClass","hasCount","hasCountClass","rootClass","jsxs","jsx"],"mappings":";;;AAwCO,MAAMA,IAGT;AAAA,EACF,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAQA,SAAwBC,EAAW;AAAA,EACjC,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,aAAAC,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,cAAcC;AAAA,EACd,GAAGC;AACL,GAAoB;AAClB,QAAMC,IAAYC,EAAO,qBAAqBC,EAAQV,CAAI,CAAC,EAAE,GACvDW,IACJb,MAAY,YAAYW,EAAO,8BAA8B,IAAI,IAC7DG,IACJX,MAAU,aAAaQ,EAAO,6BAA6B,IAAI,IAC3DI,IAAmBjB,IACrBa,EAAO,0BAA0B,IACjC,IACEK,IAAef,IAAUU,EAAO,sBAAsB,IAAI,IAC1DM,IAAeb,IAAUO,EAAO,sBAAsB,IAAI,IAC1DO,IAAcvB,IAASgB,EAAO,qBAAqB,IAAI,IACvDQ,IAAWtB,MAAU,QACrBuB,IAAgBD,IAAWR,EAAO,wBAAwB,IAAI,IAE9DU,IAAY;AAAA,IAChBV,EAAO,aAAa;AAAA,IACpBD;AAAA,IACAG;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAE;AAAA,IACAxB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAA0B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWD;AAAA,MACX,MAAAd;AAAA,MACA,UAAAD;AAAA,MACA,cAAYE;AAAA,MACZ,gBAAcJ,IAAU,KAAO;AAAA,MAC/B,eAAaT,IAAS,SAAS;AAAA,MAC9B,GAAGc;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAa,EAAC,UAAK,WAAWX,EAAO,wBAAwB,GAAG,eAAW,IAC3D,UAAA;AAAA,UAAAZ;AAAA,UACAM,KACC,gBAAAkB,EAAC,QAAA,EAAK,WAAWZ,EAAO,2BAA2B,EAAA,CAAG;AAAA,QAAA,GAE1D;AAAA,QACCQ,KACC,gBAAAI,EAAC,QAAA,EAAK,WAAWZ,EAAO,oBAAoB,GAAI,UAAAd,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI9D;"}
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefAttributes,\n} from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport { renderAsChild } from '@/utils/slot';\nimport { toKebab } from '@/utils/string';\nimport styles from './IconButton.module.scss';\n\nexport type IconButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\n/** Figma \"Style\": Default (light context) | Inverted (dark context). */\nexport type IconButtonStyle = 'default' | 'inverted';\n\nexport type IconButtonPadding = 'default' | 'compact';\n\ninterface IconButtonOwnProps {\n  /** When true, forces the subtler pressed/active visual (lighter than toggled). */\n  active?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Numeric count shown inline after the icon. Figma: Count. */\n  count?: number;\n  /** When true, uses destructive (danger) styling. Figma: Destructive. */\n  destructive?: boolean;\n  /** Icon to show. Pass `<Icon glyph={<YourIcon />} />` — IconButton provides the correct size via context; no `size` prop needed on the Icon. */\n  icon: ReactNode;\n  /** When true, shows a Spinner in place of the icon and disables the button (or blocks navigation when `asChild`). */\n  loading?: boolean;\n  /** Padding variant. Figma: Padding = Default | Compact. */\n  padding?: IconButtonPadding;\n  /** When true, uses full border radius (pill). Figma: Rounded = On. */\n  rounded?: boolean;\n  /** Size variant. Figma: Size. Default: Medium. */\n  size?: IconButtonSize;\n  /** Default | Inverted. Figma: Style (for light vs dark backgrounds). Replaces the HTML `style` attribute. */\n  style?: IconButtonStyle;\n  /** When true, shows a small unread dot over the icon. Figma: Unread Badge. */\n  unreadBadge?: boolean;\n  /**\n   * When true, disables the control. On a native `<button>`, sets the `disabled`\n   * attribute. With `asChild`, sets `aria-disabled`, applies disabled styles, and\n   * blocks click / middle-click navigation (the link stays focusable).\n   */\n  disabled?: boolean;\n}\n\nexport interface IconButtonProps\n  extends\n    IconButtonOwnProps,\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {\n  /**\n   * When true, merges IconButton props onto the single child element instead of\n   * rendering a `<button>`. Use with `<a>` or a router `Link`. Default: false.\n   */\n  asChild?: false;\n  /**\n   * When true, shows toggled/selected state. Figma: Toggled = On. When omitted,\n   * the control is not a toggle. Only applies to the native `<button>` (maps to\n   * `aria-pressed`); not available with `asChild`.\n   */\n  toggled?: boolean;\n}\n\nexport interface IconButtonAsChildProps\n  extends\n    IconButtonOwnProps,\n    Omit<HTMLAttributes<HTMLElement>, 'children' | 'color' | 'style'> {\n  /**\n   * Merges IconButton props onto the single child element instead of rendering a\n   * `<button>`. The child's own props (`href`, `to`, `target`, …) stay on the\n   * child. Do not pass `type` or `toggled` — they are not available on links.\n   * Pass an empty child; IconButton supplies the icon anatomy.\n   */\n  asChild: true;\n  /** Single empty element to render as the IconButton (e.g. `<a href=\"…\" />`). */\n  children: ReactElement;\n  /**\n   * Accessible name for the icon-only link. Required with `asChild`. An\n   * `aria-label` on the child also satisfies this (child props win).\n   */\n  'aria-label': string;\n}\n\n/**\n * @deprecated No longer needed — IconButton sets the icon size via context.\n * Pass `<Icon glyph={<YourIcon />} />` without a size prop.\n */\nexport const ICON_BUTTON_ICON_SIZES: Record<\n  IconButtonSize,\n  '12' | '16' | '20' | '24'\n> = {\n  'x-small': '12',\n  small: '16',\n  medium: '20',\n  large: '24',\n};\n\ntype IconButtonComponent = {\n  (\n    props: IconButtonAsChildProps & RefAttributes<HTMLElement>,\n  ): ReactElement | null;\n  (\n    props: IconButtonProps & RefAttributes<HTMLButtonElement>,\n  ): ReactElement | null;\n  displayName?: string;\n};\n\nfunction buildRootClass({\n  className = '',\n  count,\n  destructive = false,\n  padding = 'default',\n  rounded = false,\n  size = 'medium',\n  style = 'default',\n  active = false,\n  toggled,\n}: {\n  className?: string;\n  count?: number;\n  destructive?: boolean;\n  padding?: IconButtonPadding;\n  rounded?: boolean;\n  size?: IconButtonSize;\n  style?: IconButtonStyle;\n  active?: boolean;\n  toggled?: boolean;\n}): string {\n  return [\n    styles['icon-button'],\n    styles[`icon-button--size-${toKebab(size)}`],\n    padding === 'compact' ? styles['icon-button--padding-compact'] : '',\n    style === 'inverted' ? styles['icon-button--style-inverted'] : '',\n    destructive ? styles['icon-button--destructive'] : '',\n    rounded ? styles['icon-button--rounded'] : '',\n    toggled ? styles['icon-button--toggled'] : '',\n    active ? styles['icon-button--active'] : '',\n    count !== undefined ? styles['icon-button--has-count'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n}\n\n/**\n * Icon Buttons are compact, label-free actions for tight surfaces — channel headers, message\n * hover actions, modal dismissals, toolbar slots. They lean on the icon to communicate\n * intent, so every Icon Button must pair with a tooltip or `aria-label` that makes the\n * action explicit.\n *\n * Pass `asChild` with a single empty `<a>` or router `Link` child to render a navigational\n * icon control with Icon Button styling (no nested `<button>`).\n */\nconst IconButton = forwardRef(function IconButton(\n  props: IconButtonProps | IconButtonAsChildProps,\n  ref: Ref<HTMLButtonElement | HTMLElement>,\n) {\n  if (props.asChild) {\n    const {\n      active = false,\n      className = '',\n      count,\n      destructive = false,\n      icon,\n      loading = false,\n      padding = 'default',\n      rounded = false,\n      size = 'medium',\n      style = 'default',\n      unreadBadge = false,\n      disabled,\n      children,\n      'aria-label': ariaLabel,\n      asChild,\n      ...rest\n    } = props;\n    void asChild;\n\n    const rootClass = buildRootClass({\n      className,\n      count,\n      destructive,\n      padding,\n      rounded,\n      size,\n      style,\n      active,\n    });\n    const spinnerSize = ICON_BUTTON_ICON_SIZES[size];\n    const isDisabled = Boolean(disabled || loading);\n    const hasCount = count !== undefined;\n\n    const anatomy = (\n      <>\n        <span className={styles['icon-button__icon-slot']} aria-hidden>\n          {loading ? (\n            <Spinner size={spinnerSize} inverted={style === 'inverted'} />\n          ) : (\n            <IconSlotContext.Provider value={{ size: spinnerSize }}>\n              {icon}\n            </IconSlotContext.Provider>\n          )}\n          {unreadBadge && !loading && (\n            <span className={styles['icon-button__unread-badge']} />\n          )}\n        </span>\n        {hasCount && (\n          <span className={styles['icon-button__count']}>{count}</span>\n        )}\n      </>\n    );\n\n    return renderAsChild({\n      child: children,\n      props: {\n        ...rest,\n        className: rootClass,\n        'aria-label': ariaLabel,\n        'data-active': active ? 'true' : undefined,\n        ...(loading ? { 'aria-busy': true } : null),\n      },\n      ref,\n      content: anatomy,\n      disabled: isDisabled,\n      disabledClassName: styles['icon-button--disabled'],\n      warnOnChildContent: true,\n    });\n  }\n\n  const {\n    active = false,\n    className = '',\n    count,\n    destructive = false,\n    icon,\n    loading = false,\n    padding = 'default',\n    rounded = false,\n    size = 'medium',\n    style = 'default',\n    toggled,\n    unreadBadge = false,\n    disabled,\n    type = 'button',\n    'aria-label': ariaLabel,\n    asChild,\n    ...rest\n  } = props;\n  void asChild;\n\n  const rootClass = buildRootClass({\n    className,\n    count,\n    destructive,\n    padding,\n    rounded,\n    size,\n    style,\n    active,\n    toggled,\n  });\n  const spinnerSize = ICON_BUTTON_ICON_SIZES[size];\n  const isDisabled = Boolean(disabled || loading);\n  const hasCount = count !== undefined;\n\n  return (\n    <button\n      ref={ref as Ref<HTMLButtonElement>}\n      className={rootClass}\n      type={type}\n      disabled={isDisabled}\n      aria-label={ariaLabel}\n      aria-pressed={toggled === undefined ? undefined : toggled}\n      data-active={active ? 'true' : undefined}\n      {...rest}\n    >\n      <span className={styles['icon-button__icon-slot']} aria-hidden>\n        {loading ? (\n          <Spinner size={spinnerSize} inverted={style === 'inverted'} />\n        ) : (\n          <IconSlotContext.Provider value={{ size: spinnerSize }}>\n            {icon}\n          </IconSlotContext.Provider>\n        )}\n        {unreadBadge && !loading && (\n          <span className={styles['icon-button__unread-badge']} />\n        )}\n      </span>\n      {hasCount && (\n        <span className={styles['icon-button__count']}>{count}</span>\n      )}\n    </button>\n  );\n}) as IconButtonComponent;\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n"],"names":["ICON_BUTTON_ICON_SIZES","buildRootClass","className","count","destructive","padding","rounded","size","style","active","toggled","styles","toKebab","IconButton","forwardRef","props","ref","icon","loading","unreadBadge","disabled","children","ariaLabel","asChild","rest","rootClass","spinnerSize","isDisabled","hasCount","anatomy","jsxs","Fragment","jsx","Spinner","IconSlotContext","renderAsChild","type"],"mappings":"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"}

package/dist/components/icon-button/IconButton.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./IconButton.module.css');const t={"icon-button":"_icon-button_1klqk_2","icon-button--active":"_icon-button--active_1klqk_42","icon-button--toggled":"_icon-button--toggled_1klqk_42","icon-button__icon-slot":"_icon-button__icon-slot_1klqk_50","icon-button__unread-badge":"_icon-button__unread-badge_1klqk_57","icon-button__count":"_icon-button__count_1klqk_68","icon-button--size-x-small":"_icon-button--size-x-small_1klqk_72","icon-button--padding-compact":"_icon-button--padding-compact_1klqk_81","icon-button--size-small":"_icon-button--size-small_1klqk_86","icon-button--size-medium":"_icon-button--size-medium_1klqk_100","icon-button--size-large":"_icon-button--size-large_1klqk_114","icon-button--has-count":"_icon-button--has-count_1klqk_128","icon-button--rounded":"_icon-button--rounded_1klqk_132","icon-button--style-inverted":"_icon-button--style-inverted_1klqk_167","icon-button--destructive":"_icon-button--destructive_1klqk_211"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./IconButton.css');const t={"icon-button":"_icon-button_1d2d4_13","focus-ring-in":"_focus-ring-in_1d2d4_1","-host-shadow-a":"_-host-shadow-a_1d2d4_38","-host-shadow-b":"_-host-shadow-b_1d2d4_38","icon-button--disabled":"_icon-button--disabled_1d2d4_51","icon-button--active":"_icon-button--active_1d2d4_55","icon-button--toggled":"_icon-button--toggled_1d2d4_55","icon-button__icon-slot":"_icon-button__icon-slot_1d2d4_65","icon-button__unread-badge":"_icon-button__unread-badge_1d2d4_72","icon-button__count":"_icon-button__count_1d2d4_83","icon-button--size-x-small":"_icon-button--size-x-small_1d2d4_87","icon-button--padding-compact":"_icon-button--padding-compact_1d2d4_96","icon-button--size-small":"_icon-button--size-small_1d2d4_101","icon-button--size-medium":"_icon-button--size-medium_1d2d4_115","icon-button--size-large":"_icon-button--size-large_1d2d4_129","icon-button--has-count":"_icon-button--has-count_1d2d4_143","icon-button--rounded":"_icon-button--rounded_1d2d4_150","icon-button--style-inverted":"_icon-button--style-inverted_1d2d4_186","icon-button--destructive":"_icon-button--destructive_1d2d4_237"};exports.default=t;
 //# sourceMappingURL=IconButton.module.scss.cjs.map

package/dist/components/icon-button/IconButton.module.scss.js

@@ -1,19 +1,23 @@
-import './IconButton.module.css';const t = {
-  "icon-button": "_icon-button_1klqk_2",
-  "icon-button--active": "_icon-button--active_1klqk_42",
-  "icon-button--toggled": "_icon-button--toggled_1klqk_42",
-  "icon-button__icon-slot": "_icon-button__icon-slot_1klqk_50",
-  "icon-button__unread-badge": "_icon-button__unread-badge_1klqk_57",
-  "icon-button__count": "_icon-button__count_1klqk_68",
-  "icon-button--size-x-small": "_icon-button--size-x-small_1klqk_72",
-  "icon-button--padding-compact": "_icon-button--padding-compact_1klqk_81",
-  "icon-button--size-small": "_icon-button--size-small_1klqk_86",
-  "icon-button--size-medium": "_icon-button--size-medium_1klqk_100",
-  "icon-button--size-large": "_icon-button--size-large_1klqk_114",
-  "icon-button--has-count": "_icon-button--has-count_1klqk_128",
-  "icon-button--rounded": "_icon-button--rounded_1klqk_132",
-  "icon-button--style-inverted": "_icon-button--style-inverted_1klqk_167",
-  "icon-button--destructive": "_icon-button--destructive_1klqk_211"
+import './IconButton.css';const t = {
+  "icon-button": "_icon-button_1d2d4_13",
+  "focus-ring-in": "_focus-ring-in_1d2d4_1",
+  "-host-shadow-a": "_-host-shadow-a_1d2d4_38",
+  "-host-shadow-b": "_-host-shadow-b_1d2d4_38",
+  "icon-button--disabled": "_icon-button--disabled_1d2d4_51",
+  "icon-button--active": "_icon-button--active_1d2d4_55",
+  "icon-button--toggled": "_icon-button--toggled_1d2d4_55",
+  "icon-button__icon-slot": "_icon-button__icon-slot_1d2d4_65",
+  "icon-button__unread-badge": "_icon-button__unread-badge_1d2d4_72",
+  "icon-button__count": "_icon-button__count_1d2d4_83",
+  "icon-button--size-x-small": "_icon-button--size-x-small_1d2d4_87",
+  "icon-button--padding-compact": "_icon-button--padding-compact_1d2d4_96",
+  "icon-button--size-small": "_icon-button--size-small_1d2d4_101",
+  "icon-button--size-medium": "_icon-button--size-medium_1d2d4_115",
+  "icon-button--size-large": "_icon-button--size-large_1d2d4_129",
+  "icon-button--has-count": "_icon-button--has-count_1d2d4_143",
+  "icon-button--rounded": "_icon-button--rounded_1d2d4_150",
+  "icon-button--style-inverted": "_icon-button--style-inverted_1d2d4_186",
+  "icon-button--destructive": "_icon-button--destructive_1d2d4_237"
 };
 export {
   t as default

package/dist/components/icon-button/IconButton.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"IconButton.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/icon-button/index.d.ts

@@ -1,3 +1,3 @@
 export { default as IconButton } from './IconButton';
-export { ICON_BUTTON_ICON_SIZES, type IconButtonProps, type IconButtonSize, type IconButtonStyle, type IconButtonPadding, } from './IconButton';
+export { ICON_BUTTON_ICON_SIZES, type IconButtonProps, type IconButtonAsChildProps, type IconButtonSize, type IconButtonStyle, type IconButtonPadding, } from './IconButton';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/icon-button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EACL,sBAAsB,EACtB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,KAAK,iBAAiB,GACvB,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EACL,sBAAsB,EACtB,KAAK,eAAe,EACpB,KAAK,sBAAsB,EAC3B,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,KAAK,iBAAiB,GACvB,MAAM,cAAc,CAAC"}

package/dist/components/illustration/Illustration.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Illustration.cjs","sources":["../../../src/components/illustration/Illustration.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from './Illustration.module.scss';\n\nexport interface IllustrationProps {\n  /** SVG component from an illustration import (e.g. from `@/assets/illustrations/name.svg?react`). */\n  children: ReactNode;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Optional inline width (e.g. \"100%\", \"320px\"). */\n  width?: string;\n  /** Optional inline height. */\n  height?: string;\n  /** Accessible label; set to empty string for decorative only. */\n  'aria-label'?: string;\n}\n\n/**\n * Illustration is the wrapper for any of the brand SVG artworks shipped under\n * `@/assets/illustrations/`. It enforces a consistent size box, contains the SVG, and\n * exposes an accessible label so screen readers can describe the artwork (or skip it when\n * it's purely decorative).\n */\nexport default function Illustration({\n  children,\n  className = '',\n  width,\n  height,\n  'aria-label': ariaLabel,\n}: IllustrationProps) {\n  const rootClass = [styles.illustration, className].filter(Boolean).join(' ');\n  const hasLabel = ariaLabel !== undefined && ariaLabel !== '';\n\n  return (\n    <span\n      className={rootClass}\n      style={{ width, height }}\n      role={hasLabel ? 'img' : undefined}\n      aria-label={hasLabel ? ariaLabel : undefined}\n      aria-hidden={!hasLabel}\n    >\n      {children}\n    </span>\n  );\n}\n"],"names":["Illustration","children","className","width","height","ariaLabel","rootClass","styles","hasLabel","jsx"],"mappings":"6LAsBA,SAAwBA,EAAa,CACnC,SAAAC,EACA,UAAAC,EAAY,GACZ,MAAAC,EACA,OAAAC,EACA,aAAcC,CAChB,EAAsB,CACpB,MAAMC,EAAY,CAACC,EAAAA,QAAO,aAAcL,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EACrEM,EAAWH,IAAc,QAAaA,IAAc,GAE1D,OACEI,EAAAA,IAAC,OAAA,CACC,UAAWH,EACX,MAAO,CAAE,MAAAH,EAAO,OAAAC,CAAA,EAChB,KAAMI,EAAW,MAAQ,OACzB,aAAYA,EAAWH,EAAY,OACnC,cAAa,CAACG,EAEb,SAAAP,CAAA,CAAA,CAGP"}
+{"version":3,"file":"Illustration.cjs","sources":["../../../src/components/illustration/Illustration.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from './Illustration.module.scss';\n\nexport interface IllustrationProps {\n  /** SVG component from `@mattermost/compass-ui/illustrations/<name>`. */\n  children: ReactNode;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Optional inline width (e.g. \"100%\", \"320px\"). */\n  width?: string;\n  /** Optional inline height. */\n  height?: string;\n  /** Accessible label; set to empty string for decorative only. */\n  'aria-label'?: string;\n}\n\n/**\n * Illustration is the wrapper for brand SVG artwork shipped from\n * `@mattermost/compass-ui/illustrations/<name>`. It enforces a consistent size box, contains\n * the SVG, and exposes an accessible label so screen readers can describe the artwork (or\n * skip it when it's purely decorative).\n */\nexport default function Illustration({\n  children,\n  className = '',\n  width,\n  height,\n  'aria-label': ariaLabel,\n}: IllustrationProps) {\n  const rootClass = [styles.illustration, className].filter(Boolean).join(' ');\n  const hasLabel = ariaLabel !== undefined && ariaLabel !== '';\n\n  return (\n    <span\n      className={rootClass}\n      style={{ width, height }}\n      role={hasLabel ? 'img' : undefined}\n      aria-label={hasLabel ? ariaLabel : undefined}\n      aria-hidden={!hasLabel}\n    >\n      {children}\n    </span>\n  );\n}\n"],"names":["Illustration","children","className","width","height","ariaLabel","rootClass","styles","hasLabel","jsx"],"mappings":"6LAsBA,SAAwBA,EAAa,CACnC,SAAAC,EACA,UAAAC,EAAY,GACZ,MAAAC,EACA,OAAAC,EACA,aAAcC,CAChB,EAAsB,CACpB,MAAMC,EAAY,CAACC,EAAAA,QAAO,aAAcL,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EACrEM,EAAWH,IAAc,QAAaA,IAAc,GAE1D,OACEI,EAAAA,IAAC,OAAA,CACC,UAAWH,EACX,MAAO,CAAE,MAAAH,EAAO,OAAAC,CAAA,EAChB,KAAMI,EAAW,MAAQ,OACzB,aAAYA,EAAWH,EAAY,OACnC,cAAa,CAACG,EAEb,SAAAP,CAAA,CAAA,CAGP"}

package/dist/components/illustration/Illustration.css

@@ -0,0 +1 @@
+._illustration_ou0l5_13{display:inline-block;line-height:0}._illustration_ou0l5_13 svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}

package/dist/components/illustration/Illustration.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 export interface IllustrationProps {
-    /** SVG component from an illustration import (e.g. from `@/assets/illustrations/name.svg?react`). */
+    /** SVG component from `@mattermost/compass-ui/illustrations/<name>`. */
     children: ReactNode;
     /** Optional CSS class name. */
     className?: string;
@@ -12,10 +12,10 @@ export interface IllustrationProps {
     'aria-label'?: string;
 }
 /**
- * Illustration is the wrapper for any of the brand SVG artworks shipped under
- * `@/assets/illustrations/`. It enforces a consistent size box, contains the SVG, and
- * exposes an accessible label so screen readers can describe the artwork (or skip it when
- * it's purely decorative).
+ * Illustration is the wrapper for brand SVG artwork shipped from
+ * `@mattermost/compass-ui/illustrations/<name>`. It enforces a consistent size box, contains
+ * the SVG, and exposes an accessible label so screen readers can describe the artwork (or
+ * skip it when it's purely decorative).
  */
 export default function Illustration({ children, className, width, height, 'aria-label': ariaLabel, }: IllustrationProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Illustration.d.ts.map

package/dist/components/illustration/Illustration.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Illustration.d.ts","sourceRoot":"","sources":["../../../src/components/illustration/Illustration.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,iBAAiB;IAChC,qGAAqG;IACrG,QAAQ,EAAE,SAAS,CAAC;IACpB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,SAAc,EACd,KAAK,EACL,MAAM,EACN,YAAY,EAAE,SAAS,GACxB,EAAE,iBAAiB,2CAenB"}
+{"version":3,"file":"Illustration.d.ts","sourceRoot":"","sources":["../../../src/components/illustration/Illustration.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,iBAAiB;IAChC,wEAAwE;IACxE,QAAQ,EAAE,SAAS,CAAC;IACpB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,SAAc,EACd,KAAK,EACL,MAAM,EACN,YAAY,EAAE,SAAS,GACxB,EAAE,iBAAiB,2CAenB"}

package/dist/components/illustration/Illustration.js.map

@@ -1 +1 @@
-{"version":3,"file":"Illustration.js","sources":["../../../src/components/illustration/Illustration.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from './Illustration.module.scss';\n\nexport interface IllustrationProps {\n  /** SVG component from an illustration import (e.g. from `@/assets/illustrations/name.svg?react`). */\n  children: ReactNode;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Optional inline width (e.g. \"100%\", \"320px\"). */\n  width?: string;\n  /** Optional inline height. */\n  height?: string;\n  /** Accessible label; set to empty string for decorative only. */\n  'aria-label'?: string;\n}\n\n/**\n * Illustration is the wrapper for any of the brand SVG artworks shipped under\n * `@/assets/illustrations/`. It enforces a consistent size box, contains the SVG, and\n * exposes an accessible label so screen readers can describe the artwork (or skip it when\n * it's purely decorative).\n */\nexport default function Illustration({\n  children,\n  className = '',\n  width,\n  height,\n  'aria-label': ariaLabel,\n}: IllustrationProps) {\n  const rootClass = [styles.illustration, className].filter(Boolean).join(' ');\n  const hasLabel = ariaLabel !== undefined && ariaLabel !== '';\n\n  return (\n    <span\n      className={rootClass}\n      style={{ width, height }}\n      role={hasLabel ? 'img' : undefined}\n      aria-label={hasLabel ? ariaLabel : undefined}\n      aria-hidden={!hasLabel}\n    >\n      {children}\n    </span>\n  );\n}\n"],"names":["Illustration","children","className","width","height","ariaLabel","rootClass","styles","hasLabel","jsx"],"mappings":";;AAsBA,SAAwBA,EAAa;AAAA,EACnC,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAcC;AAChB,GAAsB;AACpB,QAAMC,IAAY,CAACC,EAAO,cAAcL,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GACrEM,IAAWH,MAAc,UAAaA,MAAc;AAE1D,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWH;AAAA,MACX,OAAO,EAAE,OAAAH,GAAO,QAAAC,EAAA;AAAA,MAChB,MAAMI,IAAW,QAAQ;AAAA,MACzB,cAAYA,IAAWH,IAAY;AAAA,MACnC,eAAa,CAACG;AAAA,MAEb,UAAAP;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Illustration.js","sources":["../../../src/components/illustration/Illustration.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from './Illustration.module.scss';\n\nexport interface IllustrationProps {\n  /** SVG component from `@mattermost/compass-ui/illustrations/<name>`. */\n  children: ReactNode;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Optional inline width (e.g. \"100%\", \"320px\"). */\n  width?: string;\n  /** Optional inline height. */\n  height?: string;\n  /** Accessible label; set to empty string for decorative only. */\n  'aria-label'?: string;\n}\n\n/**\n * Illustration is the wrapper for brand SVG artwork shipped from\n * `@mattermost/compass-ui/illustrations/<name>`. It enforces a consistent size box, contains\n * the SVG, and exposes an accessible label so screen readers can describe the artwork (or\n * skip it when it's purely decorative).\n */\nexport default function Illustration({\n  children,\n  className = '',\n  width,\n  height,\n  'aria-label': ariaLabel,\n}: IllustrationProps) {\n  const rootClass = [styles.illustration, className].filter(Boolean).join(' ');\n  const hasLabel = ariaLabel !== undefined && ariaLabel !== '';\n\n  return (\n    <span\n      className={rootClass}\n      style={{ width, height }}\n      role={hasLabel ? 'img' : undefined}\n      aria-label={hasLabel ? ariaLabel : undefined}\n      aria-hidden={!hasLabel}\n    >\n      {children}\n    </span>\n  );\n}\n"],"names":["Illustration","children","className","width","height","ariaLabel","rootClass","styles","hasLabel","jsx"],"mappings":";;AAsBA,SAAwBA,EAAa;AAAA,EACnC,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAcC;AAChB,GAAsB;AACpB,QAAMC,IAAY,CAACC,EAAO,cAAcL,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GACrEM,IAAWH,MAAc,UAAaA,MAAc;AAE1D,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWH;AAAA,MACX,OAAO,EAAE,OAAAH,GAAO,QAAAC,EAAA;AAAA,MAChB,MAAMI,IAAW,QAAQ;AAAA,MACzB,cAAYA,IAAWH,IAAY;AAAA,MACnC,eAAa,CAACG;AAAA,MAEb,UAAAP;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/illustration/Illustration.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Illustration.module.css');const t="_illustration_xetnl_2",l={illustration:t};exports.default=l;exports.illustration=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Illustration.css');const t="_illustration_ou0l5_13",l={illustration:t};exports.default=l;exports.illustration=t;
 //# sourceMappingURL=Illustration.module.scss.cjs.map

package/dist/components/illustration/Illustration.module.scss.js

@@ -1,4 +1,4 @@
-import './Illustration.module.css';const t = "_illustration_xetnl_2", l = {
+import './Illustration.css';const t = "_illustration_ou0l5_13", l = {
   illustration: t
 };
 export {