@mattermost/compass-ui 0.1.0-alpha.2 → 0.1.0-alpha.20

package/dist/components/card-button/CardButtonGroup.js

@@ -0,0 +1,85 @@
+import { jsx as E } from "react/jsx-runtime";
+import { useRef as v, useLayoutEffect as R } from "react";
+import w from "./CardButtonGroup.module.scss.js";
+function h(n) {
+  return [...n.querySelectorAll('[role="radio"]')];
+}
+function m(n) {
+  return h(n).filter((o) => !o.disabled);
+}
+function b(n, o) {
+  const a = h(n);
+  if (a.length === 0) return;
+  const s = m(n), l = s.find((r) => r.getAttribute("aria-checked") === "true") ?? a.find((r) => r.getAttribute("aria-checked") === "true"), f = o && a.includes(o) && !o.disabled ? o : l ?? s[0] ?? a[0];
+  a.forEach((r) => {
+    r.tabIndex = r === f ? 0 : -1;
+  });
+}
+function y({
+  children: n,
+  className: o = "",
+  role: a = "radiogroup",
+  onKeyDown: s,
+  onFocus: l,
+  ...f
+}) {
+  const r = v(null);
+  R(() => {
+    const e = r.current;
+    e != null && b(e);
+  }, [n]);
+  const k = (e) => {
+    l == null || l(e);
+    const c = e.currentTarget;
+    if (h(c).length === 0) return;
+    const t = e.target;
+    if (!(t instanceof HTMLElement)) return;
+    const i = t.closest('[role="radio"]');
+    i == null || !c.contains(i) || b(c, i);
+  }, p = (e) => {
+    if (s == null || s(e), e.defaultPrevented) return;
+    const c = r.current;
+    if (c == null) return;
+    const t = m(c);
+    if (t.length === 0) return;
+    const i = document.activeElement;
+    if (!(i instanceof HTMLElement) || !c.contains(i)) return;
+    const A = i.closest('[role="radio"]'), g = t.findIndex((u) => u === A);
+    if (g < 0) return;
+    const d = (u) => {
+      e.preventDefault(), b(c, u), u.focus({ focusVisible: !0 }), u.getAttribute("aria-checked") !== "true" && u.click();
+    };
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        d(t[(g + 1) % t.length]);
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        d(t[(g - 1 + t.length) % t.length]);
+        break;
+      case "Home":
+        d(t[0]);
+        break;
+      case "End":
+        d(t[t.length - 1]);
+        break;
+    }
+  };
+  return /* @__PURE__ */ E(
+    "div",
+    {
+      role: a,
+      className: [w["card-button-group"], o].filter(Boolean).join(" "),
+      ...f,
+      ref: r,
+      onKeyDown: p,
+      onFocus: k,
+      children: n
+    }
+  );
+}
+export {
+  y as default
+};
+//# sourceMappingURL=CardButtonGroup.js.map

