@mattermost/compass-ui 0.1.0-alpha.14 → 0.1.0-alpha.15

package/dist/components/button/Button.js

@@ -1,60 +1,122 @@
-import { jsxs as y, jsx as e } from "react/jsx-runtime";
-import { forwardRef as P, isValidElement as c } from "react";
-import { IconSlotContext as m } from "../icon/Icon.js";
-import w from "../spinner/Spinner.js";
-import { toKebab as d } from "../../utils/string.js";
-import t from "./Button.module.scss.js";
-const E = {
+import { jsx as e, jsxs as z, Fragment as G } from "react/jsx-runtime";
+import { forwardRef as H, isValidElement as o } from "react";
+import { IconSlotContext as r } from "../icon/Icon.js";
+import C from "../spinner/Spinner.js";
+import { renderAsChild as J } from "../../utils/slot.js";
+import { toKebab as I } from "../../utils/string.js";
+import a from "./Button.module.scss.js";
+const y = {
   "x-small": "12",
   small: "12",
   medium: "16",
   large: "20"
-}, I = P(function({
-  appearance: n = "default",
-  className: p = "",
-  destructive: b = !1,
-  emphasis: r = "primary",
-  children: f,
-  leadingIcon: a,
-  loading: s = !1,
-  size: i = "medium",
-  trailingIcon: l,
-  disabled: v,
-  type: h = "button",
-  ..._
-}, C) {
-  const o = E[i], N = t[`button--emphasis-${d(r)}`], x = t[`button--size-${d(i)}`], z = n === "inverted" ? t["button--appearance-inverted"] : "", S = b ? t["button--destructive"] : "", B = [
-    t.button,
-    N,
-    x,
-    z,
-    S,
-    p
-  ].filter(Boolean).join(" "), u = r !== "link", j = s || u && c(a);
-  return /* @__PURE__ */ y(
+};
+function S({
+  appearance: m = "default",
+  className: i = "",
+  destructive: n = !1,
+  emphasis: t = "primary",
+  size: d = "medium"
+}) {
+  return [
+    a.button,
+    a[`button--emphasis-${I(t)}`],
+    a[`button--size-${I(d)}`],
+    m === "inverted" ? a["button--appearance-inverted"] : "",
+    n ? a["button--destructive"] : "",
+    i
+  ].filter(Boolean).join(" ");
+}
+const Q = H(function(i, n) {
+  if (i.asChild) {
+    const {
+      appearance: f = "default",
+      className: L = "",
+      destructive: R = !1,
+      emphasis: $ = "primary",
+      children: F,
+      leadingIcon: v,
+      loading: s = !1,
+      size: g = "medium",
+      trailingIcon: N,
+      disabled: K,
+      asChild: W,
+      ...M
+    } = i, O = S({
+      appearance: f,
+      className: L,
+      destructive: R,
+      emphasis: $,
+      size: g
+    }), u = y[g], V = s || o(v), Z = !!(K || s), _ = F, k = V ? /* @__PURE__ */ e("span", { className: a["button__icon-slot"], "aria-hidden": !0, children: s ? /* @__PURE__ */ e(
+      C,
+      {
+        size: u,
+        inverted: f === "inverted"
+      }
+    ) : /* @__PURE__ */ e(r.Provider, { value: { size: u }, children: v }) }) : null, q = !s && o(N) ? /* @__PURE__ */ e("span", { className: a["button__icon-slot"], "aria-hidden": !0, children: /* @__PURE__ */ e(r.Provider, { value: { size: u }, children: N }) }) : null;
+    return J({
+      child: _,
+      props: {
+        ...M,
+        className: O,
+        ...s ? { "aria-busy": !0 } : null
+      },
+      ref: n,
+      content: /* @__PURE__ */ z(G, { children: [
+        k,
+        /* @__PURE__ */ e("span", { className: a.button__label, children: _.props.children }),
+        q
+      ] }),
+      disabled: Z,
+      disabledClassName: a["button--disabled"]
+    });
+  }
+  const {
+    appearance: t = "default",
+    className: d = "",
+    destructive: B = !1,
+    emphasis: x = "primary",
+    children: P,
+    leadingIcon: p,
+    loading: l = !1,
+    size: h = "medium",
+    trailingIcon: b,
+    disabled: j,
+    type: w = "button",
+    asChild: T,
+    ...D
+  } = i, A = S({
+    appearance: t,
+    className: d,
+    destructive: B,
+    emphasis: x,
+    size: h
+  }), c = y[h], E = l || o(p);
+  return /* @__PURE__ */ z(
     "button",
     {
-      ref: C,
-      className: B,
-      type: h,
-      disabled: v || s,
-      ..._,
+      ref: n,
+      className: A,
+      type: w,
+      disabled: !!(j || l),
+      ...D,
       children: [
-        j ? /* @__PURE__ */ e("span", { className: t["button__icon-slot"], "aria-hidden": !0, children: s ? /* @__PURE__ */ e(
-          w,
+        E ? /* @__PURE__ */ e("span", { className: a["button__icon-slot"], "aria-hidden": !0, children: l ? /* @__PURE__ */ e(
+          C,
           {
-            size: o,
-            inverted: n === "inverted"
+            size: c,
+            inverted: t === "inverted"
           }
-        ) : /* @__PURE__ */ e(m.Provider, { value: { size: o }, children: a }) }) : null,
-        /* @__PURE__ */ e("span", { className: t.button__label, children: f }),
-        u && !s && c(l) ? /* @__PURE__ */ e("span", { className: t["button__icon-slot"], "aria-hidden": !0, children: /* @__PURE__ */ e(m.Provider, { value: { size: o }, children: l }) }) : null
+        ) : /* @__PURE__ */ e(r.Provider, { value: { size: c }, children: p }) }) : null,
+        /* @__PURE__ */ e("span", { className: a.button__label, children: P }),
+        !l && o(b) ? /* @__PURE__ */ e("span", { className: a["button__icon-slot"], "aria-hidden": !0, children: /* @__PURE__ */ e(r.Provider, { value: { size: c }, children: b }) }) : null
       ]
     }
   );
 });
-I.displayName = "Button";
+Q.displayName = "Button";
 export {
-  I as default
+  Q as default
 };
 //# sourceMappingURL=Button.js.map

package/dist/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import {\n  forwardRef,\n  isValidElement,\n  type ButtonHTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport type { IconSize } from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport type { SpinnerSize } from '@/components/spinner/Spinner';\nimport { toKebab } from '@/utils/string';\nimport styles from './Button.module.scss';\n\nexport type ButtonEmphasis =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'quaternary'\n  | 'link';\n\nexport type ButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\nexport type ButtonAppearance = 'default' | 'inverted';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** default | inverted (for use on dark backgrounds). Maps to Figma \"Style\". */\n  appearance?: ButtonAppearance;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Button label. */\n  children: ReactNode;\n  /** When true, uses destructive (danger) styling. */\n  destructive?: boolean;\n  /** Visual emphasis. Default: primary. */\n  emphasis?: ButtonEmphasis;\n  /** Leading icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */\n  leadingIcon?: ReactNode;\n  /** When true, shows a Spinner in the leading slot and disables the button. */\n  loading?: boolean;\n  /** Size variant. Default: medium. */\n  size?: ButtonSize;\n  /** Trailing icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */\n  trailingIcon?: ReactNode;\n}\n\nconst SIZE_ICON_MAP: Record<ButtonSize, IconSize> = {\n  'x-small': '12',\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\n/**\n * Buttons let people take actions or make decisions with a single tap or click — saving a\n * form, sending a message, confirming a dialog. Compass ships several button variants, each\n * with the same anatomy and rhythm so they feel like members of the same family.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    appearance = 'default',\n    className = '',\n    destructive = false,\n    emphasis = 'primary',\n    children,\n    leadingIcon,\n    loading = false,\n    size = 'medium',\n    trailingIcon,\n    disabled,\n    type = 'button',\n    ...rest\n  },\n  ref,\n) {\n  const iconSize = SIZE_ICON_MAP[size];\n  const emphasisClass = styles[`button--emphasis-${toKebab(emphasis)}`];\n  const sizeClass = styles[`button--size-${toKebab(size)}`];\n  const appearanceClass =\n    appearance === 'inverted' ? styles['button--appearance-inverted'] : '';\n  const destructiveClass = destructive ? styles['button--destructive'] : '';\n\n  const rootClass = [\n    styles.button,\n    emphasisClass,\n    sizeClass,\n    appearanceClass,\n    destructiveClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const supportsIcons = emphasis !== 'link';\n  const showLeadingSlot =\n    loading || (supportsIcons && isValidElement(leadingIcon));\n\n  return (\n    <button\n      ref={ref}\n      className={rootClass}\n      type={type}\n      disabled={disabled || loading}\n      {...rest}\n    >\n      {showLeadingSlot ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          {loading ? (\n            <Spinner\n              size={iconSize as SpinnerSize}\n              inverted={appearance === 'inverted'}\n            />\n          ) : (\n            <IconSlotContext.Provider value={{ size: iconSize }}>\n              {leadingIcon}\n            </IconSlotContext.Provider>\n          )}\n        </span>\n      ) : null}\n      <span className={styles['button__label']}>{children}</span>\n      {supportsIcons && !loading && isValidElement(trailingIcon) ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: iconSize }}>\n            {trailingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      ) : null}\n    </button>\n  );\n});\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["SIZE_ICON_MAP","Button","forwardRef","appearance","className","destructive","emphasis","children","leadingIcon","loading","size","trailingIcon","disabled","type","rest","ref","iconSize","emphasisClass","styles","toKebab","sizeClass","appearanceClass","destructiveClass","rootClass","supportsIcons","showLeadingSlot","isValidElement","jsxs","jsx","Spinner","IconSlotContext"],"mappings":";;;;;;AA6CA,MAAMA,IAA8C;AAAA,EAClD,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,GAOMC,IAASC,EAA2C,SACxD;AAAA,EACE,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAWhB,EAAcU,CAAI,GAC7BO,IAAgBC,EAAO,oBAAoBC,EAAQb,CAAQ,CAAC,EAAE,GAC9Dc,IAAYF,EAAO,gBAAgBC,EAAQT,CAAI,CAAC,EAAE,GAClDW,IACJlB,MAAe,aAAae,EAAO,6BAA6B,IAAI,IAChEI,IAAmBjB,IAAca,EAAO,qBAAqB,IAAI,IAEjEK,IAAY;AAAA,IAChBL,EAAO;AAAA,IACPD;AAAA,IACAG;AAAA,IACAC;AAAA,IACAC;AAAA,IACAlB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELoB,IAAgBlB,MAAa,QAC7BmB,IACJhB,KAAYe,KAAiBE,EAAelB,CAAW;AAEzD,SACE,gBAAAmB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAZ;AAAA,MACA,WAAWQ;AAAA,MACX,MAAAV;AAAA,MACA,UAAUD,KAAYH;AAAA,MACrB,GAAGK;AAAA,MAEH,UAAA;AAAA,QAAAW,IACC,gBAAAG,EAAC,UAAK,WAAWV,EAAO,mBAAmB,GAAG,eAAW,IACtD,UAAAT,IACC,gBAAAmB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,MAAMb;AAAA,YACN,UAAUb,MAAe;AAAA,UAAA;AAAA,QAAA,IAG3B,gBAAAyB,EAACE,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAMd,EAAA,GACtC,UAAAR,GACH,EAAA,CAEJ,IACE;AAAA,0BACH,QAAA,EAAK,WAAWU,EAAO,eAAmB,UAAAX,GAAS;AAAA,QACnDiB,KAAiB,CAACf,KAAWiB,EAAef,CAAY,IACvD,gBAAAiB,EAAC,QAAA,EAAK,WAAWV,EAAO,mBAAmB,GAAG,eAAW,IACvD,UAAA,gBAAAU,EAACE,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAMd,EAAA,GACtC,UAAAL,EAAA,CACH,EAAA,CACF,IACE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AAEDV,EAAO,cAAc;"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import {\n  forwardRef,\n  isValidElement,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefAttributes,\n} from 'react';\nimport type { IconSize } from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport type { SpinnerSize } from '@/components/spinner/Spinner';\nimport { renderAsChild } from '@/utils/slot';\nimport { toKebab } from '@/utils/string';\nimport styles from './Button.module.scss';\n\nexport type ButtonEmphasis =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'quaternary'\n  | 'link';\n\nexport type ButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\nexport type ButtonAppearance = 'default' | 'inverted';\n\ninterface ButtonOwnProps {\n  /** default | inverted (for use on dark backgrounds). Maps to Figma \"Style\". */\n  appearance?: ButtonAppearance;\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, uses destructive (danger) styling. */\n  destructive?: boolean;\n  /** Visual emphasis. Default: primary. */\n  emphasis?: ButtonEmphasis;\n  /** Leading icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */\n  leadingIcon?: ReactNode;\n  /** When true, shows a Spinner in the leading slot and disables the button (or blocks navigation when `asChild`). */\n  loading?: boolean;\n  /** Size variant. Default: medium. */\n  size?: ButtonSize;\n  /** Trailing icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */\n  trailingIcon?: ReactNode;\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 ButtonProps\n  extends ButtonOwnProps, ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * When true, merges Button 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  /** Button label. */\n  children: ReactNode;\n}\n\nexport interface ButtonAsChildProps\n  extends\n    ButtonOwnProps,\n    Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'> {\n  /**\n   * Merges Button 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` — it is not forwarded.\n   */\n  asChild: true;\n  /** Single element to render as the Button (e.g. `<a>` or `<Link>`). Its children become the label. */\n  children: ReactElement;\n}\n\nconst SIZE_ICON_MAP: Record<ButtonSize, IconSize> = {\n  'x-small': '12',\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\ntype ButtonComponent = {\n  (props: ButtonAsChildProps & RefAttributes<HTMLElement>): ReactElement | null;\n  (props: ButtonProps & RefAttributes<HTMLButtonElement>): ReactElement | null;\n  displayName?: string;\n};\n\nfunction buildRootClass({\n  appearance = 'default',\n  className = '',\n  destructive = false,\n  emphasis = 'primary',\n  size = 'medium',\n}: {\n  appearance?: ButtonAppearance;\n  className?: string;\n  destructive?: boolean;\n  emphasis?: ButtonEmphasis;\n  size?: ButtonSize;\n}): string {\n  return [\n    styles.button,\n    styles[`button--emphasis-${toKebab(emphasis)}`],\n    styles[`button--size-${toKebab(size)}`],\n    appearance === 'inverted' ? styles['button--appearance-inverted'] : '',\n    destructive ? styles['button--destructive'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n}\n\n/**\n * Buttons let people take actions or make decisions with a single tap or click — saving a\n * form, sending a message, confirming a dialog. Compass ships several button variants, each\n * with the same anatomy and rhythm so they feel like members of the same family.\n *\n * Pass `asChild` with a single `<a>` or router `Link` child to render a navigational CTA\n * with Button styling and anatomy (no nested `<button>`).\n */\nconst Button = forwardRef(function Button(\n  props: ButtonProps | ButtonAsChildProps,\n  ref: Ref<HTMLButtonElement | HTMLElement>,\n) {\n  if (props.asChild) {\n    const {\n      appearance = 'default',\n      className = '',\n      destructive = false,\n      emphasis = 'primary',\n      children,\n      leadingIcon,\n      loading = false,\n      size = 'medium',\n      trailingIcon,\n      disabled,\n      asChild,\n      ...rest\n    } = props;\n    void asChild;\n\n    const rootClass = buildRootClass({\n      appearance,\n      className,\n      destructive,\n      emphasis,\n      size,\n    });\n    const iconSize = SIZE_ICON_MAP[size];\n    const showLeadingSlot = loading || isValidElement(leadingIcon);\n    const isDisabled = Boolean(disabled || loading);\n    const child = children as ReactElement<{ children?: ReactNode }>;\n\n    const leading = showLeadingSlot ? (\n      <span className={styles['button__icon-slot']} aria-hidden>\n        {loading ? (\n          <Spinner\n            size={iconSize as SpinnerSize}\n            inverted={appearance === 'inverted'}\n          />\n        ) : (\n          <IconSlotContext.Provider value={{ size: iconSize }}>\n            {leadingIcon}\n          </IconSlotContext.Provider>\n        )}\n      </span>\n    ) : null;\n\n    const trailing =\n      !loading && isValidElement(trailingIcon) ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: iconSize }}>\n            {trailingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      ) : null;\n\n    return renderAsChild({\n      child,\n      props: {\n        ...rest,\n        className: rootClass,\n        ...(loading ? { 'aria-busy': true } : null),\n      },\n      ref,\n      content: (\n        <>\n          {leading}\n          <span className={styles['button__label']}>\n            {child.props.children}\n          </span>\n          {trailing}\n        </>\n      ),\n      disabled: isDisabled,\n      disabledClassName: styles['button--disabled'],\n    });\n  }\n\n  const {\n    appearance = 'default',\n    className = '',\n    destructive = false,\n    emphasis = 'primary',\n    children,\n    leadingIcon,\n    loading = false,\n    size = 'medium',\n    trailingIcon,\n    disabled,\n    type = 'button',\n    asChild,\n    ...rest\n  } = props;\n  void asChild;\n\n  const rootClass = buildRootClass({\n    appearance,\n    className,\n    destructive,\n    emphasis,\n    size,\n  });\n  const iconSize = SIZE_ICON_MAP[size];\n  const showLeadingSlot = loading || isValidElement(leadingIcon);\n  const isDisabled = Boolean(disabled || loading);\n\n  return (\n    <button\n      ref={ref as Ref<HTMLButtonElement>}\n      className={rootClass}\n      type={type}\n      disabled={isDisabled}\n      {...rest}\n    >\n      {showLeadingSlot ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          {loading ? (\n            <Spinner\n              size={iconSize as SpinnerSize}\n              inverted={appearance === 'inverted'}\n            />\n          ) : (\n            <IconSlotContext.Provider value={{ size: iconSize }}>\n              {leadingIcon}\n            </IconSlotContext.Provider>\n          )}\n        </span>\n      ) : null}\n      <span className={styles['button__label']}>{children}</span>\n      {!loading && isValidElement(trailingIcon) ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: iconSize }}>\n            {trailingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      ) : null}\n    </button>\n  );\n}) as ButtonComponent;\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["SIZE_ICON_MAP","buildRootClass","appearance","className","destructive","emphasis","size","styles","toKebab","Button","forwardRef","props","ref","children","leadingIcon","loading","trailingIcon","disabled","asChild","rest","rootClass","iconSize","showLeadingSlot","isValidElement","isDisabled","child","leading","jsx","Spinner","IconSlotContext","trailing","renderAsChild","jsxs","Fragment","type"],"mappings":"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"}

package/dist/components/button/Button.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Button.css');const t="_button_doayp_2",o="_button__label_doayp_24",e={button:t,button__label:o,"button__icon-slot":"_button__icon-slot_doayp_27","button--size-x-small":"_button--size-x-small_doayp_33","button--size-small":"_button--size-small_doayp_40","button--size-medium":"_button--size-medium_doayp_47","button--size-large":"_button--size-large_doayp_54","button--emphasis-primary":"_button--emphasis-primary_doayp_61","button--emphasis-secondary":"_button--emphasis-secondary_doayp_75","button--emphasis-tertiary":"_button--emphasis-tertiary_doayp_91","button--emphasis-quaternary":"_button--emphasis-quaternary_doayp_105","button--emphasis-link":"_button--emphasis-link_doayp_118","button--destructive":"_button--destructive_doayp_130","button--appearance-inverted":"_button--appearance-inverted_doayp_193"};exports.button=t;exports.button__label=o;exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Button.css');const t="_button_aa8j5_2",a="_button__label_aa8j5_31",e={button:t,"button--disabled":"_button--disabled_aa8j5_28",button__label:a,"button__icon-slot":"_button__icon-slot_aa8j5_35","button--size-x-small":"_button--size-x-small_aa8j5_42","button--size-small":"_button--size-small_aa8j5_49","button--size-medium":"_button--size-medium_aa8j5_56","button--size-large":"_button--size-large_aa8j5_63","button--emphasis-primary":"_button--emphasis-primary_aa8j5_70","button--emphasis-secondary":"_button--emphasis-secondary_aa8j5_84","button--emphasis-tertiary":"_button--emphasis-tertiary_aa8j5_100","button--emphasis-quaternary":"_button--emphasis-quaternary_aa8j5_114","button--emphasis-link":"_button--emphasis-link_aa8j5_127","button--destructive":"_button--destructive_aa8j5_141","button--appearance-inverted":"_button--appearance-inverted_aa8j5_204"};exports.button=t;exports.button__label=a;exports.default=e;
 //# sourceMappingURL=Button.module.scss.cjs.map

package/dist/components/button/Button.module.scss.js

@@ -1,22 +1,23 @@
-import './Button.css';const t = "_button_doayp_2", o = "_button__label_doayp_24", _ = {
+import './Button.css';const t = "_button_aa8j5_2", a = "_button__label_aa8j5_31", _ = {
   button: t,
-  button__label: o,
-  "button__icon-slot": "_button__icon-slot_doayp_27",
-  "button--size-x-small": "_button--size-x-small_doayp_33",
-  "button--size-small": "_button--size-small_doayp_40",
-  "button--size-medium": "_button--size-medium_doayp_47",
-  "button--size-large": "_button--size-large_doayp_54",
-  "button--emphasis-primary": "_button--emphasis-primary_doayp_61",
-  "button--emphasis-secondary": "_button--emphasis-secondary_doayp_75",
-  "button--emphasis-tertiary": "_button--emphasis-tertiary_doayp_91",
-  "button--emphasis-quaternary": "_button--emphasis-quaternary_doayp_105",
-  "button--emphasis-link": "_button--emphasis-link_doayp_118",
-  "button--destructive": "_button--destructive_doayp_130",
-  "button--appearance-inverted": "_button--appearance-inverted_doayp_193"
+  "button--disabled": "_button--disabled_aa8j5_28",
+  button__label: a,
+  "button__icon-slot": "_button__icon-slot_aa8j5_35",
+  "button--size-x-small": "_button--size-x-small_aa8j5_42",
+  "button--size-small": "_button--size-small_aa8j5_49",
+  "button--size-medium": "_button--size-medium_aa8j5_56",
+  "button--size-large": "_button--size-large_aa8j5_63",
+  "button--emphasis-primary": "_button--emphasis-primary_aa8j5_70",
+  "button--emphasis-secondary": "_button--emphasis-secondary_aa8j5_84",
+  "button--emphasis-tertiary": "_button--emphasis-tertiary_aa8j5_100",
+  "button--emphasis-quaternary": "_button--emphasis-quaternary_aa8j5_114",
+  "button--emphasis-link": "_button--emphasis-link_aa8j5_127",
+  "button--destructive": "_button--destructive_aa8j5_141",
+  "button--appearance-inverted": "_button--appearance-inverted_aa8j5_204"
 };
 export {
   t as button,
-  o as button__label,
+  a as button__label,
   _ as default
 };
 //# sourceMappingURL=Button.module.scss.js.map

package/dist/components/button/Button.module.scss.js.map

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

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

@@ -1,4 +1,4 @@
 export { default as Button } from './Button';
-export type { ButtonProps, ButtonEmphasis, ButtonSize, ButtonAppearance, } from './Button';
+export type { ButtonProps, ButtonAsChildProps, ButtonEmphasis, ButtonSize, ButtonAppearance, } from './Button';
 export { default as btnStyles } from './Button.module.scss';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,YAAY,EACV,WAAW,EACX,cAAc,EACd,UAAU,EACV,gBAAgB,GACjB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,YAAY,EACV,WAAW,EACX,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,gBAAgB,GACjB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC"}

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"),R=require("react"),E=require("../icon/Icon.cjs"),M=require("../spinner/Spinner.cjs"),P=require("../../utils/string.cjs"),t=require("./IconButton.module.scss.cjs"),d={"x-small":"12",small:"16",medium:"20",large:"24"},r=R.forwardRef(function({active:o=!1,className:f="",count:a,destructive:b=!1,icon:m,loading:n=!1,padding:v="default",rounded:C=!1,size:u="medium",style:i="default",toggled:s,unreadBadge:_=!1,disabled:p,type:I="button","aria-label":N,...j},x){const S=t.default[`icon-button--size-${P.toKebab(u)}`],h=v==="compact"?t.default["icon-button--padding-compact"]:"",B=i==="inverted"?t.default["icon-button--style-inverted"]:"",O=b?t.default["icon-button--destructive"]:"",q=C?t.default["icon-button--rounded"]:"",g=s?t.default["icon-button--toggled"]:"",T=o?t.default["icon-button--active"]:"",l=a!==void 0,z=l?t.default["icon-button--has-count"]:"",y=[t.default["icon-button"],S,h,B,O,q,g,T,z,f].filter(Boolean).join(" "),c=d[u];return e.jsxs("button",{ref:x,className:y,type:I,disabled:p||n,"aria-label":N,"aria-pressed":s===void 0?void 0:s,"data-active":o?"true":void 0,...j,children:[e.jsxs("span",{className:t.default["icon-button__icon-slot"],"aria-hidden":!0,children:[n?e.jsx(M.default,{size:c,inverted:i==="inverted"}):e.jsx(E.IconSlotContext.Provider,{value:{size:c},children:m}),_&&!n&&e.jsx("span",{className:t.default["icon-button__unread-badge"]})]}),l&&e.jsx("span",{className:t.default["icon-button__count"],children:a})]})});r.displayName="IconButton";exports.ICON_BUTTON_ICON_SIZES=d;exports.default=r;
+"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 { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\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. 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. */\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). */\n  style?: IconButtonStyle;\n  /** When true, shows toggled/selected state. Figma: Toggled = On. When omitted, the control is not a toggle. */\n  toggled?: boolean;\n  /** When true, shows a small unread dot over the icon. Figma: Unread Badge. */\n  unreadBadge?: boolean;\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\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 */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  function IconButton(\n    {\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      ...rest\n    },\n    ref,\n  ) {\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    const spinnerSize = ICON_BUTTON_ICON_SIZES[size];\n\n    return (\n      <button\n        ref={ref}\n        className={rootClass}\n        type={type}\n        disabled={disabled || loading}\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  },\n);\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n"],"names":["ICON_BUTTON_ICON_SIZES","IconButton","forwardRef","active","className","count","destructive","icon","loading","padding","rounded","size","style","toggled","unreadBadge","disabled","type","ariaLabel","rest","ref","sizeClass","styles","toKebab","paddingClass","styleClass","destructiveClass","roundedClass","toggledClass","activeClass","hasCount","hasCountClass","rootClass","spinnerSize","jsxs","Spinner","jsx","IconSlotContext"],"mappings":"oTA+CaA,EAGT,CACF,UAAW,KACX,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAQMC,EAAaC,EAAAA,WACjB,SACE,CACE,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,MAAAC,EACA,YAAAC,EAAc,GACd,KAAAC,EACA,QAAAC,EAAU,GACV,QAAAC,EAAU,UACV,QAAAC,EAAU,GACV,KAAAC,EAAO,SACP,MAAAC,EAAQ,UACR,QAAAC,EACA,YAAAC,EAAc,GACd,SAAAC,EACA,KAAAC,EAAO,SACP,aAAcC,EACd,GAAGC,CAAA,EAELC,EACA,CACA,MAAMC,EAAYC,EAAAA,QAAO,qBAAqBC,EAAAA,QAAQX,CAAI,CAAC,EAAE,EACvDY,EACJd,IAAY,UAAYY,EAAAA,QAAO,8BAA8B,EAAI,GAC7DG,EACJZ,IAAU,WAAaS,EAAAA,QAAO,6BAA6B,EAAI,GAC3DI,EAAmBnB,EACrBe,UAAO,0BAA0B,EACjC,GACEK,EAAehB,EAAUW,UAAO,sBAAsB,EAAI,GAC1DM,EAAed,EAAUQ,UAAO,sBAAsB,EAAI,GAC1DO,EAAczB,EAASkB,UAAO,qBAAqB,EAAI,GACvDQ,EAAWxB,IAAU,OACrByB,EAAgBD,EAAWR,UAAO,wBAAwB,EAAI,GAE9DU,EAAY,CAChBV,EAAAA,QAAO,aAAa,EACpBD,EACAG,EACAC,EACAC,EACAC,EACAC,EACAC,EACAE,EACA1B,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEL4B,EAAchC,EAAuBW,CAAI,EAE/C,OACEsB,EAAAA,KAAC,SAAA,CACC,IAAAd,EACA,UAAWY,EACX,KAAAf,EACA,SAAUD,GAAYP,EACtB,aAAYS,EACZ,eAAcJ,IAAY,OAAY,OAAYA,EAClD,cAAaV,EAAS,OAAS,OAC9B,GAAGe,EAEJ,SAAA,CAAAe,OAAC,QAAK,UAAWZ,EAAAA,QAAO,wBAAwB,EAAG,cAAW,GAC3D,SAAA,CAAAb,QACE0B,EAAAA,QAAA,CAAQ,KAAMF,EAAa,SAAUpB,IAAU,WAAY,EAE5DuB,EAAAA,IAACC,kBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAMJ,CAAA,EACtC,SAAAzB,EACH,EAEDO,GAAe,CAACN,GACf2B,MAAC,QAAK,UAAWd,EAAAA,QAAO,2BAA2B,CAAA,CAAG,CAAA,EAE1D,EACCQ,GACCM,EAAAA,IAAC,OAAA,CAAK,UAAWd,EAAAA,QAAO,oBAAoB,EAAI,SAAAhB,CAAA,CAAM,CAAA,CAAA,CAAA,CAI9D,CACF,EAEAJ,EAAW,YAAc"}
+{"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

@@ -1 +1 @@
-._icon-button_mytxt_2{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;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);background-color:transparent;color:rgba(var(--center-channel-color-rgb),.64);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._icon-button_mytxt_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._icon-button_mytxt_2:disabled{cursor:not-allowed;opacity:.5}._icon-button_mytxt_2:hover:not(:disabled):not(:active):not(._icon-button--active_mytxt_25):not(._icon-button--toggled_mytxt_25){background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.75)}._icon-button_mytxt_2:active:not(:disabled):not(._icon-button--toggled_mytxt_25){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._icon-button__icon-slot_mytxt_33{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._icon-button__unread-badge_mytxt_40{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_mytxt_51{font-weight:var(--font-weight-semibold);color:inherit}._icon-button--size-x-small_mytxt_55{width:24px;height:24px;padding:var(--spacing-xxs)}._icon-button--size-x-small_mytxt_55 ._icon-button__count_mytxt_51{font-size:var(--font-size-75);line-height:12px}._icon-button--size-x-small_mytxt_55._icon-button--padding-compact_mytxt_64{width:20px;height:20px;padding:var(--spacing-xxxs)}._icon-button--size-small_mytxt_69{width:32px;height:32px;padding:var(--spacing-xs)}._icon-button--size-small_mytxt_69 ._icon-button__count_mytxt_51{font-size:var(--font-size-100);line-height:14px}._icon-button--size-small_mytxt_69._icon-button--padding-compact_mytxt_64{width:28px;height:28px;padding:var(--spacing-xxs)}._icon-button--size-medium_mytxt_83{width:40px;height:40px;padding:var(--spacing-s)}._icon-button--size-medium_mytxt_83 ._icon-button__count_mytxt_51{font-size:var(--font-size-200);line-height:16px}._icon-button--size-medium_mytxt_83._icon-button--padding-compact_mytxt_64{width:36px;height:36px;padding:var(--spacing-xs)}._icon-button--size-large_mytxt_97{width:48px;height:48px;padding:var(--spacing-m)}._icon-button--size-large_mytxt_97 ._icon-button__count_mytxt_51{font-size:var(--font-size-300);line-height:18px}._icon-button--size-large_mytxt_97._icon-button--padding-compact_mytxt_64{width:44px;height:44px;padding:var(--spacing-s)}._icon-button--has-count_mytxt_111{width:auto;gap:var(--spacing-xxxs)}._icon-button--rounded_mytxt_115{border-radius:var(--radius-pill)}._icon-button--active_mytxt_25:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._icon-button--active_mytxt_25:not(:disabled):hover:not(:disabled):not(:active){background-color:rgba(var(--button-bg-rgb),.12);color:var(--link-color)}._icon-button--active_mytxt_25:not(:disabled):active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.16);color:var(--link-color)}._icon-button--toggled_mytxt_25{background-color:var(--button-bg);color:var(--button-color)}._icon-button--toggled_mytxt_25:hover:not(:disabled):not(:active){background-color:color-mix(in srgb,black 8%,var(--button-bg));color:var(--button-color)}._icon-button--toggled_mytxt_25:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--button-bg));color:var(--button-color)}._icon-button--toggled_mytxt_25 ._icon-button__unread-badge_mytxt_40{box-shadow:0 0 0 2px var(--button-bg)}._icon-button--style-inverted_mytxt_145{background-color:transparent;color:rgba(var(--sidebar-text-rgb),.64)}._icon-button--style-inverted_mytxt_145 ._icon-button__unread-badge_mytxt_40{box-shadow:0 0 0 2px var(--sidebar-header-bg)}._icon-button--style-inverted_mytxt_145:hover:not(:disabled):not(:active):not(._icon-button--toggled_mytxt_25):not(._icon-button--active_mytxt_25){background-color:rgba(var(--sidebar-text-rgb),.08);color:var(--sidebar-text)}._icon-button--style-inverted_mytxt_145:active:not(:disabled):not(._icon-button--toggled_mytxt_25){background-color:rgba(var(--sidebar-text-rgb),.16);color:var(--sidebar-text)}._icon-button--style-inverted_mytxt_145._icon-button--active_mytxt_25:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.16);color:var(--sidebar-text)}._icon-button--style-inverted_mytxt_145._icon-button--active_mytxt_25:not(:disabled):hover:not(:disabled):not(:active){background-color:rgba(var(--sidebar-text-rgb),.2);color:var(--sidebar-text)}._icon-button--style-inverted_mytxt_145._icon-button--active_mytxt_25:not(:disabled):active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.24);color:var(--sidebar-text)}._icon-button--style-inverted_mytxt_145._icon-button--toggled_mytxt_25{background-color:var(--sidebar-text);color:var(--sidebar-bg)}._icon-button--style-inverted_mytxt_145._icon-button--toggled_mytxt_25:hover:not(:disabled):not(:active){background-color:rgba(var(--sidebar-text-rgb),.92);color:var(--sidebar-bg)}._icon-button--style-inverted_mytxt_145._icon-button--toggled_mytxt_25:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.88);color:var(--sidebar-bg)}._icon-button--style-inverted_mytxt_145._icon-button--toggled_mytxt_25 ._icon-button__unread-badge_mytxt_40{box-shadow:0 0 0 2px var(--sidebar-text)}._icon-button--style-inverted_mytxt_145._icon-button--destructive_mytxt_187{--focus-ring-color: var(--error-text, var(--color-danger));background-color:transparent;color:var(--error-text, var(--color-danger))}._icon-button--style-inverted_mytxt_145._icon-button--destructive_mytxt_187:hover:not(:disabled):not(:active){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._icon-button--style-inverted_mytxt_145._icon-button--destructive_mytxt_187:active:not(:disabled):not(._icon-button--toggled_mytxt_25){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);color:var(--error-text, var(--color-danger))}._icon-button--destructive_mytxt_187{--focus-ring-color: var(--error-text, var(--color-danger));background-color:transparent;color:var(--error-text, var(--color-danger))}._icon-button--destructive_mytxt_187:hover:not(:disabled):not(:active){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._icon-button--destructive_mytxt_187:active:not(:disabled):not(._icon-button--toggled_mytxt_25){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);color:var(--error-text, var(--color-danger))}
+._icon-button_13ryy_2{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;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);background-color:transparent;--icon-button-fg: rgba(var(--center-channel-color-rgb), .64);color:var(--icon-button-fg);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._icon-button_13ryy_2:any-link,._icon-button_13ryy_2:hover,._icon-button_13ryy_2:focus,._icon-button_13ryy_2:active,._icon-button_13ryy_2:visited{color:var(--icon-button-fg);text-decoration:none}._icon-button_13ryy_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._icon-button_13ryy_2:is(:disabled,._icon-button--disabled_13ryy_27){cursor:not-allowed;opacity:.5}._icon-button_13ryy_2:hover:not(:disabled,._icon-button--disabled_13ryy_27):not(:active):not(._icon-button--active_13ryy_31):not(._icon-button--toggled_13ryy_31){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_13ryy_2:active:not(:disabled,._icon-button--disabled_13ryy_27):not(._icon-button--toggled_13ryy_31){background-color:rgba(var(--button-bg-rgb),.08);--icon-button-fg: var(--link-color);color:var(--link-color)}._icon-button__icon-slot_13ryy_41{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._icon-button__unread-badge_13ryy_48{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_13ryy_59{font-weight:var(--font-weight-semibold);color:inherit}._icon-button--size-x-small_13ryy_63{width:24px;height:24px;padding:var(--spacing-xxs)}._icon-button--size-x-small_13ryy_63 ._icon-button__count_13ryy_59{font-size:var(--font-size-75);line-height:12px}._icon-button--size-x-small_13ryy_63._icon-button--padding-compact_13ryy_72{width:20px;height:20px;padding:var(--spacing-xxxs)}._icon-button--size-small_13ryy_77{width:32px;height:32px;padding:var(--spacing-xs)}._icon-button--size-small_13ryy_77 ._icon-button__count_13ryy_59{font-size:var(--font-size-100);line-height:14px}._icon-button--size-small_13ryy_77._icon-button--padding-compact_13ryy_72{width:28px;height:28px;padding:var(--spacing-xxs)}._icon-button--size-medium_13ryy_91{width:40px;height:40px;padding:var(--spacing-s)}._icon-button--size-medium_13ryy_91 ._icon-button__count_13ryy_59{font-size:var(--font-size-200);line-height:16px}._icon-button--size-medium_13ryy_91._icon-button--padding-compact_13ryy_72{width:36px;height:36px;padding:var(--spacing-xs)}._icon-button--size-large_13ryy_105{width:48px;height:48px;padding:var(--spacing-m)}._icon-button--size-large_13ryy_105 ._icon-button__count_13ryy_59{font-size:var(--font-size-300);line-height:18px}._icon-button--size-large_13ryy_105._icon-button--padding-compact_13ryy_72{width:44px;height:44px;padding:var(--spacing-s)}._icon-button--has-count_13ryy_119{width:auto;gap:var(--spacing-xxxs)}._icon-button--rounded_13ryy_123{border-radius:var(--radius-pill)}._icon-button--active_13ryy_31:not(:disabled,._icon-button--disabled_13ryy_27){background-color:rgba(var(--button-bg-rgb),.08);--icon-button-fg: var(--link-color);color:var(--link-color)}._icon-button--active_13ryy_31:not(:disabled,._icon-button--disabled_13ryy_27):hover:not(:disabled,._icon-button--disabled_13ryy_27):not(:active){background-color:rgba(var(--button-bg-rgb),.12);--icon-button-fg: var(--link-color);color:var(--link-color)}._icon-button--active_13ryy_31:not(:disabled,._icon-button--disabled_13ryy_27):active:not(:disabled,._icon-button--disabled_13ryy_27){background-color:rgba(var(--button-bg-rgb),.16);--icon-button-fg: var(--link-color);color:var(--link-color)}._icon-button--toggled_13ryy_31{background-color:var(--button-bg);--icon-button-fg: var(--button-color);color:var(--button-color)}._icon-button--toggled_13ryy_31:hover:not(:disabled,._icon-button--disabled_13ryy_27):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_13ryy_31:active:not(:disabled,._icon-button--disabled_13ryy_27){background-color:color-mix(in srgb,black 16%,var(--button-bg));--icon-button-fg: var(--button-color);color:var(--button-color)}._icon-button--toggled_13ryy_31 ._icon-button__unread-badge_13ryy_48{box-shadow:0 0 0 2px var(--button-bg)}._icon-button--style-inverted_13ryy_159{background-color:transparent;--icon-button-fg: rgba(var(--sidebar-text-rgb), .64);color:rgba(var(--sidebar-text-rgb),.64)}._icon-button--style-inverted_13ryy_159 ._icon-button__unread-badge_13ryy_48{box-shadow:0 0 0 2px var(--sidebar-header-bg)}._icon-button--style-inverted_13ryy_159:hover:not(:disabled,._icon-button--disabled_13ryy_27):not(:active):not(._icon-button--toggled_13ryy_31):not(._icon-button--active_13ryy_31){background-color:rgba(var(--sidebar-text-rgb),.08);--icon-button-fg: var(--sidebar-text);color:var(--sidebar-text)}._icon-button--style-inverted_13ryy_159:active:not(:disabled,._icon-button--disabled_13ryy_27):not(._icon-button--toggled_13ryy_31){background-color:rgba(var(--sidebar-text-rgb),.16);--icon-button-fg: var(--sidebar-text);color:var(--sidebar-text)}._icon-button--style-inverted_13ryy_159._icon-button--active_13ryy_31:not(:disabled,._icon-button--disabled_13ryy_27){background-color:rgba(var(--sidebar-text-rgb),.16);--icon-button-fg: var(--sidebar-text);color:var(--sidebar-text)}._icon-button--style-inverted_13ryy_159._icon-button--active_13ryy_31:not(:disabled,._icon-button--disabled_13ryy_27):hover:not(:disabled,._icon-button--disabled_13ryy_27):not(:active){background-color:rgba(var(--sidebar-text-rgb),.2);--icon-button-fg: var(--sidebar-text);color:var(--sidebar-text)}._icon-button--style-inverted_13ryy_159._icon-button--active_13ryy_31:not(:disabled,._icon-button--disabled_13ryy_27):active:not(:disabled,._icon-button--disabled_13ryy_27){background-color:rgba(var(--sidebar-text-rgb),.24);--icon-button-fg: var(--sidebar-text);color:var(--sidebar-text)}._icon-button--style-inverted_13ryy_159._icon-button--toggled_13ryy_31{background-color:var(--sidebar-text);--icon-button-fg: var(--sidebar-bg);color:var(--sidebar-bg)}._icon-button--style-inverted_13ryy_159._icon-button--toggled_13ryy_31:hover:not(:disabled,._icon-button--disabled_13ryy_27):not(:active){background-color:rgba(var(--sidebar-text-rgb),.92);--icon-button-fg: var(--sidebar-bg);color:var(--sidebar-bg)}._icon-button--style-inverted_13ryy_159._icon-button--toggled_13ryy_31:active:not(:disabled,._icon-button--disabled_13ryy_27){background-color:rgba(var(--sidebar-text-rgb),.88);--icon-button-fg: var(--sidebar-bg);color:var(--sidebar-bg)}._icon-button--style-inverted_13ryy_159._icon-button--toggled_13ryy_31 ._icon-button__unread-badge_13ryy_48{box-shadow:0 0 0 2px var(--sidebar-text)}._icon-button--style-inverted_13ryy_159._icon-button--destructive_13ryy_210{--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_13ryy_159._icon-button--destructive_13ryy_210:hover:not(:disabled,._icon-button--disabled_13ryy_27):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_13ryy_159._icon-button--destructive_13ryy_210:active:not(:disabled,._icon-button--disabled_13ryy_27):not(._icon-button--toggled_13ryy_31){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_13ryy_210{--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_13ryy_210:hover:not(:disabled,._icon-button--disabled_13ryy_27):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_13ryy_210:active:not(:disabled,._icon-button--disabled_13ryy_27):not(._icon-button--toggled_13ryy_31){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. */
@@ -14,7 +14,7 @@ export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonEle
     destructive?: boolean;
     /** 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. */
+    /** 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;
@@ -22,24 +22,65 @@ export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonEle
     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. When omitted, the control is not a toggle. */
-    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;
+}
+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>`).
  */
-declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+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,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAM9E,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,gJAAgJ;IAChJ,IAAI,EAAE,SAAS,CAAC;IAChB,+EAA+E;IAC/E,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,wEAAwE;IACxE,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,+GAA+G;IAC/G,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;GAGG;AACH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CACzC,cAAc,EACd,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAM1B,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,UAAU,+GAkFf,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"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"}