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

package/dist/components/thread-list-item/ThreadListItem.js

@@ -1,123 +1,144 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import __I from "@mattermost/compass-icons/components/dots-horizontal.js";const I=__I&&__I.default?__I.default:__I;
-import { useCallback as T } from "react";
-import A from "../icon/Icon.js";
-import x from "../icon-button/IconButton.js";
-import B from "../tag/Tag.js";
-import D from "../mention-badge/MentionBadge.js";
-import E from "../unread-badge/UnreadBadge.js";
-import j from "../user-avatar-group/UserAvatarGroup.js";
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import __E from "@mattermost/compass-icons/components/dots-horizontal.js";const E=__E&&__E.default?__E.default:__E;
+import M from "../icon/Icon.js";
+import j from "../icon-button/IconButton.js";
+import z from "../tag/Tag.js";
+import P from "../mention-badge/MentionBadge.js";
+import S from "../unread-badge/UnreadBadge.js";
+import L from "../user-avatar-group/UserAvatarGroup.js";
 import e from "./ThreadListItem.module.scss.js";
-const z = [
+const F = [
   { key: "leonard", name: "Leonard Riley" },
   { key: "aiko", name: "Aiko Tan" },
   { key: "arjun", name: "Arjun Patel" },
   { key: "marco", name: "Marco Rinaldi" },
   { key: "sofia", name: "Sofia Bauer" }
-];
-function $({
-  active: n = !1,
-  badge: r = "none",
-  mentionCount: p = 1,
-  authorName: _ = "Martin Kraft",
-  channelLabel: u = "ENTERPRISE TEAM",
-  previewText: N = "Do we have a guideline for what minimum width we should support in the system console? I know that…",
-  timestamp: f = "5 mins ago",
-  replyCount: o = 3,
-  participants: m,
-  threadTitle: d,
-  className: v = "",
-  onClick: i,
-  onMenuClick: l
+], K = (i) => i === 1 ? "1 reply" : `${i} replies`, U = (i) => `${i} mention${i === 1 ? "" : "s"}`;
+function X({
+  active: i = !1,
+  badge: n = "none",
+  mentionCount: o = 1,
+  authorName: u = "Martin Kraft",
+  channelLabel: N = "ENTERPRISE TEAM",
+  previewText: f = "Do we have a guideline for what minimum width we should support in the system console? I know that…",
+  timestamp: v = "5 mins ago",
+  replyCount: y = 3,
+  participants: d,
+  threadTitle: m,
+  className: g = "",
+  onClick: a,
+  onMenuClick: c,
+  formatReplyCount: w = K,
+  formatMentionLabel: A = U,
+  unreadLabel: I = "unread",
+  menuLabel: T = "Thread actions"
 }) {
-  const c = m === void 0 ? z : m, y = c.length > 0, h = !n && (r === "unread" || r === "mention"), g = o === 1 ? "1 reply" : `${o} replies`, w = [
+  const h = d === void 0 ? F : d, R = h.length > 0, _ = !i && (n === "unread" || n === "mention"), b = w(y), x = [
     e["thread-list-item"],
-    n ? e["thread-list-item--active"] : "",
-    v
-  ].filter(Boolean).join(" "), b = T(
-    (s) => {
-      i && (s.key === "Enter" || s.key === " ") && (s.preventDefault(), i());
-    },
-    [i]
-  );
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      className: w,
-      onClick: i,
-      role: i ? "button" : void 0,
-      tabIndex: i ? 0 : void 0,
-      onKeyDown: i ? b : void 0,
-      children: [
-        /* @__PURE__ */ t("div", { className: e["thread-list-item__thread"], children: /* @__PURE__ */ a("div", { className: e["thread-list-item__container"], children: [
-          /* @__PURE__ */ a("div", { className: e["thread-list-item__post-content"], children: [
-            /* @__PURE__ */ a("div", { className: e["thread-list-item__gutter"], children: [
-              h && r === "unread" && /* @__PURE__ */ t(
-                E,
+    i ? e["thread-list-item--active"] : "",
+    g
+  ].filter(Boolean).join(" "), p = n === "mention" ? A(o) : n === "unread" ? I : void 0, B = (s) => {
+    const l = window.getSelection();
+    (l == null ? void 0 : l.type) === "Range" && l.toString().length > 0 && s.currentTarget.contains(
+      l.getRangeAt(0).commonAncestorContainer
+    ) || a == null || a();
+  }, D = (s) => {
+    s.key !== "Enter" && s.key !== " " || (s.preventDefault(), a == null || a());
+  };
+  return /* @__PURE__ */ r("div", { className: x, children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: e["thread-list-item__main"],
+        role: a ? "button" : void 0,
+        tabIndex: a ? 0 : void 0,
+        onClick: a ? B : void 0,
+        onKeyDown: a ? D : void 0,
+        "aria-current": i ? !0 : void 0,
+        children: /* @__PURE__ */ t("div", { className: e["thread-list-item__thread"], children: /* @__PURE__ */ r("div", { className: e["thread-list-item__container"], children: [
+          /* @__PURE__ */ r("div", { className: e["thread-list-item__post-content"], children: [
+            /* @__PURE__ */ r("div", { className: e["thread-list-item__gutter"], children: [
+              _ && n === "unread" && /* @__PURE__ */ t(
+                "span",
                 {
-                  className: e["thread-list-item__unread-badge"],
-                  context: "icon-button"
+                  className: e["thread-list-item__unread-gutter"],
+                  "aria-hidden": !0,
+                  children: /* @__PURE__ */ t(
+                    S,
+                    {
+                      className: e["thread-list-item__unread-badge"],
+                      context: "icon-button"
+                    }
+                  )
                 }
               ),
-              h && r === "mention" && /* @__PURE__ */ t("span", { className: e["thread-list-item__mention-gutter"], children: /* @__PURE__ */ t(
-                D,
+              _ && n === "mention" && /* @__PURE__ */ t(
+                "span",
                 {
-                  count: p,
-                  location: "channel",
-                  size: "medium"
+                  className: e["thread-list-item__mention-gutter"],
+                  "aria-hidden": !0,
+                  children: /* @__PURE__ */ t(
+                    P,
+                    {
+                      count: o,
+                      location: "channel",
+                      size: "medium"
+                    }
+                  )
                 }
-              ) })
+              )
             ] }),
-            /* @__PURE__ */ t("div", { className: e["thread-list-item__post-body"], children: /* @__PURE__ */ a("div", { className: e["thread-list-item__post-body-content"], children: [
-              /* @__PURE__ */ a("div", { className: e["thread-list-item__name-row"], children: [
-                /* @__PURE__ */ a("div", { className: e["thread-list-item__name-group"], children: [
-                  /* @__PURE__ */ t("span", { className: e["thread-list-item__author"], children: _ }),
-                  /* @__PURE__ */ t(
-                    B,
+            /* @__PURE__ */ t("div", { className: e["thread-list-item__post-body"], children: /* @__PURE__ */ r("div", { className: e["thread-list-item__post-body-content"], children: [
+              /* @__PURE__ */ r("div", { className: e["thread-list-item__name-row"], children: [
+                /* @__PURE__ */ r("div", { className: e["thread-list-item__name-group"], children: [
+                  /* @__PURE__ */ t("span", { className: e["thread-list-item__author"], children: u }),
+                  /* @__PURE__ */ t(z, { casing: "all-caps", label: N }),
+                  p && /* @__PURE__ */ t(
+                    "span",
                     {
-                      casing: "all-caps",
-                      label: u
+                      className: e["thread-list-item__status-hint"],
+                      children: p
                     }
                   )
                 ] }),
-                /* @__PURE__ */ t("span", { className: e["thread-list-item__timestamp"], children: f })
+                /* @__PURE__ */ t("span", { className: e["thread-list-item__timestamp"], children: v })
               ] }),
-              d != null && /* @__PURE__ */ t("div", { className: e["thread-list-item__title-row"], children: /* @__PURE__ */ t("p", { className: e["thread-list-item__title"], children: d }) }),
-              /* @__PURE__ */ t("p", { className: e["thread-list-item__preview"], children: N })
+              m != null && /* @__PURE__ */ t("div", { className: e["thread-list-item__title-row"], children: /* @__PURE__ */ t("p", { className: e["thread-list-item__title"], children: m }) }),
+              /* @__PURE__ */ t("p", { className: e["thread-list-item__preview"], children: f })
             ] }) })
           ] }),
-          /* @__PURE__ */ t("div", { className: e["thread-list-item__replies"], children: /* @__PURE__ */ a("div", { className: e["thread-list-item__replies-inner"], children: [
-            y && /* @__PURE__ */ t(
-              j,
+          /* @__PURE__ */ t("div", { className: e["thread-list-item__replies"], children: /* @__PURE__ */ r("div", { className: e["thread-list-item__replies-inner"], children: [
+            R && /* @__PURE__ */ t(
+              L,
               {
-                avatars: c,
+                avatars: h,
                 className: e["thread-list-item__avatar-group"],
                 max: 3,
                 size: "20"
               }
             ),
-            /* @__PURE__ */ t("span", { className: e["thread-list-item__reply-count"], children: g })
+            /* @__PURE__ */ t("span", { className: e["thread-list-item__reply-count"], children: b })
           ] }) })
-        ] }) }),
-        /* @__PURE__ */ t("div", { className: e["thread-list-item__actions"], children: /* @__PURE__ */ t("span", { className: e["thread-list-item__menu-button"], children: /* @__PURE__ */ t(
-          x,
-          {
-            "aria-label": "Thread actions",
-            icon: /* @__PURE__ */ t(A, { size: "16", glyph: /* @__PURE__ */ t(I, {}) }),
-            padding: "compact",
-            size: "small",
-            style: "default",
-            type: "button",
-            onClick: (s) => {
-              s.stopPropagation(), l == null || l(s);
-            }
-          }
-        ) }) })
-      ]
-    }
-  );
+        ] }) })
+      }
+    ),
+    c && /* @__PURE__ */ t("div", { className: e["thread-list-item__actions"], children: /* @__PURE__ */ t("span", { className: e["thread-list-item__menu-button"], children: /* @__PURE__ */ t(
+      j,
+      {
+        "aria-label": T,
+        icon: /* @__PURE__ */ t(M, { size: "16", glyph: /* @__PURE__ */ t(E, {}) }),
+        padding: "compact",
+        size: "small",
+        style: "default",
+        type: "button",
+        onClick: (s) => {
+          s.stopPropagation(), c(s);
+        }
+      }
+    ) }) })
+  ] });
 }
 export {
-  $ as default
+  X as default
 };
 //# sourceMappingURL=ThreadListItem.js.map

package/dist/components/thread-list-item/ThreadListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadListItem.js","sources":["../../../src/components/thread-list-item/ThreadListItem.tsx"],"sourcesContent":["import DotsHorizontalIcon from '@mattermost/compass-icons/components/dots-horizontal';\nimport { type KeyboardEvent, type MouseEvent, useCallback } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '../mention-badge/MentionBadge';\nimport UnreadBadge from '../unread-badge/UnreadBadge';\nimport UserAvatarGroup, {\n  type UserAvatarGroupItem,\n} from '../user-avatar-group/UserAvatarGroup';\nimport styles from './ThreadListItem.module.scss';\n\nconst DEFAULT_PARTICIPANTS: UserAvatarGroupItem[] = [\n  { key: 'leonard', name: 'Leonard Riley' },\n  { key: 'aiko', name: 'Aiko Tan' },\n  { key: 'arjun', name: 'Arjun Patel' },\n  { key: 'marco', name: 'Marco Rinaldi' },\n  { key: 'sofia', name: 'Sofia Bauer' },\n];\n\nexport interface ThreadListItemProps {\n  /** Whether this item is the active/selected thread. */\n  active?: boolean;\n  /** Badge in the left gutter. Default: None. Hidden when `active` is true. */\n  badge?: 'none' | 'unread' | 'mention';\n  /** Shown when `badge` is Mention. Default: 1. */\n  mentionCount?: number;\n  /** Author name. */\n  authorName?: string;\n  /** Channel/team label. */\n  channelLabel?: string;\n  /** Message preview text. */\n  previewText?: string;\n  /** Timestamp label. */\n  timestamp?: string;\n  /** Number of replies. */\n  replyCount?: number;\n  /** Stacked avatars for recent participants. Pass `[]` to hide. When omitted, uses demo participants. */\n  participants?: UserAvatarGroupItem[];\n  /** Optional thread title. */\n  threadTitle?: string;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Click handler. */\n  onClick?: () => void;\n  /** Thread overflow menu handler. */\n  onMenuClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n}\n\n/**\n * The Thread List Item is a single entry in the Threads view. Each row gives the user enough\n * context — who, where, what, when — to decide whether to open the thread without opening\n * it.\n */\nexport default function ThreadListItem({\n  active = false,\n  badge = 'none',\n  mentionCount = 1,\n  authorName = 'Martin Kraft',\n  channelLabel = 'ENTERPRISE TEAM',\n  previewText = 'Do we have a guideline for what minimum width we should support in the system console? I know that…',\n  timestamp = '5 mins ago',\n  replyCount = 3,\n  participants: participantsProp,\n  threadTitle,\n  className = '',\n  onClick,\n  onMenuClick,\n}: ThreadListItemProps) {\n  const participants =\n    participantsProp === undefined ? DEFAULT_PARTICIPANTS : participantsProp;\n  const showParticipants = participants.length > 0;\n  const showGutterBadge =\n    !active && (badge === 'unread' || badge === 'mention');\n  const replyLabel = replyCount === 1 ? '1 reply' : `${replyCount} replies`;\n\n  const rootClass = [\n    styles['thread-list-item'],\n    active ? styles['thread-list-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (!onClick) return;\n      if (event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault();\n        onClick();\n      }\n    },\n    [onClick],\n  );\n\n  return (\n    <div\n      className={rootClass}\n      onClick={onClick}\n      role={onClick ? 'button' : undefined}\n      tabIndex={onClick ? 0 : undefined}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n    >\n      <div className={styles['thread-list-item__thread']}>\n        <div className={styles['thread-list-item__container']}>\n          <div className={styles['thread-list-item__post-content']}>\n            <div className={styles['thread-list-item__gutter']}>\n              {showGutterBadge && badge === 'unread' && (\n                <UnreadBadge\n                  className={styles['thread-list-item__unread-badge']}\n                  context=\"icon-button\"\n                />\n              )}\n              {showGutterBadge && badge === 'mention' && (\n                <span className={styles['thread-list-item__mention-gutter']}>\n                  <MentionBadge\n                    count={mentionCount}\n                    location=\"channel\"\n                    size=\"medium\"\n                  />\n                </span>\n              )}\n            </div>\n            <div className={styles['thread-list-item__post-body']}>\n              <div className={styles['thread-list-item__post-body-content']}>\n                <div className={styles['thread-list-item__name-row']}>\n                  <div className={styles['thread-list-item__name-group']}>\n                    <span className={styles['thread-list-item__author']}>\n                      {authorName}\n                    </span>\n                    <Tag\n                      casing=\"all-caps\"\n                      label={channelLabel}\n                    />\n                  </div>\n                  <span className={styles['thread-list-item__timestamp']}>\n                    {timestamp}\n                  </span>\n                </div>\n                {threadTitle != null && (\n                  <div className={styles['thread-list-item__title-row']}>\n                    <p className={styles['thread-list-item__title']}>\n                      {threadTitle}\n                    </p>\n                  </div>\n                )}\n                <p className={styles['thread-list-item__preview']}>\n                  {previewText}\n                </p>\n              </div>\n            </div>\n          </div>\n          <div className={styles['thread-list-item__replies']}>\n            <div className={styles['thread-list-item__replies-inner']}>\n              {showParticipants && (\n                <UserAvatarGroup\n                  avatars={participants}\n                  className={styles['thread-list-item__avatar-group']}\n                  max={3}\n                  size=\"20\"\n                />\n              )}\n              <span className={styles['thread-list-item__reply-count']}>\n                {replyLabel}\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className={styles['thread-list-item__actions']}>\n        <span className={styles['thread-list-item__menu-button']}>\n          <IconButton\n            aria-label=\"Thread actions\"\n            icon={<Icon size=\"16\" glyph={<DotsHorizontalIcon />} />}\n            padding=\"compact\"\n            size=\"small\"\n            style=\"default\"\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation();\n              onMenuClick?.(e);\n            }}\n          />\n        </span>\n      </div>\n    </div>\n  );\n}\n"],"names":["DEFAULT_PARTICIPANTS","ThreadListItem","active","badge","mentionCount","authorName","channelLabel","previewText","timestamp","replyCount","participantsProp","threadTitle","className","onClick","onMenuClick","participants","showParticipants","showGutterBadge","replyLabel","rootClass","styles","handleKeyDown","useCallback","event","jsxs","jsx","UnreadBadge","MentionBadge","Tag","UserAvatarGroup","IconButton","Icon","DotsHorizontalIcon","e"],"mappings":"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"}
+{"version":3,"file":"ThreadListItem.js","sources":["../../../src/components/thread-list-item/ThreadListItem.tsx"],"sourcesContent":["import DotsHorizontalIcon from '@mattermost/compass-icons/components/dots-horizontal';\nimport type { KeyboardEvent, MouseEvent, ReactNode } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '../mention-badge/MentionBadge';\nimport UnreadBadge from '../unread-badge/UnreadBadge';\nimport UserAvatarGroup, {\n  type UserAvatarGroupItem,\n} from '../user-avatar-group/UserAvatarGroup';\nimport styles from './ThreadListItem.module.scss';\n\nconst DEFAULT_PARTICIPANTS: UserAvatarGroupItem[] = [\n  { key: 'leonard', name: 'Leonard Riley' },\n  { key: 'aiko', name: 'Aiko Tan' },\n  { key: 'arjun', name: 'Arjun Patel' },\n  { key: 'marco', name: 'Marco Rinaldi' },\n  { key: 'sofia', name: 'Sofia Bauer' },\n];\n\nexport interface ThreadListItemProps {\n  /** Whether this item is the active/selected thread. */\n  active?: boolean;\n  /** Badge in the left gutter. Default: None. Hidden when `active` is true. */\n  badge?: 'none' | 'unread' | 'mention';\n  /** Shown when `badge` is Mention. Default: 1. */\n  mentionCount?: number;\n  /** Author name. */\n  authorName?: ReactNode;\n  /** Channel/team label. */\n  channelLabel?: ReactNode;\n  /** Message preview text. */\n  previewText?: ReactNode;\n  /** Timestamp label. */\n  timestamp?: ReactNode;\n  /** Number of replies. */\n  replyCount?: number;\n  /** Stacked avatars for recent participants. Pass `[]` to hide. When omitted, uses demo participants. */\n  participants?: UserAvatarGroupItem[];\n  /** Optional thread title. */\n  threadTitle?: ReactNode;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Opens the thread. Sibling of the overflow menu for keyboard reachability. */\n  onClick?: () => void;\n  /** Thread overflow menu handler. */\n  onMenuClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /** Visible reply count. Default: `1 reply` / `{count} replies`. */\n  formatReplyCount?: (count: number) => ReactNode;\n  /** Visually hidden mention hint. Default: `{count} mention(s)`. */\n  formatMentionLabel?: (count: number) => ReactNode;\n  /** Visually hidden unread hint. Default: \"unread\". */\n  unreadLabel?: ReactNode;\n  /** Accessible name for the overflow menu button. Default: \"Thread actions\". */\n  menuLabel?: string;\n}\n\nconst defaultFormatReplies = (count: number) =>\n  count === 1 ? '1 reply' : `${count} replies`;\nconst defaultFormatMentions = (count: number) =>\n  `${count} mention${count === 1 ? '' : 's'}`;\n\n/**\n * The Thread List Item is a single entry in the Threads view. Each row gives the user enough\n * context — who, where, what, when — to decide whether to open the thread without opening\n * it.\n */\nexport default function ThreadListItem({\n  active = false,\n  badge = 'none',\n  mentionCount = 1,\n  authorName = 'Martin Kraft',\n  channelLabel = 'ENTERPRISE TEAM',\n  previewText = 'Do we have a guideline for what minimum width we should support in the system console? I know that…',\n  timestamp = '5 mins ago',\n  replyCount = 3,\n  participants: participantsProp,\n  threadTitle,\n  className = '',\n  onClick,\n  onMenuClick,\n  formatReplyCount = defaultFormatReplies,\n  formatMentionLabel = defaultFormatMentions,\n  unreadLabel = 'unread',\n  menuLabel = 'Thread actions',\n}: ThreadListItemProps) {\n  const participants =\n    participantsProp === undefined ? DEFAULT_PARTICIPANTS : participantsProp;\n  const showParticipants = participants.length > 0;\n  const showGutterBadge =\n    !active && (badge === 'unread' || badge === 'mention');\n  const replyLabel = formatReplyCount(replyCount);\n\n  const rootClass = [\n    styles['thread-list-item'],\n    active ? styles['thread-list-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const statusHint =\n    badge === 'mention'\n      ? formatMentionLabel(mentionCount)\n      : badge === 'unread'\n        ? unreadLabel\n        : undefined;\n\n  const handleMainClick = (event: MouseEvent<HTMLDivElement>) => {\n    const selection = window.getSelection();\n    if (\n      selection?.type === 'Range' &&\n      selection.toString().length > 0 &&\n      event.currentTarget.contains(\n        selection.getRangeAt(0).commonAncestorContainer,\n      )\n    ) {\n      return;\n    }\n    onClick?.();\n  };\n\n  const handleMainKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== 'Enter' && event.key !== ' ') {\n      return;\n    }\n    event.preventDefault();\n    onClick?.();\n  };\n\n  return (\n    <div className={rootClass}>\n      <div\n        className={styles['thread-list-item__main']}\n        role={onClick ? 'button' : undefined}\n        tabIndex={onClick ? 0 : undefined}\n        onClick={onClick ? handleMainClick : undefined}\n        onKeyDown={onClick ? handleMainKeyDown : undefined}\n        aria-current={active ? true : undefined}\n      >\n        <div className={styles['thread-list-item__thread']}>\n          <div className={styles['thread-list-item__container']}>\n            <div className={styles['thread-list-item__post-content']}>\n              <div className={styles['thread-list-item__gutter']}>\n                {showGutterBadge && badge === 'unread' && (\n                  <span\n                    className={styles['thread-list-item__unread-gutter']}\n                    aria-hidden\n                  >\n                    <UnreadBadge\n                      className={styles['thread-list-item__unread-badge']}\n                      context=\"icon-button\"\n                    />\n                  </span>\n                )}\n                {showGutterBadge && badge === 'mention' && (\n                  <span\n                    className={styles['thread-list-item__mention-gutter']}\n                    aria-hidden\n                  >\n                    <MentionBadge\n                      count={mentionCount}\n                      location=\"channel\"\n                      size=\"medium\"\n                    />\n                  </span>\n                )}\n              </div>\n              <div className={styles['thread-list-item__post-body']}>\n                <div className={styles['thread-list-item__post-body-content']}>\n                  <div className={styles['thread-list-item__name-row']}>\n                    <div className={styles['thread-list-item__name-group']}>\n                      <span className={styles['thread-list-item__author']}>\n                        {authorName}\n                      </span>\n                      <Tag casing=\"all-caps\" label={channelLabel} />\n                      {statusHint && (\n                        <span\n                          className={styles['thread-list-item__status-hint']}\n                        >\n                          {statusHint}\n                        </span>\n                      )}\n                    </div>\n                    <span className={styles['thread-list-item__timestamp']}>\n                      {timestamp}\n                    </span>\n                  </div>\n                  {threadTitle != null && (\n                    <div className={styles['thread-list-item__title-row']}>\n                      <p className={styles['thread-list-item__title']}>\n                        {threadTitle}\n                      </p>\n                    </div>\n                  )}\n                  <p className={styles['thread-list-item__preview']}>\n                    {previewText}\n                  </p>\n                </div>\n              </div>\n            </div>\n            <div className={styles['thread-list-item__replies']}>\n              <div className={styles['thread-list-item__replies-inner']}>\n                {showParticipants && (\n                  <UserAvatarGroup\n                    avatars={participants}\n                    className={styles['thread-list-item__avatar-group']}\n                    max={3}\n                    size=\"20\"\n                  />\n                )}\n                <span className={styles['thread-list-item__reply-count']}>\n                  {replyLabel}\n                </span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      {onMenuClick && (\n        <div className={styles['thread-list-item__actions']}>\n          <span className={styles['thread-list-item__menu-button']}>\n            <IconButton\n              aria-label={menuLabel}\n              icon={<Icon size=\"16\" glyph={<DotsHorizontalIcon />} />}\n              padding=\"compact\"\n              size=\"small\"\n              style=\"default\"\n              type=\"button\"\n              onClick={(event) => {\n                event.stopPropagation();\n                onMenuClick(event);\n              }}\n            />\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_PARTICIPANTS","defaultFormatReplies","count","defaultFormatMentions","ThreadListItem","active","badge","mentionCount","authorName","channelLabel","previewText","timestamp","replyCount","participantsProp","threadTitle","className","onClick","onMenuClick","formatReplyCount","formatMentionLabel","unreadLabel","menuLabel","participants","showParticipants","showGutterBadge","replyLabel","rootClass","styles","statusHint","handleMainClick","event","selection","handleMainKeyDown","jsxs","jsx","UnreadBadge","MentionBadge","Tag","UserAvatarGroup","IconButton","Icon","DotsHorizontalIcon"],"mappings":"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"}

package/dist/components/thread-list-item/ThreadListItem.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ThreadListItem.module.css');const t={"thread-list-item":"_thread-list-item_1fxzs_2","thread-list-item__menu-button":"_thread-list-item__menu-button_1fxzs_17","thread-list-item__timestamp":"_thread-list-item__timestamp_1fxzs_20","thread-list-item--active":"_thread-list-item--active_1fxzs_27","thread-list-item__thread":"_thread-list-item__thread_1fxzs_33","thread-list-item__container":"_thread-list-item__container_1fxzs_40","thread-list-item__post-content":"_thread-list-item__post-content_1fxzs_48","thread-list-item__gutter":"_thread-list-item__gutter_1fxzs_54","thread-list-item__unread-badge":"_thread-list-item__unread-badge_1fxzs_63","thread-list-item__mention-gutter":"_thread-list-item__mention-gutter_1fxzs_68","thread-list-item__post-body":"_thread-list-item__post-body_1fxzs_76","thread-list-item__post-body-content":"_thread-list-item__post-body-content_1fxzs_83","thread-list-item__name-row":"_thread-list-item__name-row_1fxzs_90","thread-list-item__name-group":"_thread-list-item__name-group_1fxzs_99","thread-list-item__author":"_thread-list-item__author_1fxzs_105","thread-list-item__title-row":"_thread-list-item__title-row_1fxzs_121","thread-list-item__title":"_thread-list-item__title_1fxzs_121","thread-list-item__preview":"_thread-list-item__preview_1fxzs_137","thread-list-item__replies":"_thread-list-item__replies_1fxzs_148","thread-list-item__replies-inner":"_thread-list-item__replies-inner_1fxzs_154","thread-list-item__avatar-group":"_thread-list-item__avatar-group_1fxzs_161","thread-list-item__reply-count":"_thread-list-item__reply-count_1fxzs_164","thread-list-item__actions":"_thread-list-item__actions_1fxzs_171"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ThreadListItem.css');const t={"thread-list-item":"_thread-list-item_1esnq_13","thread-list-item__actions":"_thread-list-item__actions_1esnq_21","thread-list-item__timestamp":"_thread-list-item__timestamp_1esnq_27","thread-list-item__menu-button":"_thread-list-item__menu-button_1esnq_30","thread-list-item--active":"_thread-list-item--active_1esnq_44","thread-list-item__main":"_thread-list-item__main_1esnq_47","thread-list-item__thread":"_thread-list-item__thread_1esnq_73","thread-list-item__container":"_thread-list-item__container_1esnq_80","thread-list-item__post-content":"_thread-list-item__post-content_1esnq_88","thread-list-item__gutter":"_thread-list-item__gutter_1esnq_94","thread-list-item__unread-gutter":"_thread-list-item__unread-gutter_1esnq_103","thread-list-item__unread-badge":"_thread-list-item__unread-badge_1esnq_111","thread-list-item__mention-gutter":"_thread-list-item__mention-gutter_1esnq_114","thread-list-item__post-body":"_thread-list-item__post-body_1esnq_122","thread-list-item__post-body-content":"_thread-list-item__post-body-content_1esnq_129","thread-list-item__name-row":"_thread-list-item__name-row_1esnq_136","thread-list-item__name-group":"_thread-list-item__name-group_1esnq_145","thread-list-item__author":"_thread-list-item__author_1esnq_151","thread-list-item__status-hint":"_thread-list-item__status-hint_1esnq_159","thread-list-item__title-row":"_thread-list-item__title-row_1esnq_178","thread-list-item__title":"_thread-list-item__title_1esnq_178","thread-list-item__preview":"_thread-list-item__preview_1esnq_194","thread-list-item__replies":"_thread-list-item__replies_1esnq_205","thread-list-item__replies-inner":"_thread-list-item__replies-inner_1esnq_211","thread-list-item__avatar-group":"_thread-list-item__avatar-group_1esnq_218","thread-list-item__reply-count":"_thread-list-item__reply-count_1esnq_221"};exports.default=t;
 //# sourceMappingURL=ThreadListItem.module.scss.cjs.map

package/dist/components/thread-list-item/ThreadListItem.module.scss.js

@@ -1,27 +1,30 @@
-import './ThreadListItem.module.css';const t = {
-  "thread-list-item": "_thread-list-item_1fxzs_2",
-  "thread-list-item__menu-button": "_thread-list-item__menu-button_1fxzs_17",
-  "thread-list-item__timestamp": "_thread-list-item__timestamp_1fxzs_20",
-  "thread-list-item--active": "_thread-list-item--active_1fxzs_27",
-  "thread-list-item__thread": "_thread-list-item__thread_1fxzs_33",
-  "thread-list-item__container": "_thread-list-item__container_1fxzs_40",
-  "thread-list-item__post-content": "_thread-list-item__post-content_1fxzs_48",
-  "thread-list-item__gutter": "_thread-list-item__gutter_1fxzs_54",
-  "thread-list-item__unread-badge": "_thread-list-item__unread-badge_1fxzs_63",
-  "thread-list-item__mention-gutter": "_thread-list-item__mention-gutter_1fxzs_68",
-  "thread-list-item__post-body": "_thread-list-item__post-body_1fxzs_76",
-  "thread-list-item__post-body-content": "_thread-list-item__post-body-content_1fxzs_83",
-  "thread-list-item__name-row": "_thread-list-item__name-row_1fxzs_90",
-  "thread-list-item__name-group": "_thread-list-item__name-group_1fxzs_99",
-  "thread-list-item__author": "_thread-list-item__author_1fxzs_105",
-  "thread-list-item__title-row": "_thread-list-item__title-row_1fxzs_121",
-  "thread-list-item__title": "_thread-list-item__title_1fxzs_121",
-  "thread-list-item__preview": "_thread-list-item__preview_1fxzs_137",
-  "thread-list-item__replies": "_thread-list-item__replies_1fxzs_148",
-  "thread-list-item__replies-inner": "_thread-list-item__replies-inner_1fxzs_154",
-  "thread-list-item__avatar-group": "_thread-list-item__avatar-group_1fxzs_161",
-  "thread-list-item__reply-count": "_thread-list-item__reply-count_1fxzs_164",
-  "thread-list-item__actions": "_thread-list-item__actions_1fxzs_171"
+import './ThreadListItem.css';const t = {
+  "thread-list-item": "_thread-list-item_1esnq_13",
+  "thread-list-item__actions": "_thread-list-item__actions_1esnq_21",
+  "thread-list-item__timestamp": "_thread-list-item__timestamp_1esnq_27",
+  "thread-list-item__menu-button": "_thread-list-item__menu-button_1esnq_30",
+  "thread-list-item--active": "_thread-list-item--active_1esnq_44",
+  "thread-list-item__main": "_thread-list-item__main_1esnq_47",
+  "thread-list-item__thread": "_thread-list-item__thread_1esnq_73",
+  "thread-list-item__container": "_thread-list-item__container_1esnq_80",
+  "thread-list-item__post-content": "_thread-list-item__post-content_1esnq_88",
+  "thread-list-item__gutter": "_thread-list-item__gutter_1esnq_94",
+  "thread-list-item__unread-gutter": "_thread-list-item__unread-gutter_1esnq_103",
+  "thread-list-item__unread-badge": "_thread-list-item__unread-badge_1esnq_111",
+  "thread-list-item__mention-gutter": "_thread-list-item__mention-gutter_1esnq_114",
+  "thread-list-item__post-body": "_thread-list-item__post-body_1esnq_122",
+  "thread-list-item__post-body-content": "_thread-list-item__post-body-content_1esnq_129",
+  "thread-list-item__name-row": "_thread-list-item__name-row_1esnq_136",
+  "thread-list-item__name-group": "_thread-list-item__name-group_1esnq_145",
+  "thread-list-item__author": "_thread-list-item__author_1esnq_151",
+  "thread-list-item__status-hint": "_thread-list-item__status-hint_1esnq_159",
+  "thread-list-item__title-row": "_thread-list-item__title-row_1esnq_178",
+  "thread-list-item__title": "_thread-list-item__title_1esnq_178",
+  "thread-list-item__preview": "_thread-list-item__preview_1esnq_194",
+  "thread-list-item__replies": "_thread-list-item__replies_1esnq_205",
+  "thread-list-item__replies-inner": "_thread-list-item__replies-inner_1esnq_211",
+  "thread-list-item__avatar-group": "_thread-list-item__avatar-group_1esnq_218",
+  "thread-list-item__reply-count": "_thread-list-item__reply-count_1esnq_221"
 };
 export {
   t as default

package/dist/components/thread-list-item/ThreadListItem.module.scss.js.map

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

package/dist/components/thread-list-item/index.d.ts

@@ -1,4 +1,4 @@
 export { default as ThreadListItem } from './ThreadListItem';
 export type { ThreadListItemProps } from './ThreadListItem';
-export type { UserAvatarGroupItem } from '../UserAvatarGroup/UserAvatarGroup';
+export type { UserAvatarGroupItem } from '../user-avatar-group/UserAvatarGroup';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/tile-button/TileButton.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),B=require("react"),i=require("../icon/Icon.cjs"),q=require("../../utils/slot.cjs"),e=require("./TileButton.module.scss.cjs"),n=B.forwardRef(function(l,a){if(l.asChild){const{icon:m,label:v,destructive:j=!1,className:C,disabled:x,children:N,asChild:P,..._}=l,g=[e.default["tile-button"],j?e.default["tile-button--destructive"]:"",C??""].filter(Boolean).join(" "),p=t.jsxs(t.Fragment,{children:[t.jsx("span",{className:e.default["tile-button__icon"],"aria-hidden":!0,children:t.jsx(i.IconSlotContext.Provider,{value:{size:"20"},children:m})}),t.jsx("span",{className:e.default["tile-button__label"],children:v})]});return q.renderAsChild({child:N,props:{..._,className:g},ref:a,content:p,disabled:!!x,disabledClassName:e.default["tile-button--disabled"],warnOnChildContent:!0})}const{icon:o,label:d,toggled:s,destructive:r=!1,className:u,disabled:c,type:b="button",asChild:y,...f}=l,h=[e.default["tile-button"],s?e.default["tile-button--toggled"]:"",r?e.default["tile-button--destructive"]:"",u??""].filter(Boolean).join(" ");return t.jsxs("button",{ref:a,className:h,type:b,disabled:c,"aria-pressed":s===void 0?void 0:s,...f,children:[t.jsx("span",{className:e.default["tile-button__icon"],"aria-hidden":!0,children:t.jsx(i.IconSlotContext.Provider,{value:{size:"20"},children:o})}),t.jsx("span",{className:e.default["tile-button__label"],children:d})]})});n.displayName="TileButton";exports.default=n;
+//# sourceMappingURL=TileButton.cjs.map

package/dist/components/tile-button/TileButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TileButton.cjs","sources":["../../../src/components/tile-button/TileButton.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 { renderAsChild } from '@/utils/slot';\nimport styles from './TileButton.module.scss';\n\ninterface TileButtonOwnProps {\n  /** Pass `<Icon glyph={<SomeIcon />} />` — TileButton provides the correct size (20) via context. */\n  icon: ReactNode;\n  /** Visible label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  destructive?: boolean;\n  className?: string;\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 TileButtonProps\n  extends TileButtonOwnProps, ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * When true, merges TileButton 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 set, this is a toggle; maps to `aria-pressed`. Only applies to the native\n   * `<button>`; not available with `asChild`.\n   */\n  toggled?: boolean;\n}\n\nexport interface TileButtonAsChildProps\n  extends\n    TileButtonOwnProps,\n    Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'> {\n  /**\n   * Merges TileButton 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; TileButton supplies the icon and label anatomy.\n   */\n  asChild: true;\n  /** Single empty element to render as the TileButton (e.g. `<a href=\"…\" />`). */\n  children: ReactElement;\n}\n\ntype TileButtonComponent = {\n  (\n    props: TileButtonAsChildProps & RefAttributes<HTMLElement>,\n  ): ReactElement | null;\n  (\n    props: TileButtonProps & RefAttributes<HTMLButtonElement>,\n  ): ReactElement | null;\n  displayName?: string;\n};\n\n/**\n * Tile Buttons surface a small set of high-frequency actions in a fixed context — a\n * profile popover, a channel info panel, a card. They sit close to the content they act on\n * and read as a row of equal-weight choices.\n *\n * Pass `asChild` with a single empty `<a>` or router `Link` child to render a navigational\n * action with Tile Button styling (no nested `<button>`).\n */\nconst TileButton = forwardRef(function TileButton(\n  props: TileButtonProps | TileButtonAsChildProps,\n  ref: Ref<HTMLButtonElement | HTMLElement>,\n) {\n  if (props.asChild) {\n    const {\n      icon,\n      label,\n      destructive = false,\n      className,\n      disabled,\n      children,\n      asChild,\n      ...rest\n    } = props;\n    void asChild;\n\n    const rootClass = [\n      styles['tile-button'],\n      destructive ? styles['tile-button--destructive'] : '',\n      className ?? '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const anatomy = (\n      <>\n        <span className={styles['tile-button__icon']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: '20' }}>\n            {icon}\n          </IconSlotContext.Provider>\n        </span>\n        <span className={styles['tile-button__label']}>{label}</span>\n      </>\n    );\n\n    return renderAsChild({\n      child: children,\n      props: {\n        ...rest,\n        className: rootClass,\n      },\n      ref,\n      content: anatomy,\n      disabled: Boolean(disabled),\n      disabledClassName: styles['tile-button--disabled'],\n      warnOnChildContent: true,\n    });\n  }\n\n  const {\n    icon,\n    label,\n    toggled,\n    destructive = false,\n    className,\n    disabled,\n    type = 'button',\n    asChild,\n    ...htmlProps\n  } = props;\n  void asChild;\n\n  const rootClass = [\n    styles['tile-button'],\n    toggled ? styles['tile-button--toggled'] : '',\n    destructive ? styles['tile-button--destructive'] : '',\n    className ?? '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      ref={ref as Ref<HTMLButtonElement>}\n      className={rootClass}\n      type={type}\n      disabled={disabled}\n      aria-pressed={toggled === undefined ? undefined : toggled}\n      {...htmlProps}\n    >\n      <span className={styles['tile-button__icon']} aria-hidden>\n        <IconSlotContext.Provider value={{ size: '20' }}>\n          {icon}\n        </IconSlotContext.Provider>\n      </span>\n      <span className={styles['tile-button__label']}>{label}</span>\n    </button>\n  );\n}) as TileButtonComponent;\n\nTileButton.displayName = 'TileButton';\n\nexport default TileButton;\n"],"names":["TileButton","forwardRef","props","ref","icon","label","destructive","className","disabled","children","asChild","rest","rootClass","styles","anatomy","jsxs","Fragment","jsx","IconSlotContext","renderAsChild","toggled","type","htmlProps"],"mappings":"8QA2EMA,EAAaC,EAAAA,WAAW,SAC5BC,EACAC,EACA,CACA,GAAID,EAAM,QAAS,CACjB,KAAM,CACJ,KAAAE,EACA,MAAAC,EACA,YAAAC,EAAc,GACd,UAAAC,EACA,SAAAC,EACA,SAAAC,EACA,QAAAC,EACA,GAAGC,CAAA,EACDT,EAGEU,EAAY,CAChBC,EAAAA,QAAO,aAAa,EACpBP,EAAcO,EAAAA,QAAO,0BAA0B,EAAI,GACnDN,GAAa,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG,EAELO,EACJC,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,MAAC,QAAK,UAAWJ,EAAAA,QAAO,mBAAmB,EAAG,cAAW,GACvD,SAAAI,EAAAA,IAACC,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,MACtC,SAAAd,EACH,EACF,QACC,OAAA,CAAK,UAAWS,EAAAA,QAAO,oBAAoB,EAAI,SAAAR,CAAAA,CAAM,CAAA,EACxD,EAGF,OAAOc,gBAAc,CACnB,MAAOV,EACP,MAAO,CACL,GAAGE,EACH,UAAWC,CAAA,EAEb,IAAAT,EACA,QAASW,EACT,SAAU,EAAQN,EAClB,kBAAmBK,EAAAA,QAAO,uBAAuB,EACjD,mBAAoB,EAAA,CACrB,CACH,CAEA,KAAM,CACJ,KAAAT,EACA,MAAAC,EACA,QAAAe,EACA,YAAAd,EAAc,GACd,UAAAC,EACA,SAAAC,EACA,KAAAa,EAAO,SACP,QAAAX,EACA,GAAGY,CAAA,EACDpB,EAGEU,EAAY,CAChBC,EAAAA,QAAO,aAAa,EACpBO,EAAUP,EAAAA,QAAO,sBAAsB,EAAI,GAC3CP,EAAcO,EAAAA,QAAO,0BAA0B,EAAI,GACnDN,GAAa,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEQ,EAAAA,KAAC,SAAA,CACC,IAAAZ,EACA,UAAWS,EACX,KAAAS,EACA,SAAAb,EACA,eAAcY,IAAY,OAAY,OAAYA,EACjD,GAAGE,EAEJ,SAAA,CAAAL,MAAC,QAAK,UAAWJ,EAAAA,QAAO,mBAAmB,EAAG,cAAW,GACvD,SAAAI,EAAAA,IAACC,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,WACH,EACF,QACC,OAAA,CAAK,UAAWL,EAAAA,QAAO,oBAAoB,EAAI,SAAAR,CAAA,CAAM,CAAA,CAAA,CAAA,CAG5D,CAAC,EAEDL,EAAW,YAAc"}

package/dist/components/tile-button/TileButton.css

@@ -0,0 +1 @@
+._tile-button_d4o4n_13{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xxxs);width:108px;min-width:64px;max-width:100%;padding:var(--spacing-m) 0 var(--spacing-s);border:none;border-radius:var(--radius-s);background-color:rgba(var(--center-channel-color-rgb),.04);--tile-button-fg: rgba(var(--center-channel-color-rgb), .72);--tile-button-icon-fg: rgba(var(--center-channel-color-rgb), .64);color:var(--tile-button-fg);cursor:pointer;text-decoration:none;outline:none}._tile-button_d4o4n_13:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:3px;animation:_focus-ring-in_d4o4n_1 var(--duration-quick) var(--ease-transition)}@media(prefers-reduced-motion:reduce){._tile-button_d4o4n_13:focus-visible{animation:none}}._tile-button_d4o4n_13:not(._-host-shadow-a_d4o4n_42):not(._-host-shadow-b_d4o4n_42){box-shadow:none;border-radius:var(--radius-s)}@keyframes _focus-ring-in_d4o4n_1{0%{outline-color:transparent;outline-offset:0}}._tile-button_d4o4n_13:any-link,._tile-button_d4o4n_13:hover,._tile-button_d4o4n_13:focus,._tile-button_d4o4n_13:active,._tile-button_d4o4n_13:visited{color:var(--tile-button-fg);text-decoration:none}._tile-button_d4o4n_13:hover:not([aria-pressed]),._tile-button_d4o4n_13:active:not([aria-pressed]){transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._tile-button_d4o4n_13:hover:not(:disabled,._tile-button--disabled_d4o4n_59){background-color:rgba(var(--center-channel-color-rgb),.08);--tile-button-fg: rgba(var(--center-channel-color-rgb), .75)}._tile-button_d4o4n_13:active:not(:disabled,._tile-button--disabled_d4o4n_59){background-color:rgba(var(--button-bg-rgb),.08);--tile-button-fg: var(--link-color)}._tile-button_d4o4n_13:is(:disabled,._tile-button--disabled_d4o4n_59){opacity:.48;cursor:not-allowed}._tile-button--toggled_d4o4n_71{--tile-button-fg: var(--link-color);background-color:rgba(var(--button-bg-rgb),.08)}._tile-button--toggled_d4o4n_71 ._tile-button__icon_d4o4n_75,._tile-button--toggled_d4o4n_71 ._tile-button__label_d4o4n_76{color:var(--link-color)}._tile-button--toggled_d4o4n_71:hover:not(:disabled,._tile-button--disabled_d4o4n_59){background-color:rgba(var(--button-bg-rgb),.12)}._tile-button--toggled_d4o4n_71:active:not(:disabled,._tile-button--disabled_d4o4n_59){background-color:rgba(var(--button-bg-rgb),.16)}._tile-button--destructive_d4o4n_85{--focus-ring-color: var(--error-text, var(--color-danger));--tile-button-fg: var(--error-text, var(--color-danger));background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.04)}._tile-button--destructive_d4o4n_85:hover:not(:disabled,._tile-button--disabled_d4o4n_59){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);--tile-button-fg: var(--error-text, var(--color-danger))}._tile-button--destructive_d4o4n_85:active:not(:disabled,._tile-button--disabled_d4o4n_59){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);--tile-button-fg: var(--error-text, var(--color-danger))}._tile-button_d4o4n_13:hover:not(:disabled,._tile-button--disabled_d4o4n_59),._tile-button_d4o4n_13:active:not(:disabled,._tile-button--disabled_d4o4n_59),._tile-button--toggled_d4o4n_71,._tile-button--destructive_d4o4n_85{--tile-button-icon-fg: initial}._tile-button__icon_d4o4n_75{display:flex;align-items:center;justify-content:center;width:var(--icon-size-20);height:var(--icon-size-20);flex-shrink:0;color:var(--tile-button-icon-fg, var(--tile-button-fg))}._tile-button__label_d4o4n_76{font-family:var(--font-family-body);font-size:var(--font-size-50);font-weight:var(--font-weight-semibold);line-height:var(--line-height-50);letter-spacing:.11px;box-sizing:border-box;max-width:100%;padding-inline:var(--tile-button-padding-inline, var(--spacing-xs));display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;text-wrap:balance;white-space:normal;text-align:center;color:var(--tile-button-fg)}

package/dist/components/tile-button/TileButton.d.ts

@@ -0,0 +1,54 @@
+import { ButtonHTMLAttributes, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
+interface TileButtonOwnProps {
+    /** Pass `<Icon glyph={<SomeIcon />} />` — TileButton provides the correct size (20) via context. */
+    icon: ReactNode;
+    /** Visible label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    label: ReactNode;
+    destructive?: boolean;
+    className?: string;
+    /**
+     * 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 TileButtonProps extends TileButtonOwnProps, ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * When true, merges TileButton props onto the single child element instead of
+     * rendering a `<button>`. Use with `<a>` or a router `Link`. Default: false.
+     */
+    asChild?: false;
+    /**
+     * When set, this is a toggle; maps to `aria-pressed`. Only applies to the native
+     * `<button>`; not available with `asChild`.
+     */
+    toggled?: boolean;
+}
+export interface TileButtonAsChildProps extends TileButtonOwnProps, Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'> {
+    /**
+     * Merges TileButton 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; TileButton supplies the icon and label anatomy.
+     */
+    asChild: true;
+    /** Single empty element to render as the TileButton (e.g. `<a href="…" />`). */
+    children: ReactElement;
+}
+type TileButtonComponent = {
+    (props: TileButtonAsChildProps & RefAttributes<HTMLElement>): ReactElement | null;
+    (props: TileButtonProps & RefAttributes<HTMLButtonElement>): ReactElement | null;
+    displayName?: string;
+};
+/**
+ * Tile Buttons surface a small set of high-frequency actions in a fixed context — a
+ * profile popover, a channel info panel, a card. They sit close to the content they act on
+ * and read as a row of equal-weight choices.
+ *
+ * Pass `asChild` with a single empty `<a>` or router `Link` child to render a navigational
+ * action with Tile Button styling (no nested `<button>`).
+ */
+declare const TileButton: TileButtonComponent;
+export default TileButton;
+//# sourceMappingURL=TileButton.d.ts.map

package/dist/components/tile-button/TileButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TileButton.d.ts","sourceRoot":"","sources":["../../../src/components/tile-button/TileButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,SAAS,EAEd,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AAKf,UAAU,kBAAkB;IAC1B,oGAAoG;IACpG,IAAI,EAAE,SAAS,CAAC;IAChB,4EAA4E;IAC5E,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eACf,SAAQ,kBAAkB,EAAE,oBAAoB,CAAC,iBAAiB,CAAC;IACnE;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,sBACf,SACE,kBAAkB,EAClB,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACzD;;;;;OAKG;IACH,OAAO,EAAE,IAAI,CAAC;IACd,gFAAgF;IAChF,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,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;AAEF;;;;;;;GAOG;AACH,QAAA,MAAM,UAAU,EAyFV,mBAAmB,CAAC;AAI1B,eAAe,UAAU,CAAC"}

package/dist/components/tile-button/TileButton.js

@@ -0,0 +1,74 @@
+import { jsxs as a, Fragment as x, jsx as t } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { IconSlotContext as o } from "../icon/Icon.js";
+import { renderAsChild as P } from "../../utils/slot.js";
+import e from "./TileButton.module.scss.js";
+const T = y(function(l, s) {
+  if (l.asChild) {
+    const {
+      icon: f,
+      label: p,
+      destructive: v = !1,
+      className: C,
+      disabled: N,
+      children: _,
+      asChild: A,
+      ...B
+    } = l, g = [
+      e["tile-button"],
+      v ? e["tile-button--destructive"] : "",
+      C ?? ""
+    ].filter(Boolean).join(" "), j = /* @__PURE__ */ a(x, { children: [
+      /* @__PURE__ */ t("span", { className: e["tile-button__icon"], "aria-hidden": !0, children: /* @__PURE__ */ t(o.Provider, { value: { size: "20" }, children: f }) }),
+      /* @__PURE__ */ t("span", { className: e["tile-button__label"], children: p })
+    ] });
+    return P({
+      child: _,
+      props: {
+        ...B,
+        className: g
+      },
+      ref: s,
+      content: j,
+      disabled: !!N,
+      disabledClassName: e["tile-button--disabled"],
+      warnOnChildContent: !0
+    });
+  }
+  const {
+    icon: n,
+    label: r,
+    toggled: i,
+    destructive: d = !1,
+    className: c,
+    disabled: u,
+    type: m = "button",
+    asChild: z,
+    ...b
+  } = l, h = [
+    e["tile-button"],
+    i ? e["tile-button--toggled"] : "",
+    d ? e["tile-button--destructive"] : "",
+    c ?? ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a(
+    "button",
+    {
+      ref: s,
+      className: h,
+      type: m,
+      disabled: u,
+      "aria-pressed": i === void 0 ? void 0 : i,
+      ...b,
+      children: [
+        /* @__PURE__ */ t("span", { className: e["tile-button__icon"], "aria-hidden": !0, children: /* @__PURE__ */ t(o.Provider, { value: { size: "20" }, children: n }) }),
+        /* @__PURE__ */ t("span", { className: e["tile-button__label"], children: r })
+      ]
+    }
+  );
+});
+T.displayName = "TileButton";
+export {
+  T as default
+};
+//# sourceMappingURL=TileButton.js.map

package/dist/components/tile-button/TileButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TileButton.js","sources":["../../../src/components/tile-button/TileButton.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 { renderAsChild } from '@/utils/slot';\nimport styles from './TileButton.module.scss';\n\ninterface TileButtonOwnProps {\n  /** Pass `<Icon glyph={<SomeIcon />} />` — TileButton provides the correct size (20) via context. */\n  icon: ReactNode;\n  /** Visible label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  destructive?: boolean;\n  className?: string;\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 TileButtonProps\n  extends TileButtonOwnProps, ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * When true, merges TileButton 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 set, this is a toggle; maps to `aria-pressed`. Only applies to the native\n   * `<button>`; not available with `asChild`.\n   */\n  toggled?: boolean;\n}\n\nexport interface TileButtonAsChildProps\n  extends\n    TileButtonOwnProps,\n    Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'> {\n  /**\n   * Merges TileButton 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; TileButton supplies the icon and label anatomy.\n   */\n  asChild: true;\n  /** Single empty element to render as the TileButton (e.g. `<a href=\"…\" />`). */\n  children: ReactElement;\n}\n\ntype TileButtonComponent = {\n  (\n    props: TileButtonAsChildProps & RefAttributes<HTMLElement>,\n  ): ReactElement | null;\n  (\n    props: TileButtonProps & RefAttributes<HTMLButtonElement>,\n  ): ReactElement | null;\n  displayName?: string;\n};\n\n/**\n * Tile Buttons surface a small set of high-frequency actions in a fixed context — a\n * profile popover, a channel info panel, a card. They sit close to the content they act on\n * and read as a row of equal-weight choices.\n *\n * Pass `asChild` with a single empty `<a>` or router `Link` child to render a navigational\n * action with Tile Button styling (no nested `<button>`).\n */\nconst TileButton = forwardRef(function TileButton(\n  props: TileButtonProps | TileButtonAsChildProps,\n  ref: Ref<HTMLButtonElement | HTMLElement>,\n) {\n  if (props.asChild) {\n    const {\n      icon,\n      label,\n      destructive = false,\n      className,\n      disabled,\n      children,\n      asChild,\n      ...rest\n    } = props;\n    void asChild;\n\n    const rootClass = [\n      styles['tile-button'],\n      destructive ? styles['tile-button--destructive'] : '',\n      className ?? '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const anatomy = (\n      <>\n        <span className={styles['tile-button__icon']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: '20' }}>\n            {icon}\n          </IconSlotContext.Provider>\n        </span>\n        <span className={styles['tile-button__label']}>{label}</span>\n      </>\n    );\n\n    return renderAsChild({\n      child: children,\n      props: {\n        ...rest,\n        className: rootClass,\n      },\n      ref,\n      content: anatomy,\n      disabled: Boolean(disabled),\n      disabledClassName: styles['tile-button--disabled'],\n      warnOnChildContent: true,\n    });\n  }\n\n  const {\n    icon,\n    label,\n    toggled,\n    destructive = false,\n    className,\n    disabled,\n    type = 'button',\n    asChild,\n    ...htmlProps\n  } = props;\n  void asChild;\n\n  const rootClass = [\n    styles['tile-button'],\n    toggled ? styles['tile-button--toggled'] : '',\n    destructive ? styles['tile-button--destructive'] : '',\n    className ?? '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      ref={ref as Ref<HTMLButtonElement>}\n      className={rootClass}\n      type={type}\n      disabled={disabled}\n      aria-pressed={toggled === undefined ? undefined : toggled}\n      {...htmlProps}\n    >\n      <span className={styles['tile-button__icon']} aria-hidden>\n        <IconSlotContext.Provider value={{ size: '20' }}>\n          {icon}\n        </IconSlotContext.Provider>\n      </span>\n      <span className={styles['tile-button__label']}>{label}</span>\n    </button>\n  );\n}) as TileButtonComponent;\n\nTileButton.displayName = 'TileButton';\n\nexport default TileButton;\n"],"names":["TileButton","forwardRef","props","ref","icon","label","destructive","className","disabled","children","asChild","rest","rootClass","styles","anatomy","jsxs","Fragment","jsx","IconSlotContext","renderAsChild","toggled","type","htmlProps"],"mappings":";;;;;AA2EA,MAAMA,IAAaC,EAAW,SAC5BC,GACAC,GACA;AACA,MAAID,EAAM,SAAS;AACjB,UAAM;AAAA,MACJ,MAAAE;AAAAA,MACA,OAAAC;AAAAA,MACA,aAAAC,IAAc;AAAA,MACd,WAAAC;AAAAA,MACA,UAAAC;AAAAA,MACA,UAAAC;AAAA,MACA,SAAAC;AAAAA,MACA,GAAGC;AAAA,IAAA,IACDT,GAGEU,IAAY;AAAA,MAChBC,EAAO,aAAa;AAAA,MACpBP,IAAcO,EAAO,0BAA0B,IAAI;AAAA,MACnDN,KAAa;AAAA,IAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG,GAELO,IACJ,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC,EAAC,UAAK,WAAWJ,EAAO,mBAAmB,GAAG,eAAW,IACvD,UAAA,gBAAAI,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,QACtC,UAAAd,GACH,GACF;AAAA,wBACC,QAAA,EAAK,WAAWS,EAAO,oBAAoB,GAAI,UAAAR,EAAAA,CAAM;AAAA,IAAA,GACxD;AAGF,WAAOc,EAAc;AAAA,MACnB,OAAOV;AAAA,MACP,OAAO;AAAA,QACL,GAAGE;AAAA,QACH,WAAWC;AAAAA,MAAA;AAAA,MAEb,KAAAT;AAAA,MACA,SAASW;AAAA,MACT,UAAU,EAAQN;AAAAA,MAClB,mBAAmBK,EAAO,uBAAuB;AAAA,MACjD,oBAAoB;AAAA,IAAA,CACrB;AAAA,EACH;AAEA,QAAM;AAAA,IACJ,MAAAT;AAAA,IACA,OAAAC;AAAA,IACA,SAAAe;AAAA,IACA,aAAAd,IAAc;AAAA,IACd,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAa,IAAO;AAAA,IACP,SAAAX;AAAA,IACA,GAAGY;AAAA,EAAA,IACDpB,GAGEU,IAAY;AAAA,IAChBC,EAAO,aAAa;AAAA,IACpBO,IAAUP,EAAO,sBAAsB,IAAI;AAAA,IAC3CP,IAAcO,EAAO,0BAA0B,IAAI;AAAA,IACnDN,KAAa;AAAA,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAZ;AAAA,MACA,WAAWS;AAAA,MACX,MAAAS;AAAA,MACA,UAAAb;AAAA,MACA,gBAAcY,MAAY,SAAY,SAAYA;AAAA,MACjD,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAL,EAAC,UAAK,WAAWJ,EAAO,mBAAmB,GAAG,eAAW,IACvD,UAAA,gBAAAI,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,KAAA,GACtC,aACH,GACF;AAAA,0BACC,QAAA,EAAK,WAAWL,EAAO,oBAAoB,GAAI,UAAAR,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5D,CAAC;AAEDL,EAAW,cAAc;"}

package/dist/components/tile-button/TileButton.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./TileButton.css');const t={"tile-button":"_tile-button_d4o4n_13","tile-button--disabled":"_tile-button--disabled_d4o4n_59","tile-button--toggled":"_tile-button--toggled_d4o4n_71","tile-button__icon":"_tile-button__icon_d4o4n_75","tile-button__label":"_tile-button__label_d4o4n_76","tile-button--destructive":"_tile-button--destructive_d4o4n_85"};exports.default=t;
+//# sourceMappingURL=TileButton.module.scss.cjs.map

package/dist/components/tile-button/TileButton.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TileButton.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/tile-button/TileButton.module.scss.js

@@ -0,0 +1,12 @@
+import './TileButton.css';const t = {
+  "tile-button": "_tile-button_d4o4n_13",
+  "tile-button--disabled": "_tile-button--disabled_d4o4n_59",
+  "tile-button--toggled": "_tile-button--toggled_d4o4n_71",
+  "tile-button__icon": "_tile-button__icon_d4o4n_75",
+  "tile-button__label": "_tile-button__label_d4o4n_76",
+  "tile-button--destructive": "_tile-button--destructive_d4o4n_85"
+};
+export {
+  t as default
+};
+//# sourceMappingURL=TileButton.module.scss.js.map

package/dist/components/tile-button/TileButton.module.scss.js.map

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