package/dist/components/card-button/CardButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardButtonGroup.js","sources":["../../../src/components/card-button/CardButtonGroup.tsx"],"sourcesContent":["import {\n  useLayoutEffect,\n  useRef,\n  type FocusEvent,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport styles from './CardButtonGroup.module.scss';\n\nexport interface CardButtonGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  className?: string;\n}\n\nfunction radiosIn(group: ParentNode): HTMLButtonElement[] {\n  return [...group.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]')];\n}\n\nfunction enabledRadiosIn(group: ParentNode): HTMLButtonElement[] {\n  return radiosIn(group).filter((radio) => !radio.disabled);\n}\n\nfunction syncRadioTabStops(group: HTMLElement, preferred?: HTMLButtonElement) {\n  const radios = radiosIn(group);\n  if (radios.length === 0) return;\n\n  const enabled = enabledRadiosIn(group);\n  const checked =\n    enabled.find((radio) => radio.getAttribute('aria-checked') === 'true') ??\n    radios.find((radio) => radio.getAttribute('aria-checked') === 'true');\n  const tabStop =\n    preferred && radios.includes(preferred) && !preferred.disabled\n      ? preferred\n      : (checked ?? enabled[0] ?? radios[0]);\n\n  radios.forEach((radio) => {\n    radio.tabIndex = radio === tabStop ? 0 : -1;\n  });\n}\n\n/**\n * Lays out Card Buttons in a horizontal row (Figma Card Button Group).\n * Defaults to `role=\"radiogroup\"` — set child cards to `role=\"radio\"`.\n * When children use `role=\"radio\"`, applies the ARIA radio keyboard model\n * (roving tabindex + arrow selection with wrapping).\n */\nexport default function CardButtonGroup({\n  children,\n  className = '',\n  role = 'radiogroup',\n  onKeyDown,\n  onFocus,\n  ...rest\n}: CardButtonGroupProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    const group = ref.current;\n    if (group == null) return;\n    syncRadioTabStops(group);\n  }, [children]);\n\n  const handleFocus = (e: FocusEvent<HTMLDivElement>) => {\n    onFocus?.(e);\n    const group = e.currentTarget;\n    if (radiosIn(group).length === 0) return;\n    const target = e.target;\n    if (!(target instanceof HTMLElement)) return;\n    const radio = target.closest<HTMLButtonElement>('[role=\"radio\"]');\n    if (radio == null || !group.contains(radio)) return;\n    syncRadioTabStops(group, radio);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented) return;\n\n    const group = ref.current;\n    if (group == null) return;\n    const radios = enabledRadiosIn(group);\n    if (radios.length === 0) return;\n\n    const active = document.activeElement;\n    if (!(active instanceof HTMLElement) || !group.contains(active)) return;\n    const radio = active.closest<HTMLButtonElement>('[role=\"radio\"]');\n    const index = radios.findIndex((r) => r === radio);\n    if (index < 0) return;\n\n    const selectRadio = (next: HTMLButtonElement) => {\n      e.preventDefault();\n      syncRadioTabStops(group, next);\n      next.focus({ focusVisible: true } as FocusOptions);\n      if (next.getAttribute('aria-checked') !== 'true') {\n        next.click();\n      }\n    };\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        selectRadio(radios[(index + 1) % radios.length]);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        selectRadio(radios[(index - 1 + radios.length) % radios.length]);\n        break;\n      case 'Home':\n        selectRadio(radios[0]);\n        break;\n      case 'End':\n        selectRadio(radios[radios.length - 1]);\n        break;\n      default:\n        break;\n    }\n  };\n\n  return (\n    <div\n      role={role}\n      className={[styles['card-button-group'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n      ref={ref}\n      onKeyDown={handleKeyDown}\n      onFocus={handleFocus}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["radiosIn","group","enabledRadiosIn","radio","syncRadioTabStops","preferred","radios","enabled","checked","tabStop","CardButtonGroup","children","className","role","onKeyDown","onFocus","rest","ref","useRef","useLayoutEffect","handleFocus","target","handleKeyDown","active","index","r","selectRadio","next","jsx","styles"],"mappings":"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"}

package/dist/components/card-button/CardButtonGroup.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./CardButtonGroup.css');const e={"card-button-group":"_card-button-group_1cufe_2"};exports.default=e;
+//# sourceMappingURL=CardButtonGroup.module.scss.cjs.map

package/dist/components/card-button/CardButtonGroup.module.scss.cjs.map

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

package/dist/components/card-button/CardButtonGroup.module.scss.js

@@ -0,0 +1,7 @@
+import './CardButtonGroup.css';const t = {
+  "card-button-group": "_card-button-group_1cufe_2"
+};
+export {
+  t as default
+};
+//# sourceMappingURL=CardButtonGroup.module.scss.js.map

package/dist/components/card-button/CardButtonGroup.module.scss.js.map

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

package/dist/components/card-button/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./CardButton.cjs"),r=require("./CardButtonGroup.cjs");exports.CardButton=t.default;exports.CardButtonGroup=r.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/card-button/index.cjs.map

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

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

@@ -0,0 +1,5 @@
+export { default as CardButton } from './CardButton';
+export type { CardButtonProps } from './CardButton';
+export { default as CardButtonGroup } from './CardButtonGroup';
+export type { CardButtonGroupProps } from './CardButtonGroup';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/card-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/card-button/index.js

@@ -0,0 +1,7 @@
+import { default as r } from "./CardButton.js";
+import { default as u } from "./CardButtonGroup.js";
+export {
+  r as CardButton,
+  u as CardButtonGroup
+};
+//# sourceMappingURL=index.js.map

package/dist/components/card-button/index.js.map

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

package/dist/components/channel-info-msg-header/ChannelInfoMsgHeader.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),e=require("./ChannelInfoMsgHeader.module.scss.cjs");function u({channelName:n,onChannelClick:o,tabs:t,teamName:s,className:r=""}){const c=n!=null&&n!==""?[{label:n,onClick:o}]:t??[{label:"Spec Reviews",active:!0}],d=[e.default["channel-info-msg-header"],r].filter(Boolean).join(" ");return l.jsx("div",{className:d,children:l.jsxs("div",{className:e.default["channel-info-msg-header__container"],children:[c.map((a,i)=>l.jsx("div",{className:[e.default["channel-info-msg-header__tab-area"],a.active?e.default["channel-info-msg-header__tab-area--active"]:""].filter(Boolean).join(" "),children:l.jsx("button",{type:"button",className:[e.default["channel-info-msg-header__tab"],a.active?e.default["channel-info-msg-header__tab--active"]:""].filter(Boolean).join(" "),onClick:a.onClick,children:a.label})},typeof a.label=="string"?`${a.label}-${i}`:i)),s!=null&&s!==""&&l.jsx("div",{className:e.default["channel-info-msg-header__team"],children:l.jsx("span",{className:e.default["channel-info-msg-header__team-name"],children:s})})]})})}exports.default=u;
+//# sourceMappingURL=ChannelInfoMsgHeader.cjs.map

package/dist/components/channel-info-msg-header/ChannelInfoMsgHeader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelInfoMsgHeader.cjs","sources":["../../../src/components/channel-info-msg-header/ChannelInfoMsgHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from './ChannelInfoMsgHeader.module.scss';\n\nexport interface ChannelInfoMsgHeaderTab {\n  /** Label text for this tab. Accepts translated nodes. */\n  label: ReactNode;\n  /** Whether this tab is currently active/selected. */\n  active?: boolean;\n  /** Click handler. */\n  onClick?: () => void;\n}\n\nexport interface ChannelInfoMsgHeaderProps {\n  /**\n   * Channel (or section) label — primary API for Mentions / Saved message\n   * indicators. Prefer this over `tabs` for a single channel chip.\n   */\n  channelName?: ReactNode;\n  /** Called when the channel label is pressed (`channelName` mode). */\n  onChannelClick?: () => void;\n  /**\n   * Multi-section tabs for channel info panels. Used when `channelName` is\n   * omitted.\n   */\n  tabs?: ChannelInfoMsgHeaderTab[];\n  /**\n   * Team name after the channel divider. Omit when the workspace has only one\n   * team or the team is already clear from context.\n   */\n  teamName?: ReactNode;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * The Channel Info Message Header names a channel (or section) and, when useful, the team it\n * belongs to. Use it above posts in Mentions and Saved lists, or as section tabs at the top\n * of a channel info panel.\n */\nexport default function ChannelInfoMsgHeader({\n  channelName,\n  onChannelClick,\n  tabs,\n  teamName,\n  className = '',\n}: ChannelInfoMsgHeaderProps) {\n  const resolvedTabs: ChannelInfoMsgHeaderTab[] =\n    channelName != null && channelName !== ''\n      ? [{ label: channelName, onClick: onChannelClick }]\n      : (tabs ?? [{ label: 'Spec Reviews', active: true }]);\n\n  const rootClass = [styles['channel-info-msg-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['channel-info-msg-header__container']}>\n        {resolvedTabs.map((tab, index) => (\n          <div\n            key={\n              typeof tab.label === 'string' ? `${tab.label}-${index}` : index\n            }\n            className={[\n              styles['channel-info-msg-header__tab-area'],\n              tab.active\n                ? styles['channel-info-msg-header__tab-area--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            <button\n              type=\"button\"\n              className={[\n                styles['channel-info-msg-header__tab'],\n                tab.active\n                  ? styles['channel-info-msg-header__tab--active']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              onClick={tab.onClick}\n            >\n              {tab.label}\n            </button>\n          </div>\n        ))}\n        {teamName != null && teamName !== '' && (\n          <div className={styles['channel-info-msg-header__team']}>\n            <span className={styles['channel-info-msg-header__team-name']}>\n              {teamName}\n            </span>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["ChannelInfoMsgHeader","channelName","onChannelClick","tabs","teamName","className","resolvedTabs","rootClass","styles","jsx","tab","index"],"mappings":"qMAuCA,SAAwBA,EAAqB,CAC3C,YAAAC,EACA,eAAAC,EACA,KAAAC,EACA,SAAAC,EACA,UAAAC,EAAY,EACd,EAA8B,CAC5B,MAAMC,EACJL,GAAe,MAAQA,IAAgB,GACnC,CAAC,CAAE,MAAOA,EAAa,QAASC,EAAgB,EAC/CC,GAAQ,CAAC,CAAE,MAAO,eAAgB,OAAQ,GAAM,EAEjDI,EAAY,CAACC,UAAO,yBAAyB,EAAGH,CAAS,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEI,EAAAA,IAAC,OAAI,UAAWF,EACd,gBAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,oCAAoC,EACxD,SAAA,CAAAF,EAAa,IAAI,CAACI,EAAKC,IACtBF,EAAAA,IAAC,MAAA,CAIC,UAAW,CACTD,EAAAA,QAAO,mCAAmC,EAC1CE,EAAI,OACAF,UAAO,2CAA2C,EAClD,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,SAAAC,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAW,CACTD,EAAAA,QAAO,8BAA8B,EACrCE,EAAI,OACAF,UAAO,sCAAsC,EAC7C,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASE,EAAI,QAEZ,SAAAA,EAAI,KAAA,CAAA,CACP,EAxBE,OAAOA,EAAI,OAAU,SAAW,GAAGA,EAAI,KAAK,IAAIC,CAAK,GAAKA,CAAA,CA0B/D,EACAP,GAAY,MAAQA,IAAa,IAChCK,EAAAA,IAAC,OAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACpD,eAAC,OAAA,CAAK,UAAWA,EAAAA,QAAO,oCAAoC,EACzD,WACH,CAAA,CACF,CAAA,CAAA,CAEJ,CAAA,CACF,CAEJ"}

package/dist/components/channel-info-msg-header/ChannelInfoMsgHeader.css

@@ -0,0 +1 @@
+._channel-info-msg-header_1vrlp_2{display:flex;align-items:center;padding:0 var(--spacing-xs)}._channel-info-msg-header__container_1vrlp_7{display:flex;align-items:center;flex-shrink:0}._channel-info-msg-header__tab-area_1vrlp_12{display:flex;align-items:flex-start;padding:0}._channel-info-msg-header__tab-area_1vrlp_12:not(:last-child){border-right:1px solid rgba(var(--center-channel-color-rgb),.16)}._channel-info-msg-header__tab-area--active_1vrlp_20 ._channel-info-msg-header__tab_1vrlp_12{color:var(--center-channel-color);font-weight:var(--font-weight-semibold)}._channel-info-msg-header__tab_1vrlp_12{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xxs);height:24px;padding:var(--spacing-xxxs) var(--spacing-s);border-radius:var(--radius-s);border:none;background:transparent;cursor:pointer;font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.75);white-space:nowrap;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._channel-info-msg-header__tab_1vrlp_12:hover{background-color:rgba(var(--center-channel-color-rgb),.08);color:var(--center-channel-color)}._channel-info-msg-header__tab--active_1vrlp_46{color:var(--center-channel-color)}._channel-info-msg-header__team_1vrlp_49{display:flex;align-items:flex-start;padding:var(--spacing-xxs) var(--spacing-s)}._channel-info-msg-header__team-name_1vrlp_54{font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.75);white-space:nowrap}

package/dist/components/channel-info-msg-header/ChannelInfoMsgHeader.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+export interface ChannelInfoMsgHeaderTab {
+    /** Label text for this tab. Accepts translated nodes. */
+    label: ReactNode;
+    /** Whether this tab is currently active/selected. */
+    active?: boolean;
+    /** Click handler. */
+    onClick?: () => void;
+}
+export interface ChannelInfoMsgHeaderProps {
+    /**
+     * Channel (or section) label — primary API for Mentions / Saved message
+     * indicators. Prefer this over `tabs` for a single channel chip.
+     */
+    channelName?: ReactNode;
+    /** Called when the channel label is pressed (`channelName` mode). */
+    onChannelClick?: () => void;
+    /**
+     * Multi-section tabs for channel info panels. Used when `channelName` is
+     * omitted.
+     */
+    tabs?: ChannelInfoMsgHeaderTab[];
+    /**
+     * Team name after the channel divider. Omit when the workspace has only one
+     * team or the team is already clear from context.
+     */
+    teamName?: ReactNode;
+    /** Optional CSS class name. */
+    className?: string;
+}
+/**
+ * The Channel Info Message Header names a channel (or section) and, when useful, the team it
+ * belongs to. Use it above posts in Mentions and Saved lists, or as section tabs at the top
+ * of a channel info panel.
+ */
+export default function ChannelInfoMsgHeader({ channelName, onChannelClick, tabs, teamName, className, }: ChannelInfoMsgHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChannelInfoMsgHeader.d.ts.map

package/dist/components/channel-info-msg-header/ChannelInfoMsgHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelInfoMsgHeader.d.ts","sourceRoot":"","sources":["../../../src/components/channel-info-msg-header/ChannelInfoMsgHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,uBAAuB;IACtC,yDAAyD;IACzD,KAAK,EAAE,SAAS,CAAC;IACjB,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,qEAAqE;IACrE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,IAAI,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,WAAW,EACX,cAAc,EACd,IAAI,EACJ,QAAQ,EACR,SAAc,GACf,EAAE,yBAAyB,2CAqD3B"}

package/dist/components/channel-info-msg-header/ChannelInfoMsgHeader.js

@@ -0,0 +1,40 @@
+import { jsx as a, jsxs as d } from "react/jsx-runtime";
+import e from "./ChannelInfoMsgHeader.module.scss.js";
+function _({
+  channelName: l,
+  onChannelClick: s,
+  tabs: r,
+  teamName: i,
+  className: c = ""
+}) {
+  const t = l != null && l !== "" ? [{ label: l, onClick: s }] : r ?? [{ label: "Spec Reviews", active: !0 }], h = [e["channel-info-msg-header"], c].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a("div", { className: h, children: /* @__PURE__ */ d("div", { className: e["channel-info-msg-header__container"], children: [
+    t.map((n, o) => /* @__PURE__ */ a(
+      "div",
+      {
+        className: [
+          e["channel-info-msg-header__tab-area"],
+          n.active ? e["channel-info-msg-header__tab-area--active"] : ""
+        ].filter(Boolean).join(" "),
+        children: /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            className: [
+              e["channel-info-msg-header__tab"],
+              n.active ? e["channel-info-msg-header__tab--active"] : ""
+            ].filter(Boolean).join(" "),
+            onClick: n.onClick,
+            children: n.label
+          }
+        )
+      },
+      typeof n.label == "string" ? `${n.label}-${o}` : o
+    )),
+    i != null && i !== "" && /* @__PURE__ */ a("div", { className: e["channel-info-msg-header__team"], children: /* @__PURE__ */ a("span", { className: e["channel-info-msg-header__team-name"], children: i }) })
+  ] }) });
+}
+export {
+  _ as default
+};
+//# sourceMappingURL=ChannelInfoMsgHeader.js.map

package/dist/components/channel-info-msg-header/ChannelInfoMsgHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelInfoMsgHeader.js","sources":["../../../src/components/channel-info-msg-header/ChannelInfoMsgHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from './ChannelInfoMsgHeader.module.scss';\n\nexport interface ChannelInfoMsgHeaderTab {\n  /** Label text for this tab. Accepts translated nodes. */\n  label: ReactNode;\n  /** Whether this tab is currently active/selected. */\n  active?: boolean;\n  /** Click handler. */\n  onClick?: () => void;\n}\n\nexport interface ChannelInfoMsgHeaderProps {\n  /**\n   * Channel (or section) label — primary API for Mentions / Saved message\n   * indicators. Prefer this over `tabs` for a single channel chip.\n   */\n  channelName?: ReactNode;\n  /** Called when the channel label is pressed (`channelName` mode). */\n  onChannelClick?: () => void;\n  /**\n   * Multi-section tabs for channel info panels. Used when `channelName` is\n   * omitted.\n   */\n  tabs?: ChannelInfoMsgHeaderTab[];\n  /**\n   * Team name after the channel divider. Omit when the workspace has only one\n   * team or the team is already clear from context.\n   */\n  teamName?: ReactNode;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * The Channel Info Message Header names a channel (or section) and, when useful, the team it\n * belongs to. Use it above posts in Mentions and Saved lists, or as section tabs at the top\n * of a channel info panel.\n */\nexport default function ChannelInfoMsgHeader({\n  channelName,\n  onChannelClick,\n  tabs,\n  teamName,\n  className = '',\n}: ChannelInfoMsgHeaderProps) {\n  const resolvedTabs: ChannelInfoMsgHeaderTab[] =\n    channelName != null && channelName !== ''\n      ? [{ label: channelName, onClick: onChannelClick }]\n      : (tabs ?? [{ label: 'Spec Reviews', active: true }]);\n\n  const rootClass = [styles['channel-info-msg-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['channel-info-msg-header__container']}>\n        {resolvedTabs.map((tab, index) => (\n          <div\n            key={\n              typeof tab.label === 'string' ? `${tab.label}-${index}` : index\n            }\n            className={[\n              styles['channel-info-msg-header__tab-area'],\n              tab.active\n                ? styles['channel-info-msg-header__tab-area--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            <button\n              type=\"button\"\n              className={[\n                styles['channel-info-msg-header__tab'],\n                tab.active\n                  ? styles['channel-info-msg-header__tab--active']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              onClick={tab.onClick}\n            >\n              {tab.label}\n            </button>\n          </div>\n        ))}\n        {teamName != null && teamName !== '' && (\n          <div className={styles['channel-info-msg-header__team']}>\n            <span className={styles['channel-info-msg-header__team-name']}>\n              {teamName}\n            </span>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["ChannelInfoMsgHeader","channelName","onChannelClick","tabs","teamName","className","resolvedTabs","rootClass","styles","jsx","tab","index"],"mappings":";;AAuCA,SAAwBA,EAAqB;AAAA,EAC3C,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAA8B;AAC5B,QAAMC,IACJL,KAAe,QAAQA,MAAgB,KACnC,CAAC,EAAE,OAAOA,GAAa,SAASC,GAAgB,IAC/CC,KAAQ,CAAC,EAAE,OAAO,gBAAgB,QAAQ,IAAM,GAEjDI,IAAY,CAACC,EAAO,yBAAyB,GAAGH,CAAS,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAI,EAAC,SAAI,WAAWF,GACd,4BAAC,OAAA,EAAI,WAAWC,EAAO,oCAAoC,GACxD,UAAA;AAAA,IAAAF,EAAa,IAAI,CAACI,GAAKC,MACtB,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QAIC,WAAW;AAAA,UACTD,EAAO,mCAAmC;AAAA,UAC1CE,EAAI,SACAF,EAAO,2CAA2C,IAClD;AAAA,QAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QAEX,UAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAW;AAAA,cACTD,EAAO,8BAA8B;AAAA,cACrCE,EAAI,SACAF,EAAO,sCAAsC,IAC7C;AAAA,YAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,YACX,SAASE,EAAI;AAAA,YAEZ,UAAAA,EAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MACP;AAAA,MAxBE,OAAOA,EAAI,SAAU,WAAW,GAAGA,EAAI,KAAK,IAAIC,CAAK,KAAKA;AAAA,IAAA,CA0B/D;AAAA,IACAP,KAAY,QAAQA,MAAa,MAChC,gBAAAK,EAAC,SAAI,WAAWD,EAAO,+BAA+B,GACpD,4BAAC,QAAA,EAAK,WAAWA,EAAO,oCAAoC,GACzD,aACH,EAAA,CACF;AAAA,EAAA,EAAA,CAEJ,EAAA,CACF;AAEJ;"}

package/dist/components/channel-info-msg-header/ChannelInfoMsgHeader.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ChannelInfoMsgHeader.css');const e={"channel-info-msg-header":"_channel-info-msg-header_1vrlp_2","channel-info-msg-header__container":"_channel-info-msg-header__container_1vrlp_7","channel-info-msg-header__tab-area":"_channel-info-msg-header__tab-area_1vrlp_12","channel-info-msg-header__tab-area--active":"_channel-info-msg-header__tab-area--active_1vrlp_20","channel-info-msg-header__tab":"_channel-info-msg-header__tab_1vrlp_12","channel-info-msg-header__tab--active":"_channel-info-msg-header__tab--active_1vrlp_46","channel-info-msg-header__team":"_channel-info-msg-header__team_1vrlp_49","channel-info-msg-header__team-name":"_channel-info-msg-header__team-name_1vrlp_54"};exports.default=e;
+//# sourceMappingURL=ChannelInfoMsgHeader.module.scss.cjs.map

package/dist/components/channel-info-msg-header/ChannelInfoMsgHeader.module.scss.cjs.map

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

package/dist/components/channel-info-msg-header/ChannelInfoMsgHeader.module.scss.js

@@ -0,0 +1,14 @@
+import './ChannelInfoMsgHeader.css';const e = {
+  "channel-info-msg-header": "_channel-info-msg-header_1vrlp_2",
+  "channel-info-msg-header__container": "_channel-info-msg-header__container_1vrlp_7",
+  "channel-info-msg-header__tab-area": "_channel-info-msg-header__tab-area_1vrlp_12",
+  "channel-info-msg-header__tab-area--active": "_channel-info-msg-header__tab-area--active_1vrlp_20",
+  "channel-info-msg-header__tab": "_channel-info-msg-header__tab_1vrlp_12",
+  "channel-info-msg-header__tab--active": "_channel-info-msg-header__tab--active_1vrlp_46",
+  "channel-info-msg-header__team": "_channel-info-msg-header__team_1vrlp_49",
+  "channel-info-msg-header__team-name": "_channel-info-msg-header__team-name_1vrlp_54"
+};
+export {
+  e as default
+};
+//# sourceMappingURL=ChannelInfoMsgHeader.module.scss.js.map

package/dist/components/channel-info-msg-header/ChannelInfoMsgHeader.module.scss.js.map

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

package/dist/components/channel-info-msg-header/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ChannelInfoMsgHeader.cjs");exports.ChannelInfoMsgHeader=e.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/channel-info-msg-header/index.cjs.map

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

package/dist/components/channel-info-msg-header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/channel-info-msg-header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,YAAY,EACV,yBAAyB,EACzB,uBAAuB,GACxB,MAAM,wBAAwB,CAAC"}

package/dist/components/channel-info-msg-header/index.js

@@ -0,0 +1,5 @@
+import { default as f } from "./ChannelInfoMsgHeader.js";
+export {
+  f as ChannelInfoMsgHeader
+};
+//# sourceMappingURL=index.js.map

package/dist/components/channel-info-msg-header/index.js.map

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

package/dist/components/channel-sidebar-item/ChannelSidebarItem.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__M=require("@mattermost/compass-icons/components/globe.js"),M=__M?.default??__M,__S=require("@mattermost/compass-icons/components/lock-outline.js"),S=__S?.default??__S,__P=require("@mattermost/compass-icons/components/message-text-outline.js"),P=__P?.default??__P,__T=require("@mattermost/compass-icons/components/send-outline.js"),T=__T?.default??__T,__$=require("@mattermost/compass-icons/components/chart-line.js"),$=__$?.default??__$,__w=require("@mattermost/compass-icons/components/circle-multiple-outline.js"),w=__w?.default??__w,__A=require("@mattermost/compass-icons/components/phone-in-talk.js"),A=__A?.default??__A,__F=require("@mattermost/compass-icons/components/dots-vertical.js"),F=__F?.default??__F,__G=require("@mattermost/compass-icons/components/dialpad.js"),G=__G?.default??__G,H=require("../user-avatar/UserAvatar.cjs"),R=require("../mention-badge/MentionBadge.cjs"),U=require("../icon/Icon.cjs"),J=require("../icon-button/IconButton.cjs"),s=require("./ChannelSidebarItem.module.scss.cjs"),K=t=>`${t} mention${t===1?"":"s"}`;function L({leadingVisual:t,memberCount:r,avatarSrc:a,showAvatarStatus:n}){switch(t){case"private":return e.jsx(S,{size:16});case"group-message":return e.jsx("div",{className:s.default["channel-sidebar-item__group-icon"],children:r??2});case"direct-message":return e.jsx(H.default,{src:a??"",alt:"",size:"20",status:!!n});case"drafts":return e.jsx(T,{size:16});case"insights":return e.jsx($,{size:16});case"threads":return e.jsx(P,{size:16});case"dial-pad":return e.jsx(G,{size:16});case"public":default:return e.jsx(M,{size:16})}}function Q({className:t,name:r,hideLeadingVisual:a=!1,leadingVisual:n="public",status:d="read",active:c=!1,muted:_=!1,callActive:x=!1,sharedChannel:j=!1,mentionCount:o,memberCount:p,avatarSrc:v,showAvatarStatus:q=!1,customStatusEmoji:u,onClick:N,onMenuClick:l,formatMentionLabel:I=K,unreadLabel:g="unread",menuLabel:z="Channel options"}){const m=!a&&n==="direct-message",h=!a&&n==="drafts",i=h&&d==="unread"?"read":d,C=i==="mention",O=!a&&["public","private","group-message","direct-message"].includes(n),y=[s.default["channel-sidebar-item"],a?s.default["channel-sidebar-item--text-only"]:"",c?s.default["channel-sidebar-item--active"]:"",_?s.default["channel-sidebar-item--muted"]:"",s.default[`channel-sidebar-item--status-${i.toLowerCase()}`],h?s.default["channel-sidebar-item--drafts"]:"",t].filter(Boolean).join(" "),B=[s.default["channel-sidebar-item__icon-container"],m?s.default["channel-sidebar-item__icon-container--dm"]:""].filter(Boolean).join(" "),D=s.default["channel-sidebar-item__right"],f=i==="mention"?I(o??1):i==="unread"?g:void 0;return e.jsxs("div",{className:y,children:[c&&e.jsx("div",{className:s.default["channel-sidebar-item__active-border"]}),e.jsxs("button",{type:"button",className:s.default["channel-sidebar-item__left"],onClick:N,"aria-current":c?!0:void 0,children:[!a&&e.jsx("div",{className:B,"aria-hidden":!0,children:e.jsx(L,{leadingVisual:n,memberCount:p,avatarSrc:v,showAvatarStatus:q})}),e.jsxs("div",{className:s.default["channel-sidebar-item__content"],children:[e.jsx("span",{className:s.default["channel-sidebar-item__name"],children:r}),f&&e.jsx("span",{className:s.default["channel-sidebar-item__status-hint"],children:f}),j&&e.jsx("span",{className:s.default["channel-sidebar-item__shared-icon"],"aria-hidden":!0,children:e.jsx(w,{size:12})}),m&&u&&e.jsx("span",{className:s.default["channel-sidebar-item__custom-status"],"aria-hidden":!0,children:u})]})]}),e.jsxs("div",{className:D,children:[x&&e.jsx("div",{className:s.default["channel-sidebar-item__call"],"aria-hidden":!0,children:e.jsx(A,{size:12})}),C&&e.jsx("span",{className:s.default["channel-sidebar-item__mention-badge"],"aria-hidden":!0,children:e.jsx(R.default,{count:o??1,location:"sidebar",size:"medium"})}),O&&e.jsx("span",{className:s.default["channel-sidebar-item__menu-button"],children:e.jsx(J.default,{className:s.default["channel-sidebar-item__menu-icon"],size:"x-small",style:"inverted",icon:e.jsx(U.default,{glyph:e.jsx(F,{})}),"aria-label":z,onClick:b=>{b.stopPropagation(),l==null||l(b)}})})]})]})}exports.default=Q;
+//# sourceMappingURL=ChannelSidebarItem.cjs.map

package/dist/components/channel-sidebar-item/ChannelSidebarItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelSidebarItem.cjs","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport GlobeIcon from '@mattermost/compass-icons/components/globe';\nimport LockOutlineIcon from '@mattermost/compass-icons/components/lock-outline';\nimport MessageTextOutlineIcon from '@mattermost/compass-icons/components/message-text-outline';\nimport SendOutlineIcon from '@mattermost/compass-icons/components/send-outline';\nimport ChartLineIcon from '@mattermost/compass-icons/components/chart-line';\nimport CircleMultipleOutlineIcon from '@mattermost/compass-icons/components/circle-multiple-outline';\nimport PhoneInTalkIcon from '@mattermost/compass-icons/components/phone-in-talk';\nimport DotsVerticalIcon from '@mattermost/compass-icons/components/dots-vertical';\nimport DialpadIcon from '@mattermost/compass-icons/components/dialpad';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport styles from './ChannelSidebarItem.module.scss';\n\nexport type ChannelSidebarItemLeadingVisual =\n  | 'public'\n  | 'private'\n  | 'group-message'\n  | 'direct-message'\n  | 'drafts'\n  | 'insights'\n  | 'threads'\n  | 'dial-pad';\n\nexport type ChannelSidebarItemStatus = 'read' | 'unread' | 'mention';\n\nexport interface ChannelSidebarItemProps {\n  className?: string;\n  /** Channel or user display name. Accepts translated nodes. */\n  name: ReactNode;\n  /**\n   * Text-only row (e.g. System Console navigation): no channel glyph or\n   * overflow menu; name aligns with channel sidebar label padding.\n   */\n  hideLeadingVisual?: boolean;\n  /** Leading visual type. Default: Public. Ignored when `hideLeadingVisual`. */\n  leadingVisual?: ChannelSidebarItemLeadingVisual;\n  /** Read/unread/mention state. Default: Read. */\n  status?: ChannelSidebarItemStatus;\n  /** Highlighted as the currently active item. */\n  active?: boolean;\n  /** Muted channel — reduces visual prominence. */\n  muted?: boolean;\n  /** Shows a call-in-progress indicator on the right. */\n  callActive?: boolean;\n  /** Shows the shared-channel icon after the name. */\n  sharedChannel?: boolean;\n  /** Mention count shown in the badge when status='mention'. */\n  mentionCount?: number;\n  /** Member count shown in the group icon when leadingVisual='group-message'. */\n  memberCount?: number;\n  /** Avatar image URL for leadingVisual='direct-message'. */\n  avatarSrc?: string;\n  /** Avatar alt text for leadingVisual='direct-message'. */\n  avatarAlt?: string;\n  /** Shows status badge on the avatar when leadingVisual='direct-message'. */\n  showAvatarStatus?: boolean;\n  /** Custom status emoji shown after the name for leadingVisual='direct-message'. */\n  customStatusEmoji?: string;\n  onClick?: () => void;\n  /** Overflow menu (kebab). Sibling of the channel control so it is keyboard-reachable. */\n  onMenuClick?: (event: MouseEvent<HTMLButtonElement>) => void;\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: \"Channel options\". */\n  menuLabel?: string;\n}\n\nconst defaultFormatMentions = (count: number) =>\n  `${count} mention${count === 1 ? '' : 's'}`;\n\nfunction LeadingVisualContent({\n  leadingVisual,\n  memberCount,\n  avatarSrc,\n  showAvatarStatus,\n}: {\n  leadingVisual: ChannelSidebarItemLeadingVisual;\n  memberCount: number | undefined;\n  avatarSrc: string | undefined;\n  showAvatarStatus: boolean | undefined;\n}) {\n  switch (leadingVisual) {\n    case 'private':\n      return <LockOutlineIcon size={16} />;\n    case 'group-message':\n      return (\n        <div className={styles['channel-sidebar-item__group-icon']}>\n          {memberCount ?? 2}\n        </div>\n      );\n    case 'direct-message':\n      return (\n        <UserAvatar\n          src={avatarSrc ?? ''}\n          alt=\"\"\n          size=\"20\"\n          status={!!showAvatarStatus}\n        />\n      );\n    case 'drafts':\n      return <SendOutlineIcon size={16} />;\n    case 'insights':\n      return <ChartLineIcon size={16} />;\n    case 'threads':\n      return <MessageTextOutlineIcon size={16} />;\n    case 'dial-pad':\n      return <DialpadIcon size={16} />;\n    case 'public':\n    default:\n      return <GlobeIcon size={16} />;\n  }\n}\n\n/**\n * The Channel Sidebar Item is the row people use to move between channels, DMs, and group\n * messages. It compresses a lot of state — channel type, unread, mention count, mute,\n * in-call — into a single, scannable line.\n */\nexport default function ChannelSidebarItem({\n  className,\n  name,\n  hideLeadingVisual = false,\n  leadingVisual = 'public',\n  status = 'read',\n  active = false,\n  muted = false,\n  callActive = false,\n  sharedChannel = false,\n  mentionCount,\n  memberCount,\n  avatarSrc,\n  showAvatarStatus = false,\n  customStatusEmoji,\n  onClick,\n  onMenuClick,\n  formatMentionLabel = defaultFormatMentions,\n  unreadLabel = 'unread',\n  menuLabel = 'Channel options',\n}: ChannelSidebarItemProps) {\n  const isDM = !hideLeadingVisual && leadingVisual === 'direct-message';\n  const isDrafts = !hideLeadingVisual && leadingVisual === 'drafts';\n  const effectiveStatus = isDrafts && status === 'unread' ? 'read' : status;\n  const hasMentionBadge = effectiveStatus === 'mention';\n  const isChannelOrDM =\n    !hideLeadingVisual &&\n    ['public', 'private', 'group-message', 'direct-message'].includes(\n      leadingVisual,\n    );\n\n  const rootClass = [\n    styles['channel-sidebar-item'],\n    hideLeadingVisual ? styles['channel-sidebar-item--text-only'] : '',\n    active ? styles['channel-sidebar-item--active'] : '',\n    muted ? styles['channel-sidebar-item--muted'] : '',\n    styles[`channel-sidebar-item--status-${effectiveStatus.toLowerCase()}`],\n    isDrafts ? styles['channel-sidebar-item--drafts'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const iconContainerClass = [\n    styles['channel-sidebar-item__icon-container'],\n    isDM ? styles['channel-sidebar-item__icon-container--dm'] : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const rightClass = styles['channel-sidebar-item__right'];\n\n  const statusHint =\n    effectiveStatus === 'mention'\n      ? formatMentionLabel(mentionCount ?? 1)\n      : effectiveStatus === 'unread'\n        ? unreadLabel\n        : undefined;\n\n  return (\n    <div className={rootClass}>\n      {active && (\n        <div className={styles['channel-sidebar-item__active-border']} />\n      )}\n      <button\n        type=\"button\"\n        className={styles['channel-sidebar-item__left']}\n        onClick={onClick}\n        aria-current={active ? true : undefined}\n      >\n        {!hideLeadingVisual && (\n          <div className={iconContainerClass} aria-hidden>\n            <LeadingVisualContent\n              leadingVisual={leadingVisual}\n              memberCount={memberCount}\n              avatarSrc={avatarSrc}\n              showAvatarStatus={showAvatarStatus}\n            />\n          </div>\n        )}\n        <div className={styles['channel-sidebar-item__content']}>\n          <span className={styles['channel-sidebar-item__name']}>{name}</span>\n          {statusHint && (\n            <span className={styles['channel-sidebar-item__status-hint']}>\n              {statusHint}\n            </span>\n          )}\n          {sharedChannel && (\n            <span\n              className={styles['channel-sidebar-item__shared-icon']}\n              aria-hidden\n            >\n              <CircleMultipleOutlineIcon size={12} />\n            </span>\n          )}\n          {isDM && customStatusEmoji && (\n            <span\n              className={styles['channel-sidebar-item__custom-status']}\n              aria-hidden\n            >\n              {customStatusEmoji}\n            </span>\n          )}\n        </div>\n      </button>\n      <div className={rightClass}>\n        {callActive && (\n          <div className={styles['channel-sidebar-item__call']} aria-hidden>\n            <PhoneInTalkIcon size={12} />\n          </div>\n        )}\n        {hasMentionBadge && (\n          <span\n            className={styles['channel-sidebar-item__mention-badge']}\n            aria-hidden\n          >\n            <MentionBadge\n              count={mentionCount ?? 1}\n              location=\"sidebar\"\n              size=\"medium\"\n            />\n          </span>\n        )}\n        {isChannelOrDM && (\n          <span className={styles['channel-sidebar-item__menu-button']}>\n            <IconButton\n              className={styles['channel-sidebar-item__menu-icon']}\n              size=\"x-small\"\n              style=\"inverted\"\n              icon={<Icon glyph={<DotsVerticalIcon />} />}\n              aria-label={menuLabel}\n              onClick={(e) => {\n                e.stopPropagation();\n                onMenuClick?.(e);\n              }}\n            />\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["defaultFormatMentions","count","LeadingVisualContent","leadingVisual","memberCount","avatarSrc","showAvatarStatus","jsx","LockOutlineIcon","styles","UserAvatar","SendOutlineIcon","ChartLineIcon","MessageTextOutlineIcon","DialpadIcon","GlobeIcon","ChannelSidebarItem","className","name","hideLeadingVisual","status","active","muted","callActive","sharedChannel","mentionCount","customStatusEmoji","onClick","onMenuClick","formatMentionLabel","unreadLabel","menuLabel","isDM","isDrafts","effectiveStatus","hasMentionBadge","isChannelOrDM","rootClass","iconContainerClass","rightClass","statusHint","jsxs","CircleMultipleOutlineIcon","PhoneInTalkIcon","MentionBadge","IconButton","Icon","DotsVerticalIcon","e"],"mappings":"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"}

package/dist/components/channel-sidebar-item/ChannelSidebarItem.css

@@ -0,0 +1 @@
+._channel-sidebar-item_m2jgi_2{position:relative;display:flex;align-items:center;height:32px;overflow:hidden;-webkit-user-select:none;user-select:none}._channel-sidebar-item__menu-button_m2jgi_10{position:absolute;top:50%;right:var(--spacing-l);display:flex;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-transition)}._channel-sidebar-item__mention-badge_m2jgi_20{transition:opacity var(--duration-quick) var(--ease-transition)}._channel-sidebar-item_m2jgi_2 ._channel-sidebar-item__menu-icon_m2jgi_23{--focus-ring-color: var(--sidebar-text-active-border)}._channel-sidebar-item_m2jgi_2:hover,._channel-sidebar-item_m2jgi_2:focus-within{overflow:visible}._channel-sidebar-item_m2jgi_2:hover ._channel-sidebar-item__menu-button_m2jgi_10,._channel-sidebar-item_m2jgi_2:focus-within ._channel-sidebar-item__menu-button_m2jgi_10{opacity:1;pointer-events:auto}._channel-sidebar-item_m2jgi_2:hover ._channel-sidebar-item__mention-badge_m2jgi_20,._channel-sidebar-item_m2jgi_2:focus-within ._channel-sidebar-item__mention-badge_m2jgi_20{opacity:0;pointer-events:none}._channel-sidebar-item_m2jgi_2:hover:not(._channel-sidebar-item--active_m2jgi_37),._channel-sidebar-item_m2jgi_2:focus-within:not(._channel-sidebar-item--active_m2jgi_37){background:rgba(var(--sidebar-text-rgb),.08)}._channel-sidebar-item__active-border_m2jgi_40{flex-shrink:0;width:2px;align-self:stretch;border-radius:0 2px 2px 0;background:var(--sidebar-text-active-border)}._channel-sidebar-item__left_m2jgi_47{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border:none;background:transparent;display:flex;align-items:center;flex:1;min-width:0;align-self:stretch;gap:var(--spacing-xxxxs);padding:var(--spacing-xxxxs) var(--spacing-xs) var(--spacing-xxxxs) 18px;cursor:pointer;font:inherit;color:inherit;text-align:left}._channel-sidebar-item__left_m2jgi_47:focus{outline:none}._channel-sidebar-item__left_m2jgi_47:focus-visible{box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._channel-sidebar-item__icon-container_m2jgi_70{display:flex;align-items:center;flex-shrink:0;padding:var(--spacing-xxxs);color:var(--sidebar-text);opacity:.64}._channel-sidebar-item__icon-container--dm_m2jgi_78{padding:var(--spacing-xxxxs);opacity:1;--status-badge-bg: var(--sidebar-bg)}._channel-sidebar-item__group-icon_m2jgi_83{width:var(--icon-size-16);height:var(--icon-size-16);display:flex;align-items:center;justify-content:center;background:rgba(var(--sidebar-text-rgb),.16);border-radius:var(--radius-s);font-family:var(--font-family-body);font-size:var(--font-size-50);font-weight:var(--font-weight-semibold);line-height:var(--line-height-25);letter-spacing:.01em;color:var(--sidebar-text);opacity:.72}._channel-sidebar-item__content_m2jgi_99{display:flex;align-items:center;flex:1;min-width:0;gap:var(--spacing-xs);padding:2px var(--spacing-xxxxs)}._channel-sidebar-item__name_m2jgi_107{font-family:var(--font-family-body);font-size:var(--font-size-100);font-weight:var(--font-weight-regular);line-height:var(--line-height-100);letter-spacing:.02em;color:var(--sidebar-text);opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:144px}._channel-sidebar-item__status-hint_m2jgi_120{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._channel-sidebar-item__shared-icon_m2jgi_131{display:flex;align-items:center;flex-shrink:0;padding:var(--spacing-xxxs) 0;color:var(--sidebar-text);opacity:.72}._channel-sidebar-item__custom-status_m2jgi_139{display:flex;align-items:center;flex-shrink:0;font-size:var(--font-size-200);line-height:var(--line-height-25);opacity:.8}._channel-sidebar-item__right_m2jgi_147{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0;gap:var(--spacing-xxxxs);padding-right:var(--spacing-l);color:var(--sidebar-text)}._channel-sidebar-item__call_m2jgi_156{display:flex;align-items:center;justify-content:center;padding:var(--spacing-xxxs);border-radius:var(--radius-s)}._channel-sidebar-item--text-only_m2jgi_166 ._channel-sidebar-item__left_m2jgi_47{gap:0}._channel-sidebar-item--active_m2jgi_37{background:rgba(var(--sidebar-text-rgb),.12)}._channel-sidebar-item--active_m2jgi_37 ._channel-sidebar-item__left_m2jgi_47{padding-left:var(--spacing-l)}._channel-sidebar-item--active_m2jgi_37 ._channel-sidebar-item__name_m2jgi_107,._channel-sidebar-item--status-unread_m2jgi_178 ._channel-sidebar-item__icon-container_m2jgi_70,._channel-sidebar-item--status-mention_m2jgi_178 ._channel-sidebar-item__icon-container_m2jgi_70{opacity:1}._channel-sidebar-item--status-unread_m2jgi_178 ._channel-sidebar-item__name_m2jgi_107,._channel-sidebar-item--status-mention_m2jgi_178 ._channel-sidebar-item__name_m2jgi_107{font-weight:var(--font-weight-semibold);opacity:1}._channel-sidebar-item--drafts_m2jgi_185 ._channel-sidebar-item__icon-container_m2jgi_70{opacity:.64}._channel-sidebar-item--drafts_m2jgi_185 ._channel-sidebar-item__name_m2jgi_107{font-weight:var(--font-weight-regular);opacity:.72}._channel-sidebar-item--drafts_m2jgi_185 ._channel-sidebar-item__mention-badge_m2jgi_20>*{background-color:transparent;color:var(--sidebar-text);padding-left:0;padding-right:var(--spacing-xxs)}._channel-sidebar-item--drafts_m2jgi_185._channel-sidebar-item--active_m2jgi_37 ._channel-sidebar-item__name_m2jgi_107{opacity:1}._channel-sidebar-item--muted_m2jgi_201 ._channel-sidebar-item__icon-container_m2jgi_70,._channel-sidebar-item--muted_m2jgi_201 ._channel-sidebar-item__name_m2jgi_107,._channel-sidebar-item--muted_m2jgi_201 ._channel-sidebar-item__shared-icon_m2jgi_131{opacity:.4}

package/dist/components/channel-sidebar-item/ChannelSidebarItem.d.ts

@@ -0,0 +1,53 @@
+import { MouseEvent, ReactNode } from 'react';
+export type ChannelSidebarItemLeadingVisual = 'public' | 'private' | 'group-message' | 'direct-message' | 'drafts' | 'insights' | 'threads' | 'dial-pad';
+export type ChannelSidebarItemStatus = 'read' | 'unread' | 'mention';
+export interface ChannelSidebarItemProps {
+    className?: string;
+    /** Channel or user display name. Accepts translated nodes. */
+    name: ReactNode;
+    /**
+     * Text-only row (e.g. System Console navigation): no channel glyph or
+     * overflow menu; name aligns with channel sidebar label padding.
+     */
+    hideLeadingVisual?: boolean;
+    /** Leading visual type. Default: Public. Ignored when `hideLeadingVisual`. */
+    leadingVisual?: ChannelSidebarItemLeadingVisual;
+    /** Read/unread/mention state. Default: Read. */
+    status?: ChannelSidebarItemStatus;
+    /** Highlighted as the currently active item. */
+    active?: boolean;
+    /** Muted channel — reduces visual prominence. */
+    muted?: boolean;
+    /** Shows a call-in-progress indicator on the right. */
+    callActive?: boolean;
+    /** Shows the shared-channel icon after the name. */
+    sharedChannel?: boolean;
+    /** Mention count shown in the badge when status='mention'. */
+    mentionCount?: number;
+    /** Member count shown in the group icon when leadingVisual='group-message'. */
+    memberCount?: number;
+    /** Avatar image URL for leadingVisual='direct-message'. */
+    avatarSrc?: string;
+    /** Avatar alt text for leadingVisual='direct-message'. */
+    avatarAlt?: string;
+    /** Shows status badge on the avatar when leadingVisual='direct-message'. */
+    showAvatarStatus?: boolean;
+    /** Custom status emoji shown after the name for leadingVisual='direct-message'. */
+    customStatusEmoji?: string;
+    onClick?: () => void;
+    /** Overflow menu (kebab). Sibling of the channel control so it is keyboard-reachable. */
+    onMenuClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /** Visually hidden mention hint. Default: `{count} mention(s)`. */
+    formatMentionLabel?: (count: number) => ReactNode;
+    /** Visually hidden unread hint. Default: "unread". */
+    unreadLabel?: ReactNode;
+    /** Accessible name for the overflow menu button. Default: "Channel options". */
+    menuLabel?: string;
+}
+/**
+ * The Channel Sidebar Item is the row people use to move between channels, DMs, and group
+ * messages. It compresses a lot of state — channel type, unread, mention count, mute,
+ * in-call — into a single, scannable line.
+ */
+export default function ChannelSidebarItem({ className, name, hideLeadingVisual, leadingVisual, status, active, muted, callActive, sharedChannel, mentionCount, memberCount, avatarSrc, showAvatarStatus, customStatusEmoji, onClick, onMenuClick, formatMentionLabel, unreadLabel, menuLabel, }: ChannelSidebarItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChannelSidebarItem.d.ts.map

package/dist/components/channel-sidebar-item/ChannelSidebarItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelSidebarItem.d.ts","sourceRoot":"","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAgBnD,MAAM,MAAM,+BAA+B,GACvC,QAAQ,GACR,SAAS,GACT,eAAe,GACf,gBAAgB,GAChB,QAAQ,GACR,UAAU,GACV,SAAS,GACT,UAAU,CAAC;AAEf,MAAM,MAAM,wBAAwB,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErE,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,IAAI,EAAE,SAAS,CAAC;IAChB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,8EAA8E;IAC9E,aAAa,CAAC,EAAE,+BAA+B,CAAC;IAChD,gDAAgD;IAChD,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAClC,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iDAAiD;IACjD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mFAAmF;IACnF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yFAAyF;IACzF,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7D,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,sDAAsD;IACtD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgDD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,SAAS,EACT,IAAI,EACJ,iBAAyB,EACzB,aAAwB,EACxB,MAAe,EACf,MAAc,EACd,KAAa,EACb,UAAkB,EAClB,aAAqB,EACrB,YAAY,EACZ,WAAW,EACX,SAAS,EACT,gBAAwB,EACxB,iBAAiB,EACjB,OAAO,EACP,WAAW,EACX,kBAA0C,EAC1C,WAAsB,EACtB,SAA6B,GAC9B,EAAE,uBAAuB,2CAyHzB"}

package/dist/components/channel-sidebar-item/ChannelSidebarItem.js

@@ -0,0 +1,164 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import __w from "@mattermost/compass-icons/components/globe.js";const w=__w&&__w.default?__w.default:__w;
+import __P from "@mattermost/compass-icons/components/lock-outline.js";const P=__P&&__P.default?__P.default:__P;
+import __S from "@mattermost/compass-icons/components/message-text-outline.js";const S=__S&&__S.default?__S.default:__S;
+import __T from "@mattermost/compass-icons/components/send-outline.js";const T=__T&&__T.default?__T.default:__T;
+import __A from "@mattermost/compass-icons/components/chart-line.js";const A=__A&&__A.default?__A.default:__A;
+import __F from "@mattermost/compass-icons/components/circle-multiple-outline.js";const F=__F&&__F.default?__F.default:__F;
+import __G from "@mattermost/compass-icons/components/phone-in-talk.js";const G=__G&&__G.default?__G.default:__G;
+import __H from "@mattermost/compass-icons/components/dots-vertical.js";const H=__H&&__H.default?__H.default:__H;
+import __U from "@mattermost/compass-icons/components/dialpad.js";const U=__U&&__U.default?__U.default:__U;
+import q from "../user-avatar/UserAvatar.js";
+import J from "../mention-badge/MentionBadge.js";
+import K from "../icon/Icon.js";
+import L from "../icon-button/IconButton.js";
+import a from "./ChannelSidebarItem.module.scss.js";
+const Q = (s) => `${s} mention${s === 1 ? "" : "s"}`;
+function R({
+  leadingVisual: s,
+  memberCount: c,
+  avatarSrc: n,
+  showAvatarStatus: t
+}) {
+  switch (s) {
+    case "private":
+      return /* @__PURE__ */ e(P, { size: 16 });
+    case "group-message":
+      return /* @__PURE__ */ e("div", { className: a["channel-sidebar-item__group-icon"], children: c ?? 2 });
+    case "direct-message":
+      return /* @__PURE__ */ e(
+        q,
+        {
+          src: n ?? "",
+          alt: "",
+          size: "20",
+          status: !!t
+        }
+      );
+    case "drafts":
+      return /* @__PURE__ */ e(T, { size: 16 });
+    case "insights":
+      return /* @__PURE__ */ e(A, { size: 16 });
+    case "threads":
+      return /* @__PURE__ */ e(S, { size: 16 });
+    case "dial-pad":
+      return /* @__PURE__ */ e(U, { size: 16 });
+    case "public":
+    default:
+      return /* @__PURE__ */ e(w, { size: 16 });
+  }
+}
+function oe({
+  className: s,
+  name: c,
+  hideLeadingVisual: n = !1,
+  leadingVisual: t = "public",
+  status: m = "read",
+  active: o = !1,
+  muted: _ = !1,
+  callActive: N = !1,
+  sharedChannel: v = !1,
+  mentionCount: d,
+  memberCount: I,
+  avatarSrc: g,
+  showAvatarStatus: z = !1,
+  customStatusEmoji: h,
+  onClick: C,
+  onMenuClick: l,
+  formatMentionLabel: x = Q,
+  unreadLabel: y = "unread",
+  menuLabel: B = "Channel options"
+}) {
+  const p = !n && t === "direct-message", u = !n && t === "drafts", i = u && m === "unread" ? "read" : m, D = i === "mention", O = !n && ["public", "private", "group-message", "direct-message"].includes(
+    t
+  ), j = [
+    a["channel-sidebar-item"],
+    n ? a["channel-sidebar-item--text-only"] : "",
+    o ? a["channel-sidebar-item--active"] : "",
+    _ ? a["channel-sidebar-item--muted"] : "",
+    a[`channel-sidebar-item--status-${i.toLowerCase()}`],
+    u ? a["channel-sidebar-item--drafts"] : "",
+    s
+  ].filter(Boolean).join(" "), M = [
+    a["channel-sidebar-item__icon-container"],
+    p ? a["channel-sidebar-item__icon-container--dm"] : ""
+  ].filter(Boolean).join(" "), $ = a["channel-sidebar-item__right"], f = i === "mention" ? x(d ?? 1) : i === "unread" ? y : void 0;
+  return /* @__PURE__ */ r("div", { className: j, children: [
+    o && /* @__PURE__ */ e("div", { className: a["channel-sidebar-item__active-border"] }),
+    /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        className: a["channel-sidebar-item__left"],
+        onClick: C,
+        "aria-current": o ? !0 : void 0,
+        children: [
+          !n && /* @__PURE__ */ e("div", { className: M, "aria-hidden": !0, children: /* @__PURE__ */ e(
+            R,
+            {
+              leadingVisual: t,
+              memberCount: I,
+              avatarSrc: g,
+              showAvatarStatus: z
+            }
+          ) }),
+          /* @__PURE__ */ r("div", { className: a["channel-sidebar-item__content"], children: [
+            /* @__PURE__ */ e("span", { className: a["channel-sidebar-item__name"], children: c }),
+            f && /* @__PURE__ */ e("span", { className: a["channel-sidebar-item__status-hint"], children: f }),
+            v && /* @__PURE__ */ e(
+              "span",
+              {
+                className: a["channel-sidebar-item__shared-icon"],
+                "aria-hidden": !0,
+                children: /* @__PURE__ */ e(F, { size: 12 })
+              }
+            ),
+            p && h && /* @__PURE__ */ e(
+              "span",
+              {
+                className: a["channel-sidebar-item__custom-status"],
+                "aria-hidden": !0,
+                children: h
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ r("div", { className: $, children: [
+      N && /* @__PURE__ */ e("div", { className: a["channel-sidebar-item__call"], "aria-hidden": !0, children: /* @__PURE__ */ e(G, { size: 12 }) }),
+      D && /* @__PURE__ */ e(
+        "span",
+        {
+          className: a["channel-sidebar-item__mention-badge"],
+          "aria-hidden": !0,
+          children: /* @__PURE__ */ e(
+            J,
+            {
+              count: d ?? 1,
+              location: "sidebar",
+              size: "medium"
+            }
+          )
+        }
+      ),
+      O && /* @__PURE__ */ e("span", { className: a["channel-sidebar-item__menu-button"], children: /* @__PURE__ */ e(
+        L,
+        {
+          className: a["channel-sidebar-item__menu-icon"],
+          size: "x-small",
+          style: "inverted",
+          icon: /* @__PURE__ */ e(K, { glyph: /* @__PURE__ */ e(H, {}) }),
+          "aria-label": B,
+          onClick: (b) => {
+            b.stopPropagation(), l == null || l(b);
+          }
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  oe as default
+};
+//# sourceMappingURL=ChannelSidebarItem.js.map