npm - @mattermost/compass-ui - Versions diffs - 0.1.0-alpha.4 → 0.1.0-alpha.5 - Mend

@mattermost/compass-ui 0.1.0-alpha.4 → 0.1.0-alpha.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (226) hide show

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

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

package/dist/components/channel-sidebar-item/ChannelSidebarItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChannelSidebarItem.js","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"sourcesContent":["import 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 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. /\n name: string;\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}\n\nfunction LeadingVisualContent({\n leadingVisual,\n memberCount,\n avatarSrc,\n avatarAlt,\n showAvatarStatus,\n}: {\n leadingVisual: ChannelSidebarItemLeadingVisual;\n memberCount: number \| undefined;\n avatarSrc: string \| undefined;\n avatarAlt: 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={avatarAlt ?? ''}\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 avatarAlt,\n showAvatarStatus = false,\n customStatusEmoji,\n onClick,\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 return (\n <div\n role=\"button\"\n tabIndex={0}\n className={rootClass}\n onClick={onClick}\n onKeyDown={(e) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n onClick?.();\n }\n }}\n >\n {active && (\n <div className={styles['channel-sidebar-item__active-border']} />\n )}\n <div className={styles['channel-sidebar-item__left']}>\n {!hideLeadingVisual && (\n <div className={iconContainerClass}>\n <LeadingVisualContent\n leadingVisual={leadingVisual}\n memberCount={memberCount}\n avatarSrc={avatarSrc}\n avatarAlt={avatarAlt}\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 {sharedChannel && (\n <span className={styles['channel-sidebar-item__shared-icon']}>\n <CircleMultipleOutlineIcon size={12} />\n </span>\n )}\n {isDM && customStatusEmoji && (\n <span className={styles['channel-sidebar-item__custom-status']}>\n {customStatusEmoji}\n </span>\n )}\n </div>\n </div>\n <div className={rightClass}>\n {callActive && (\n <div className={styles['channel-sidebar-item__call']}>\n <PhoneInTalkIcon size={12} />\n </div>\n )}\n {hasMentionBadge && (\n <span className={styles['channel-sidebar-item__mention-badge']}>\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 size=\"x-small\"\n style=\"inverted\"\n icon={<DotsVerticalIcon size={12} />}\n aria-label=\"Channel options\"\n onClick={(e) => e.stopPropagation()}\n />\n </span>\n )}\n </div>\n </div>\n );\n}\n"],"names":["LeadingVisualContent","leadingVisual","memberCount","avatarSrc","avatarAlt","showAvatarStatus","jsx","LockOutlineIcon","styles","UserAvatar","SendOutlineIcon","ChartLineIcon","MessageTextOutlineIcon","DialpadIcon","GlobeIcon","ChannelSidebarItem","className","name","hideLeadingVisual","status","active","muted","callActive","sharedChannel","mentionCount","customStatusEmoji","onClick","isDM","isDrafts","effectiveStatus","hasMentionBadge","isChannelOrDM","rootClass","iconContainerClass","rightClass","jsxs","e","CircleMultipleOutlineIcon","PhoneInTalkIcon","MentionBadge","IconButton","DotsVerticalIcon"],"mappings":"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"}
1	+ {"version":3,"file":"ChannelSidebarItem.js","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"sourcesContent":["import type { MouseEvent } 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 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. /\n name: string;\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}\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}: 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 ? `${mentionCount ?? 1} mention${(mentionCount ?? 1) === 1 ? '' : 's'}`\n : effectiveStatus === 'unread'\n ? 'unread'\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={<DotsVerticalIcon size={12} />}\n aria-label=\"Channel options\"\n onClick={(e) => {\n e.stopPropagation();\n onMenuClick?.(e);\n }}\n />\n </span>\n )}\n </div>\n </div>\n );\n}\n"],"names":["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","isDM","isDrafts","effectiveStatus","hasMentionBadge","isChannelOrDM","rootClass","iconContainerClass","rightClass","statusHint","jsxs","CircleMultipleOutlineIcon","PhoneInTalkIcon","MentionBadge","IconButton","DotsVerticalIcon","e"],"mappings":"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"}

package/dist/components/channel-sidebar-item/ChannelSidebarItem.module.css CHANGED Viewed

	@@ -1 +1 @@
1	- ._channel-sidebar-~~item_1e5ys_2~~{position:relative;display:flex;align-items:center;height:32px;overflow:hidden~~;cursor:pointer~~;-webkit-user-select:none;user-select:none}._channel-sidebar-item__menu-~~button_1e5ys_11~~{display:none}._channel-sidebar-~~item_1e5ys_2:hover~~{~~background~~:~~rgba~~(var(--sidebar-text-~~rgb~~),.~~08)~~}._channel-sidebar-~~item_1e5ys_2~~:hover ._channel-sidebar-item__menu-~~button_1e5ys_11~~{~~display~~:~~contents~~}._channel-sidebar-~~item_1e5ys_2~~:hover ._channel-sidebar-item__mention-~~badge_1e5ys_20~~{~~display~~:none}._channel-sidebar-~~item_1e5ys_2~~:focus-~~visible{outline~~:~~none;box~~-~~shadow~~:~~inset 0 0 0 2px~~ var(--sidebar-text-~~active-border~~)}._channel-sidebar-item__active-~~border_1e5ys_27~~{flex-shrink:0;width:2px;align-self:stretch;border-radius:0 2px 2px 0;background:var(--sidebar-text-active-border)}._channel-sidebar-~~item__left_1e5ys_34~~{display:flex;align-items:center;flex:1;min-width:0;gap:var(--spacing-xxxxs);padding:var(--spacing-xxxxs) var(--spacing-xs) var(--spacing-xxxxs) 18px}._channel-sidebar-item__icon-~~container_1e5ys_42~~{display:flex;align-items:center;flex-shrink:0;padding:var(--spacing-xxxs);color:var(--sidebar-text);opacity:.64}._channel-sidebar-item__icon-container--~~dm_1e5ys_50~~{padding:var(--spacing-xxxxs);opacity:1;--status-badge-bg: var(--sidebar-bg)}._channel-sidebar-item__group-~~icon_1e5ys_55~~{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_1e5ys_71~~{display:flex;align-items:center;flex:1;min-width:0;gap:var(--spacing-xs);padding:2px var(--spacing-xxxxs)}._channel-sidebar-~~item__name_1e5ys_79~~{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__shared-~~icon_1e5ys_92~~{display:flex;align-items:center;flex-shrink:0;padding:var(--spacing-xxxs) 0;color:var(--sidebar-text);opacity:.72}._channel-sidebar-item__custom-~~status_1e5ys_100~~{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_1e5ys_108~~{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_1e5ys_117~~{display:flex;align-items:center;justify-content:center;padding:var(--spacing-xxxs);border-radius:var(--radius-s)}._channel-sidebar-item--text-~~only_1e5ys_127~~ ._channel-sidebar-~~item__left_1e5ys_34~~{gap:0}._channel-sidebar-item--~~active_1e5ys_130~~{background:rgba(var(--sidebar-text-rgb),.12)}._channel-sidebar-item--~~active_1e5ys_130~~ ._channel-sidebar-~~item__left_1e5ys_34~~{padding-left:var(--spacing-l)}._channel-sidebar-item--~~active_1e5ys_130~~ ._channel-sidebar-~~item__name_1e5ys_79~~,._channel-sidebar-item--status-~~unread_1e5ys_139~~ ._channel-sidebar-item__icon-~~container_1e5ys_42~~,._channel-sidebar-item--status-~~mention_1e5ys_139~~ ._channel-sidebar-item__icon-~~container_1e5ys_42~~{opacity:1}._channel-sidebar-item--status-~~unread_1e5ys_139~~ ._channel-sidebar-~~item__name_1e5ys_79~~,._channel-sidebar-item--status-~~mention_1e5ys_139~~ ._channel-sidebar-~~item__name_1e5ys_79~~{font-weight:var(--font-weight-semibold);opacity:1}._channel-sidebar-item--~~drafts_1e5ys_146~~ ._channel-sidebar-item__icon-~~container_1e5ys_42~~{opacity:.64}._channel-sidebar-item--~~drafts_1e5ys_146~~ ._channel-sidebar-~~item__name_1e5ys_79~~{font-weight:var(--font-weight-regular);opacity:.72}._channel-sidebar-item--~~drafts_1e5ys_146~~ ._channel-sidebar-item__mention-~~badge_1e5ys_20~~>*{background-color:transparent;color:var(--sidebar-text);padding-left:0;padding-right:var(--spacing-xxs)}._channel-sidebar-item--~~drafts_1e5ys_146~~._channel-sidebar-item--~~active_1e5ys_130~~ ._channel-sidebar-~~item__name_1e5ys_79~~{opacity:1}._channel-sidebar-item--~~muted_1e5ys_162~~ ._channel-sidebar-item__icon-~~container_1e5ys_42~~,._channel-sidebar-item--~~muted_1e5ys_162~~ ._channel-sidebar-~~item__name_1e5ys_79~~,._channel-sidebar-item--~~muted_1e5ys_162~~ ._channel-sidebar-item__shared-~~icon_1e5ys_92~~{opacity:.4}
1	+ ._channel-sidebar-item_goy1t_2{position:relative;display:flex;align-items:center;height:32px;overflow:hidden;-webkit-user-select:none;user-select:none}._channel-sidebar-item__menu-button_goy1t_10{display:flex;opacity:0;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-transition)}._channel-sidebar-item__mention-badge_goy1t_16{transition:opacity var(--duration-quick) var(--ease-transition)}._channel-sidebar-item_goy1t_2 ._channel-sidebar-item__menu-icon_goy1t_19{--focus-ring-color: var(--sidebar-text-active-border)}._channel-sidebar-item_goy1t_2:hover,._channel-sidebar-item_goy1t_2:focus-within{overflow:visible}._channel-sidebar-item_goy1t_2:hover ._channel-sidebar-item__menu-button_goy1t_10,._channel-sidebar-item_goy1t_2:focus-within ._channel-sidebar-item__menu-button_goy1t_10{opacity:1;pointer-events:auto}._channel-sidebar-item_goy1t_2:hover ._channel-sidebar-item__mention-badge_goy1t_16,._channel-sidebar-item_goy1t_2:focus-within ._channel-sidebar-item__mention-badge_goy1t_16{opacity:0;pointer-events:none}._channel-sidebar-item_goy1t_2:hover:not(._channel-sidebar-item--active_goy1t_33),._channel-sidebar-item_goy1t_2:focus-within:not(._channel-sidebar-item--active_goy1t_33){background:rgba(var(--sidebar-text-rgb),.08)}._channel-sidebar-item__active-border_goy1t_36{flex-shrink:0;width:2px;align-self:stretch;border-radius:0 2px 2px 0;background:var(--sidebar-text-active-border)}._channel-sidebar-item__left_goy1t_43{-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_goy1t_43:focus{outline:none}._channel-sidebar-item__left_goy1t_43:focus-visible{box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._channel-sidebar-item__icon-container_goy1t_66{display:flex;align-items:center;flex-shrink:0;padding:var(--spacing-xxxs);color:var(--sidebar-text);opacity:.64}._channel-sidebar-item__icon-container--dm_goy1t_74{padding:var(--spacing-xxxxs);opacity:1;--status-badge-bg: var(--sidebar-bg)}._channel-sidebar-item__group-icon_goy1t_79{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_goy1t_95{display:flex;align-items:center;flex:1;min-width:0;gap:var(--spacing-xs);padding:2px var(--spacing-xxxxs)}._channel-sidebar-item__name_goy1t_103{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_goy1t_116{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_goy1t_127{display:flex;align-items:center;flex-shrink:0;padding:var(--spacing-xxxs) 0;color:var(--sidebar-text);opacity:.72}._channel-sidebar-item__custom-status_goy1t_135{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_goy1t_143{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_goy1t_152{display:flex;align-items:center;justify-content:center;padding:var(--spacing-xxxs);border-radius:var(--radius-s)}._channel-sidebar-item--text-only_goy1t_162 ._channel-sidebar-item__left_goy1t_43{gap:0}._channel-sidebar-item--active_goy1t_33{background:rgba(var(--sidebar-text-rgb),.12)}._channel-sidebar-item--active_goy1t_33 ._channel-sidebar-item__left_goy1t_43{padding-left:var(--spacing-l)}._channel-sidebar-item--active_goy1t_33 ._channel-sidebar-item__name_goy1t_103,._channel-sidebar-item--status-unread_goy1t_174 ._channel-sidebar-item__icon-container_goy1t_66,._channel-sidebar-item--status-mention_goy1t_174 ._channel-sidebar-item__icon-container_goy1t_66{opacity:1}._channel-sidebar-item--status-unread_goy1t_174 ._channel-sidebar-item__name_goy1t_103,._channel-sidebar-item--status-mention_goy1t_174 ._channel-sidebar-item__name_goy1t_103{font-weight:var(--font-weight-semibold);opacity:1}._channel-sidebar-item--drafts_goy1t_181 ._channel-sidebar-item__icon-container_goy1t_66{opacity:.64}._channel-sidebar-item--drafts_goy1t_181 ._channel-sidebar-item__name_goy1t_103{font-weight:var(--font-weight-regular);opacity:.72}._channel-sidebar-item--drafts_goy1t_181 ._channel-sidebar-item__mention-badge_goy1t_16>*{background-color:transparent;color:var(--sidebar-text);padding-left:0;padding-right:var(--spacing-xxs)}._channel-sidebar-item--drafts_goy1t_181._channel-sidebar-item--active_goy1t_33 ._channel-sidebar-item__name_goy1t_103{opacity:1}._channel-sidebar-item--muted_goy1t_197 ._channel-sidebar-item__icon-container_goy1t_66,._channel-sidebar-item--muted_goy1t_197 ._channel-sidebar-item__name_goy1t_103,._channel-sidebar-item--muted_goy1t_197 ._channel-sidebar-item__shared-icon_goy1t_127{opacity:.4}

package/dist/components/channel-sidebar-item/ChannelSidebarItem.module.scss.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ChannelSidebarItem.module.css');const e={"channel-sidebar-item":"_channel-sidebar-item_1e5ys_2","channel-sidebar-item__menu-button":"_channel-sidebar-item__menu-button_1e5ys_11","channel-sidebar-item__mention-badge":"_channel-sidebar-item__mention-badge_1e5ys_20","channel-sidebar-item__active-border":"_channel-sidebar-item__active-border_1e5ys_27","channel-sidebar-item__left":"_channel-sidebar-item__left_1e5ys_34","channel-sidebar-item__icon-container":"_channel-sidebar-item__icon-container_1e5ys_42","channel-sidebar-item__icon-container--dm":"_channel-sidebar-item__icon-container--dm_1e5ys_50","channel-sidebar-item__group-icon":"_channel-sidebar-item__group-icon_1e5ys_55","channel-sidebar-item__content":"_channel-sidebar-item__content_1e5ys_71","channel-sidebar-item__name":"_channel-sidebar-item__name_1e5ys_79","channel-sidebar-item__shared-icon":"_channel-sidebar-item__shared-icon_1e5ys_92","channel-sidebar-item__custom-status":"_channel-sidebar-item__custom-status_1e5ys_100","channel-sidebar-item__right":"_channel-sidebar-item__right_1e5ys_108","channel-sidebar-item__call":"_channel-sidebar-item__call_1e5ys_117","channel-sidebar-item--text-only":"_channel-sidebar-item--text-only_1e5ys_127","channel-sidebar-item--active":"_channel-sidebar-item--active_1e5ys_130","channel-sidebar-item--status-unread":"_channel-sidebar-item--status-unread_1e5ys_139","channel-sidebar-item--status-mention":"_channel-sidebar-item--status-mention_1e5ys_139","channel-sidebar-item--drafts":"_channel-sidebar-item--drafts_1e5ys_146","channel-sidebar-item--muted":"_channel-sidebar-item--muted_1e5ys_162"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ChannelSidebarItem.module.css');const e={"channel-sidebar-item":"_channel-sidebar-item_goy1t_2","channel-sidebar-item__menu-button":"_channel-sidebar-item__menu-button_goy1t_10","channel-sidebar-item__mention-badge":"_channel-sidebar-item__mention-badge_goy1t_16","channel-sidebar-item__menu-icon":"_channel-sidebar-item__menu-icon_goy1t_19","channel-sidebar-item--active":"_channel-sidebar-item--active_goy1t_33","channel-sidebar-item__active-border":"_channel-sidebar-item__active-border_goy1t_36","channel-sidebar-item__left":"_channel-sidebar-item__left_goy1t_43","channel-sidebar-item__icon-container":"_channel-sidebar-item__icon-container_goy1t_66","channel-sidebar-item__icon-container--dm":"_channel-sidebar-item__icon-container--dm_goy1t_74","channel-sidebar-item__group-icon":"_channel-sidebar-item__group-icon_goy1t_79","channel-sidebar-item__content":"_channel-sidebar-item__content_goy1t_95","channel-sidebar-item__name":"_channel-sidebar-item__name_goy1t_103","channel-sidebar-item__status-hint":"_channel-sidebar-item__status-hint_goy1t_116","channel-sidebar-item__shared-icon":"_channel-sidebar-item__shared-icon_goy1t_127","channel-sidebar-item__custom-status":"_channel-sidebar-item__custom-status_goy1t_135","channel-sidebar-item__right":"_channel-sidebar-item__right_goy1t_143","channel-sidebar-item__call":"_channel-sidebar-item__call_goy1t_152","channel-sidebar-item--text-only":"_channel-sidebar-item--text-only_goy1t_162","channel-sidebar-item--status-unread":"_channel-sidebar-item--status-unread_goy1t_174","channel-sidebar-item--status-mention":"_channel-sidebar-item--status-mention_goy1t_174","channel-sidebar-item--drafts":"_channel-sidebar-item--drafts_goy1t_181","channel-sidebar-item--muted":"_channel-sidebar-item--muted_goy1t_197"};exports.default=e;
 //# sourceMappingURL=ChannelSidebarItem.module.scss.cjs.map

package/dist/components/channel-sidebar-item/ChannelSidebarItem.module.scss.js CHANGED Viewed

@@ -1,24 +1,26 @@
 import './ChannelSidebarItem.module.css';const e = {
-  "channel-sidebar-item": "_channel-sidebar-item_1e5ys_2",
-  "channel-sidebar-item__menu-button": "_channel-sidebar-item__menu-button_1e5ys_11",
-  "channel-sidebar-item__mention-badge": "_channel-sidebar-item__mention-badge_1e5ys_20",
-  "channel-sidebar-item__active-border": "_channel-sidebar-item__active-border_1e5ys_27",
-  "channel-sidebar-item__left": "_channel-sidebar-item__left_1e5ys_34",
-  "channel-sidebar-item__icon-container": "_channel-sidebar-item__icon-container_1e5ys_42",
-  "channel-sidebar-item__icon-container--dm": "_channel-sidebar-item__icon-container--dm_1e5ys_50",
-  "channel-sidebar-item__group-icon": "_channel-sidebar-item__group-icon_1e5ys_55",
-  "channel-sidebar-item__content": "_channel-sidebar-item__content_1e5ys_71",
-  "channel-sidebar-item__name": "_channel-sidebar-item__name_1e5ys_79",
-  "channel-sidebar-item__shared-icon": "_channel-sidebar-item__shared-icon_1e5ys_92",
-  "channel-sidebar-item__custom-status": "_channel-sidebar-item__custom-status_1e5ys_100",
-  "channel-sidebar-item__right": "_channel-sidebar-item__right_1e5ys_108",
-  "channel-sidebar-item__call": "_channel-sidebar-item__call_1e5ys_117",
-  "channel-sidebar-item--text-only": "_channel-sidebar-item--text-only_1e5ys_127",
-  "channel-sidebar-item--active": "_channel-sidebar-item--active_1e5ys_130",
-  "channel-sidebar-item--status-unread": "_channel-sidebar-item--status-unread_1e5ys_139",
-  "channel-sidebar-item--status-mention": "_channel-sidebar-item--status-mention_1e5ys_139",
-  "channel-sidebar-item--drafts": "_channel-sidebar-item--drafts_1e5ys_146",
-  "channel-sidebar-item--muted": "_channel-sidebar-item--muted_1e5ys_162"
+  "channel-sidebar-item": "_channel-sidebar-item_goy1t_2",
+  "channel-sidebar-item__menu-button": "_channel-sidebar-item__menu-button_goy1t_10",
+  "channel-sidebar-item__mention-badge": "_channel-sidebar-item__mention-badge_goy1t_16",
+  "channel-sidebar-item__menu-icon": "_channel-sidebar-item__menu-icon_goy1t_19",
+  "channel-sidebar-item--active": "_channel-sidebar-item--active_goy1t_33",
+  "channel-sidebar-item__active-border": "_channel-sidebar-item__active-border_goy1t_36",
+  "channel-sidebar-item__left": "_channel-sidebar-item__left_goy1t_43",
+  "channel-sidebar-item__icon-container": "_channel-sidebar-item__icon-container_goy1t_66",
+  "channel-sidebar-item__icon-container--dm": "_channel-sidebar-item__icon-container--dm_goy1t_74",
+  "channel-sidebar-item__group-icon": "_channel-sidebar-item__group-icon_goy1t_79",
+  "channel-sidebar-item__content": "_channel-sidebar-item__content_goy1t_95",
+  "channel-sidebar-item__name": "_channel-sidebar-item__name_goy1t_103",
+  "channel-sidebar-item__status-hint": "_channel-sidebar-item__status-hint_goy1t_116",
+  "channel-sidebar-item__shared-icon": "_channel-sidebar-item__shared-icon_goy1t_127",
+  "channel-sidebar-item__custom-status": "_channel-sidebar-item__custom-status_goy1t_135",
+  "channel-sidebar-item__right": "_channel-sidebar-item__right_goy1t_143",
+  "channel-sidebar-item__call": "_channel-sidebar-item__call_goy1t_152",
+  "channel-sidebar-item--text-only": "_channel-sidebar-item--text-only_goy1t_162",
+  "channel-sidebar-item--status-unread": "_channel-sidebar-item--status-unread_goy1t_174",
+  "channel-sidebar-item--status-mention": "_channel-sidebar-item--status-mention_goy1t_174",
+  "channel-sidebar-item--drafts": "_channel-sidebar-item--drafts_goy1t_181",
+  "channel-sidebar-item--muted": "_channel-sidebar-item--muted_goy1t_197"
 };
 export {
   e as default

package/dist/components/channel-sidebar-item/ChannelSidebarItem.module.scss.js.map CHANGED Viewed

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

package/dist/components/checkbox/Checkbox.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),t=require("react"),v=require("../../hooks/use-controllable.cjs"),O=require("../icon/Icon.cjs"),__E=require("@mattermost/compass-icons/components/check.js"),E=__E?.default??__E,__M=require("@mattermost/compass-icons/components/minus.js"),M=__M?.default??__M,R=require("../../utils/string.cjs"),e=require("./Checkbox.module.scss.cjs"),S={small:"10",medium:"12",large:"16"},y={check:E,minus:M};function z({className:b="",indeterminate:n=!1,size:l="medium",valid:u=!0,children:a,id:x,checked:i,defaultChecked:r,disabled:f,onChange:m,...C}){const d=t.useRef(null),_=t.useId(),h=x??_,[k,p]=v.useControllable(i,r,m),c=n?"minus":k?"check":null;t.useEffect(()=>{const o=d.current;o&&(o.indeterminate=n)},[n]);const j=e.default[`checkbox--size-${R.toKebab(l)}`],I=u?"":e.default["checkbox--invalid"],g=n?e.default["checkbox--indeterminate"]:"",N=[e.default.checkbox,j,I,g,b].filter(Boolean).join(" "),q=S[l];return s.jsxs("label",{className:N,htmlFor:h,children:[s.jsx("input",{ref:d,id:h,type:"checkbox",className:e.default.checkbox__input,checked:i,defaultChecked:r,disabled:f,"aria-invalid":u?void 0:!0,onChange:p,...C}),s.jsx("span",{className:e.default.checkbox__box,children:c!==null&&(()=>{const o=y[c];return s.jsx("span",{className:e.default.checkbox__icon,children:s.jsx(O.default,{glyph:s.jsx(o,{}),size:q})},c)})()}),a!=null&&s.jsx("span",{className:e.default.checkbox__label,children:a})]})}exports.default=z;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),t=require("react"),v=require("../../hooks/use-controllable.cjs"),O=require("../icon/Icon.cjs"),__E=require("@mattermost/compass-icons/components/check.js"),E=__E?.default??__E,__M=require("@mattermost/compass-icons/components/minus.js"),M=__M?.default??__M,R=require("../../utils/string.cjs"),e=require("./Checkbox.module.scss.cjs"),S={small:"10",medium:"12",large:"16"},y={check:E,minus:M};function z({className:x="",indeterminate:c=!1,size:l="medium",invalid:a=!1,children:u,id:b,checked:i,defaultChecked:r,disabled:f,onChange:m,...C}){const d=t.useRef(null),_=t.useId(),h=b??_,[k,p]=v.useControllable(i,r,m),n=c?"minus":k?"check":null;t.useEffect(()=>{const o=d.current;o&&(o.indeterminate=c)},[c]);const j=e.default[`checkbox--size-${R.toKebab(l)}`],I=a?e.default["checkbox--invalid"]:"",g=c?e.default["checkbox--indeterminate"]:"",N=[e.default.checkbox,j,I,g,x].filter(Boolean).join(" "),q=S[l];return s.jsxs("label",{className:N,htmlFor:h,children:[s.jsx("input",{ref:d,id:h,type:"checkbox",className:e.default.checkbox__input,checked:i,defaultChecked:r,disabled:f,"aria-invalid":a?!0:void 0,onChange:p,...C,...c?{"aria-checked":"mixed"}:{}}),s.jsx("span",{className:e.default.checkbox__box,children:n!==null&&(()=>{const o=y[n];return s.jsx("span",{className:e.default.checkbox__icon,children:s.jsx(O.default,{glyph:s.jsx(o,{}),size:q})},n)})()}),u!=null&&s.jsx("span",{className:e.default.checkbox__label,children:u})]})}exports.default=z;
 //# sourceMappingURL=Checkbox.cjs.map

package/dist/components/checkbox/Checkbox.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { useRef, useEffect, useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport type { ElementType } from 'react';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport MinusIcon from '@mattermost/compass-icons/components/minus';\nimport { toKebab } from '@/utils/string';\nimport styles from './Checkbox.module.scss';\n\nexport type CheckboxSize = 'small' \| 'medium' \| 'large';\n\nexport interface CheckboxProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'size' \| 'type'\n> {\n /** Optional CSS class name. /\n className?: string;\n /* When true, shows indeterminate (minus) state. Syncs to native input.indeterminate. /\n indeterminate?: boolean;\n /* Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. /\n size?: CheckboxSize;\n /* When ~~false~~, uses error/destructive styling (red fill when checked). ~~Default: true.~~ /\n ~~valid~~?: boolean;\n /* Label content. Rendered next to the checkbox. /\n children?: React.ReactNode;\n}\n\n/* Icon size from design system scale for each checkbox size (fits inside box). /\nconst CHECKBOX_ICON_SIZE: Record<CheckboxSize, IconSize> = {\n small: '10',\n medium: '12',\n large: '16',\n};\n\n/* Compass icon component per checked/indeterminate state. /\nconst ICON_COMPONENT: Record<'check' \| 'minus', ElementType> = {\n check: CheckIcon,\n minus: MinusIcon,\n};\n\n/\n A Checkbox lets people pick any number of options from a set, or toggle a single setting\n * on or off. Each box represents one independent choice — pick none, some, or all.\n */\nexport default function Checkbox({\n className = '',\n indeterminate = false,\n size = 'medium',\n ~~valid~~ = ~~true~~,\n children,\n id: idProp,\n checked,\n defaultChecked,\n disabled,\n onChange,\n ...rest\n}: CheckboxProps) {\n const inputRef = useRef<HTMLInputElement>(null);\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const [resolvedChecked, handleChange] = useControllable(\n checked,\n defaultChecked,\n onChange,\n );\n\n const showingIcon = indeterminate\n ? 'minus'\n : resolvedChecked\n ? 'check'\n : null;\n\n useEffect(() => {\n const input = inputRef.current;\n if (input) input.indeterminate = indeterminate;\n }, [indeterminate]);\n\n const sizeClass = styles[`checkbox--size-${toKebab(size)}`];\n const invalidClass = ~~valid~~ ? ~~'' :~~ styles['checkbox--invalid'];\n const indeterminateClass = indeterminate\n ? styles['checkbox--indeterminate']\n : '';\n\n const rootClass = [\n styles.checkbox,\n sizeClass,\n invalidClass,\n indeterminateClass,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const iconSize = CHECKBOX_ICON_SIZE[size];\n\n return (\n <label className={rootClass} htmlFor={id}>\n <input\n ref={inputRef}\n id={id}\n type=\"checkbox\"\n className={styles['checkbox__input']}\n checked={checked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n aria-invalid={~~valid~~ ? ~~undefined~~ : ~~true~~}\n onChange={handleChange}\n {...rest}\n />\n <span className={styles['checkbox__box']}>\n {showingIcon !== null &&\n (() => {\n const IconComponent = ICON_COMPONENT[showingIcon];\n return (\n <span key={showingIcon} className={styles['checkbox__icon']}>\n <Icon glyph={<IconComponent />} size={iconSize} />\n </span>\n );\n })()}\n </span>\n {children != null && (\n <span className={styles['checkbox__label']}>{children}</span>\n )}\n </label>\n );\n}\n"],"names":["CHECKBOX_ICON_SIZE","ICON_COMPONENT","CheckIcon","MinusIcon","Checkbox","className","indeterminate","size","~~valid~~","children","idProp","checked","defaultChecked","disabled","onChange","rest","inputRef","useRef","generatedId","useId","id","resolvedChecked","handleChange","useControllable","showingIcon","useEffect","input","sizeClass","styles","toKebab","invalidClass","indeterminateClass","rootClass","iconSize","jsxs","jsx","IconComponent","Icon"],"mappings":"2aA8BMA,EAAqD,CACzD,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAGMC,EAAyD,CAC7D,MAAOC,EACP,MAAOC,CACT,EAMA,SAAwBC,EAAS,CAC/B,UAAAC,EAAY,GACZ,cAAAC,EAAgB,GAChB,KAAAC,EAAO,SACP,~~MAAAC~~,~~EAAQ~~,~~GACR~~,SAAAC,EACA,GAAIC,EACJ,QAAAC,EACA,eAAAC,EACA,SAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EAAkB,CAChB,MAAMC,EAAWC,EAAAA,OAAyB,IAAI,EACxCC,EAAcC,EAAAA,MAAA,EACdC,EAAKV,GAAUQ,EACf,CAACG,EAAiBC,CAAY,EAAIC,EAAAA,gBACtCZ,EACAC,EACAE,CAAA,EAGIU,EAAclB,EAChB,QACAe,EACE,QACA,KAENI,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAQV,EAAS,QACnBU,MAAa,cAAgBpB,EACnC,EAAG,CAACA,CAAa,CAAC,EAElB,MAAMqB,EAAYC,EAAAA,QAAO,kBAAkBC,EAAAA,QAAQtB,CAAI,CAAC,EAAE,EACpDuB,EAAetB,~~EAAQ~~,~~GAAKoB~~,~~EAAAA~~,~~QAAO~~,~~mBAAmB~~,~~EACtDG,~~EAAqBzB,EACvBsB,UAAO,yBAAyB,EAChC,GAEEI,EAAY,CAChBJ,EAAAA,QAAO,SACPD,EACAG,EACAC,EACA1B,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEL4B,EAAWjC,EAAmBO,CAAI,EAExC,OACE2B,EAAAA,KAAC,QAAA,CAAM,UAAWF,EAAW,QAASZ,EACpC,SAAA,CAAAe,EAAAA,IAAC,QAAA,CACC,IAAKnB,EACL,GAAAI,EACA,KAAK,WACL,UAAWQ,EAAAA,QAAO,gBAClB,QAAAjB,EACA,eAAAC,EACA,SAAAC,EACA,eAAcL,~~EAAQ~~,~~OAAY~~,~~GAClC~~,SAAUc,EACT,GAAGP,CAAA,CAAA,~~EAENoB~~,MAAC,QAAK,UAAWP,EAAAA,QAAO,cACrB,SAAAJ,IAAgB,OACd,IAAM,CACL,MAAMY,EAAgBnC,EAAeuB,CAAW,EAChD,OACEW,EAAAA,IAAC,OAAA,CAAuB,UAAWP,EAAAA,QAAO,eACxC,SAAAO,MAACE,EAAAA,QAAA,CAAK,YAAQD,EAAA,CAAA,CAAc,EAAI,KAAMH,CAAA,CAAU,GADvCT,CAEX,CAEJ,IAAG,CACP,EACCf,GAAY,MACX0B,EAAAA,IAAC,OAAA,CAAK,UAAWP,EAAAA,QAAO,gBAAqB,SAAAnB,CAAA,CAAS,CAAA,EAE1D,CAEJ"}
1	+ {"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { useRef, useEffect, useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport type { ElementType } from 'react';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport MinusIcon from '@mattermost/compass-icons/components/minus';\nimport { toKebab } from '@/utils/string';\nimport styles from './Checkbox.module.scss';\n\nexport type CheckboxSize = 'small' \| 'medium' \| 'large';\n\nexport interface CheckboxProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'size' \| 'type'\n> {\n /** Optional CSS class name. /\n className?: string;\n /* When true, shows indeterminate (minus) state. Syncs to native input.indeterminate. /\n indeterminate?: boolean;\n /* Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. /\n size?: CheckboxSize;\n /* When true, uses error/destructive styling (red fill when checked). /\n invalid?: boolean;\n /* Label content. Rendered next to the checkbox. /\n children?: React.ReactNode;\n}\n\n/* Icon size from design system scale for each checkbox size (fits inside box). /\nconst CHECKBOX_ICON_SIZE: Record<CheckboxSize, IconSize> = {\n small: '10',\n medium: '12',\n large: '16',\n};\n\n/* Compass icon component per checked/indeterminate state. /\nconst ICON_COMPONENT: Record<'check' \| 'minus', ElementType> = {\n check: CheckIcon,\n minus: MinusIcon,\n};\n\n/\n A Checkbox lets people pick any number of options from a set, or toggle a single setting\n * on or off. Each box represents one independent choice — pick none, some, or all.\n */\nexport default function Checkbox({\n className = '',\n indeterminate = false,\n size = 'medium',\n invalid = false,\n children,\n id: idProp,\n checked,\n defaultChecked,\n disabled,\n onChange,\n ...rest\n}: CheckboxProps) {\n const inputRef = useRef<HTMLInputElement>(null);\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const [resolvedChecked, handleChange] = useControllable(\n checked,\n defaultChecked,\n onChange,\n );\n\n const showingIcon = indeterminate\n ? 'minus'\n : resolvedChecked\n ? 'check'\n : null;\n\n useEffect(() => {\n const input = inputRef.current;\n if (input) input.indeterminate = indeterminate;\n }, [indeterminate]);\n\n const sizeClass = styles[`checkbox--size-${toKebab(size)}`];\n const invalidClass = invalid ? styles['checkbox--invalid'] : '';\n const indeterminateClass = indeterminate\n ? styles['checkbox--indeterminate']\n : '';\n\n const rootClass = [\n styles.checkbox,\n sizeClass,\n invalidClass,\n indeterminateClass,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const iconSize = CHECKBOX_ICON_SIZE[size];\n\n return (\n <label className={rootClass} htmlFor={id}>\n <input\n ref={inputRef}\n id={id}\n type=\"checkbox\"\n className={styles['checkbox__input']}\n checked={checked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n aria-invalid={invalid ? true : undefined}\n onChange={handleChange}\n {...rest}\n {...(indeterminate ? { 'aria-checked': 'mixed' as const } : {})}\n />\n <span className={styles['checkbox__box']}>\n {showingIcon !== null &&\n (() => {\n const IconComponent = ICON_COMPONENT[showingIcon];\n return (\n <span key={showingIcon} className={styles['checkbox__icon']}>\n <Icon glyph={<IconComponent />} size={iconSize} />\n </span>\n );\n })()}\n </span>\n {children != null && (\n <span className={styles['checkbox__label']}>{children}</span>\n )}\n </label>\n );\n}\n"],"names":["CHECKBOX_ICON_SIZE","ICON_COMPONENT","CheckIcon","MinusIcon","Checkbox","className","indeterminate","size","invalid","children","idProp","checked","defaultChecked","disabled","onChange","rest","inputRef","useRef","generatedId","useId","id","resolvedChecked","handleChange","useControllable","showingIcon","useEffect","input","sizeClass","styles","toKebab","invalidClass","indeterminateClass","rootClass","iconSize","jsxs","jsx","IconComponent","Icon"],"mappings":"2aA8BMA,EAAqD,CACzD,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAGMC,EAAyD,CAC7D,MAAOC,EACP,MAAOC,CACT,EAMA,SAAwBC,EAAS,CAC/B,UAAAC,EAAY,GACZ,cAAAC,EAAgB,GAChB,KAAAC,EAAO,SACP,QAAAC,EAAU,GACV,SAAAC,EACA,GAAIC,EACJ,QAAAC,EACA,eAAAC,EACA,SAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EAAkB,CAChB,MAAMC,EAAWC,EAAAA,OAAyB,IAAI,EACxCC,EAAcC,EAAAA,MAAA,EACdC,EAAKV,GAAUQ,EACf,CAACG,EAAiBC,CAAY,EAAIC,EAAAA,gBACtCZ,EACAC,EACAE,CAAA,EAGIU,EAAclB,EAChB,QACAe,EACE,QACA,KAENI,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAQV,EAAS,QACnBU,MAAa,cAAgBpB,EACnC,EAAG,CAACA,CAAa,CAAC,EAElB,MAAMqB,EAAYC,EAAAA,QAAO,kBAAkBC,EAAAA,QAAQtB,CAAI,CAAC,EAAE,EACpDuB,EAAetB,EAAUoB,UAAO,mBAAmB,EAAI,GACvDG,EAAqBzB,EACvBsB,UAAO,yBAAyB,EAChC,GAEEI,EAAY,CAChBJ,EAAAA,QAAO,SACPD,EACAG,EACAC,EACA1B,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEL4B,EAAWjC,EAAmBO,CAAI,EAExC,OACE2B,EAAAA,KAAC,QAAA,CAAM,UAAWF,EAAW,QAASZ,EACpC,SAAA,CAAAe,EAAAA,IAAC,QAAA,CACC,IAAKnB,EACL,GAAAI,EACA,KAAK,WACL,UAAWQ,EAAAA,QAAO,gBAClB,QAAAjB,EACA,eAAAC,EACA,SAAAC,EACA,eAAcL,EAAU,GAAO,OAC/B,SAAUc,EACT,GAAGP,EACH,GAAIT,EAAgB,CAAE,eAAgB,SAAqB,CAAA,CAAC,CAAA,EAE/D6B,MAAC,QAAK,UAAWP,EAAAA,QAAO,cACrB,SAAAJ,IAAgB,OACd,IAAM,CACL,MAAMY,EAAgBnC,EAAeuB,CAAW,EAChD,OACEW,EAAAA,IAAC,OAAA,CAAuB,UAAWP,EAAAA,QAAO,eACxC,SAAAO,MAACE,EAAAA,QAAA,CAAK,YAAQD,EAAA,CAAA,CAAc,EAAI,KAAMH,CAAA,CAAU,GADvCT,CAEX,CAEJ,IAAG,CACP,EACCf,GAAY,MACX0B,EAAAA,IAAC,OAAA,CAAK,UAAWP,EAAAA,QAAO,gBAAqB,SAAAnB,CAAA,CAAS,CAAA,EAE1D,CAEJ"}

package/dist/components/checkbox/Checkbox.d.ts CHANGED Viewed

@@ -7,8 +7,8 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
     indeterminate?: boolean;
     /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */
     size?: CheckboxSize;
-    /** When false, uses error/destructive styling (red fill when checked). Default: true. */
-    valid?: boolean;
+    /** When true, uses error/destructive styling (red fill when checked). */
+    invalid?: boolean;
     /** Label content. Rendered next to the checkbox. */
     children?: React.ReactNode;
 }
@@ -16,5 +16,5 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
  * A Checkbox lets people pick any number of options from a set, or toggle a single setting
  * on or off. Each box represents one independent choice — pick none, some, or all.
  */
-export default function Checkbox({ className, indeterminate, size, valid, children, id: idProp, checked, defaultChecked, disabled, onChange, ...rest }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export default function Checkbox({ className, indeterminate, size, invalid, children, id: idProp, checked, defaultChecked, disabled, onChange, ...rest }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/components/checkbox/Checkbox.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAWjD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yFAAyF;IACzF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uFAAuF;IACvF,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,~~yFAAyF~~;~~IACzF~~,~~KAAK~~,CAAC,EAAE,OAAO,CAAC;~~IAChB~~,oDAAoD;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAeD;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,SAAc,EACd,aAAqB,EACrB,IAAe,EACf,~~KAAY~~,~~EACZ~~,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,aAAa,~~2CAqEf~~"}
1	+ {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAWjD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yFAAyF;IACzF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uFAAuF;IACvF,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAeD;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,SAAc,EACd,aAAqB,EACrB,IAAe,EACf,OAAe,EACf,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,aAAa,2CAsEf"}

package/dist/components/checkbox/Checkbox.js CHANGED Viewed

@@ -16,33 +16,33 @@ const S = {
 };
 function A({
   className: h = "",
-  indeterminate: n = !1,
-  size: t = "medium",
-  valid: l = !0,
+  indeterminate: c = !1,
+  size: l = "medium",
+  invalid: t = !1,
   children: i,
   id: p,
-  checked: r,
-  defaultChecked: a,
+  checked: a,
+  defaultChecked: r,
   disabled: f,
   onChange: b,
-  ...C
+  ...x
 }) {
-  const m = E(null), x = j(), u = p ?? x, [d, k] = z(
-    r,
+  const m = E(null), C = j(), u = p ?? C, [d, k] = z(
     a,
+    r,
     b
-  ), c = n ? "minus" : d ? "check" : null;
+  ), n = c ? "minus" : d ? "check" : null;
   y(() => {
     const s = m.current;
-    s && (s.indeterminate = n);
-  }, [n]);
-  const _ = o[`checkbox--size-${R(t)}`], I = l ? "" : o["checkbox--invalid"], N = n ? o["checkbox--indeterminate"] : "", g = [
+    s && (s.indeterminate = c);
+  }, [c]);
+  const _ = o[`checkbox--size-${R(l)}`], I = t ? o["checkbox--invalid"] : "", N = c ? o["checkbox--indeterminate"] : "", g = [
     o.checkbox,
     _,
     I,
     N,
     h
-  ].filter(Boolean).join(" "), O = S[t];
+  ].filter(Boolean).join(" "), O = S[l];
   return /* @__PURE__ */ v("label", { className: g, htmlFor: u, children: [
     /* @__PURE__ */ e(
       "input",
@@ -51,17 +51,18 @@ function A({
         id: u,
         type: "checkbox",
         className: o.checkbox__input,
-        checked: r,
-        defaultChecked: a,
+        checked: a,
+        defaultChecked: r,
         disabled: f,
-        "aria-invalid": l ? void 0 : !0,
+        "aria-invalid": t ? !0 : void 0,
         onChange: k,
-        ...C
+        ...x,
+        ...c ? { "aria-checked": "mixed" } : {}
       }
     ),
-    /* @__PURE__ */ e("span", { className: o.checkbox__box, children: c !== null && (() => {
-      const s = w[c];
-      return /* @__PURE__ */ e("span", { className: o.checkbox__icon, children: /* @__PURE__ */ e(B, { glyph: /* @__PURE__ */ e(s, {}), size: O }) }, c);
+    /* @__PURE__ */ e("span", { className: o.checkbox__box, children: n !== null && (() => {
+      const s = w[n];
+      return /* @__PURE__ */ e("span", { className: o.checkbox__icon, children: /* @__PURE__ */ e(B, { glyph: /* @__PURE__ */ e(s, {}), size: O }) }, n);
     })() }),
     i != null && /* @__PURE__ */ e("span", { className: o.checkbox__label, children: i })
   ] });

package/dist/components/checkbox/Checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { useRef, useEffect, useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport type { ElementType } from 'react';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport MinusIcon from '@mattermost/compass-icons/components/minus';\nimport { toKebab } from '@/utils/string';\nimport styles from './Checkbox.module.scss';\n\nexport type CheckboxSize = 'small' \| 'medium' \| 'large';\n\nexport interface CheckboxProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'size' \| 'type'\n> {\n /** Optional CSS class name. /\n className?: string;\n /* When true, shows indeterminate (minus) state. Syncs to native input.indeterminate. /\n indeterminate?: boolean;\n /* Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. /\n size?: CheckboxSize;\n /* When ~~false~~, uses error/destructive styling (red fill when checked). ~~Default: true.~~ /\n ~~valid~~?: boolean;\n /* Label content. Rendered next to the checkbox. /\n children?: React.ReactNode;\n}\n\n/* Icon size from design system scale for each checkbox size (fits inside box). /\nconst CHECKBOX_ICON_SIZE: Record<CheckboxSize, IconSize> = {\n small: '10',\n medium: '12',\n large: '16',\n};\n\n/* Compass icon component per checked/indeterminate state. /\nconst ICON_COMPONENT: Record<'check' \| 'minus', ElementType> = {\n check: CheckIcon,\n minus: MinusIcon,\n};\n\n/\n A Checkbox lets people pick any number of options from a set, or toggle a single setting\n * on or off. Each box represents one independent choice — pick none, some, or all.\n */\nexport default function Checkbox({\n className = '',\n indeterminate = false,\n size = 'medium',\n ~~valid~~ = ~~true~~,\n children,\n id: idProp,\n checked,\n defaultChecked,\n disabled,\n onChange,\n ...rest\n}: CheckboxProps) {\n const inputRef = useRef<HTMLInputElement>(null);\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const [resolvedChecked, handleChange] = useControllable(\n checked,\n defaultChecked,\n onChange,\n );\n\n const showingIcon = indeterminate\n ? 'minus'\n : resolvedChecked\n ? 'check'\n : null;\n\n useEffect(() => {\n const input = inputRef.current;\n if (input) input.indeterminate = indeterminate;\n }, [indeterminate]);\n\n const sizeClass = styles[`checkbox--size-${toKebab(size)}`];\n const invalidClass = ~~valid~~ ? ~~'' :~~ styles['checkbox--invalid'];\n const indeterminateClass = indeterminate\n ? styles['checkbox--indeterminate']\n : '';\n\n const rootClass = [\n styles.checkbox,\n sizeClass,\n invalidClass,\n indeterminateClass,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const iconSize = CHECKBOX_ICON_SIZE[size];\n\n return (\n <label className={rootClass} htmlFor={id}>\n <input\n ref={inputRef}\n id={id}\n type=\"checkbox\"\n className={styles['checkbox__input']}\n checked={checked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n aria-invalid={~~valid~~ ? ~~undefined~~ : ~~true~~}\n onChange={handleChange}\n {...rest}\n />\n <span className={styles['checkbox__box']}>\n {showingIcon !== null &&\n (() => {\n const IconComponent = ICON_COMPONENT[showingIcon];\n return (\n <span key={showingIcon} className={styles['checkbox__icon']}>\n <Icon glyph={<IconComponent />} size={iconSize} />\n </span>\n );\n })()}\n </span>\n {children != null && (\n <span className={styles['checkbox__label']}>{children}</span>\n )}\n </label>\n );\n}\n"],"names":["CHECKBOX_ICON_SIZE","ICON_COMPONENT","CheckIcon","MinusIcon","Checkbox","className","indeterminate","size","~~valid~~","children","idProp","checked","defaultChecked","disabled","onChange","rest","inputRef","useRef","generatedId","useId","id","resolvedChecked","handleChange","useControllable","showingIcon","useEffect","input","sizeClass","styles","toKebab","invalidClass","indeterminateClass","rootClass","iconSize","jsxs","jsx","IconComponent","Icon"],"mappings":";;;;;;;;AA8BA,MAAMA,IAAqD;AAAA,EACzD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,GAGMC,IAAyD;AAAA,EAC7D,OAAOC;AAAA,EACP,OAAOC;AACT;AAMA,SAAwBC,EAAS;AAAA,EAC/B,WAAAC,IAAY;AAAA,EACZ,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,~~OAAAC~~,~~IAAQ~~;AAAA,~~EACR~~,UAAAC;AAAA,EACA,IAAIC;AAAA,EACJ,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAkB;AAChB,QAAMC,IAAWC,EAAyB,IAAI,GACxCC,IAAcC,EAAA,GACdC,IAAKV,KAAUQ,GACf,CAACG,GAAiBC,CAAY,IAAIC;AAAA,IACtCZ;AAAA,IACAC;AAAA,IACAE;AAAA,EAAA,GAGIU,IAAclB,IAChB,UACAe,IACE,UACA;AAEN,EAAAI,EAAU,MAAM;AACd,UAAMC,IAAQV,EAAS;AACvB,IAAIU,QAAa,gBAAgBpB;AAAA,EACnC,GAAG,CAACA,CAAa,CAAC;AAElB,QAAMqB,IAAYC,EAAO,kBAAkBC,EAAQtB,CAAI,CAAC,EAAE,GACpDuB,IAAetB,~~IAAQ~~,~~KAAKoB,~~EAAO,mBAAmB,~~GACtDG~~,IAAqBzB,IACvBsB,EAAO,yBAAyB,IAChC,IAEEI,IAAY;AAAA,IAChBJ,EAAO;AAAA,IACPD;AAAA,IACAG;AAAA,IACAC;AAAA,IACA1B;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAEL4B,IAAWjC,EAAmBO,CAAI;AAExC,SACE,gBAAA2B,EAAC,SAAA,EAAM,WAAWF,GAAW,SAASZ,GACpC,UAAA;AAAA,IAAA,gBAAAe;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKnB;AAAA,QACL,IAAAI;AAAA,QACA,MAAK;AAAA,QACL,WAAWQ,EAAO;AAAA,QAClB,SAAAjB;AAAA,QACA,gBAAAC;AAAA,QACA,UAAAC;AAAA,QACA,gBAAcL,~~IAAQ~~,~~SAAY~~;AAAA,~~QAClC~~,UAAUc;AAAA,QACT,GAAGP;AAAA,~~MAAA~~;AAAA,IAAA;AAAA,~~IAEN~~,~~gBAAAoB~~,EAAC,UAAK,WAAWP,EAAO,eACrB,UAAAJ,MAAgB,SACd,MAAM;AACL,YAAMY,IAAgBnC,EAAeuB,CAAW;AAChD,aACE,gBAAAW,EAAC,QAAA,EAAuB,WAAWP,EAAO,gBACxC,UAAA,gBAAAO,EAACE,GAAA,EAAK,yBAAQD,GAAA,CAAA,CAAc,GAAI,MAAMH,EAAA,CAAU,KADvCT,CAEX;AAAA,IAEJ,KAAG,CACP;AAAA,IACCf,KAAY,QACX,gBAAA0B,EAAC,QAAA,EAAK,WAAWP,EAAO,iBAAqB,UAAAnB,EAAA,CAAS;AAAA,EAAA,GAE1D;AAEJ;"}
1	+ {"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { useRef, useEffect, useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport type { ElementType } from 'react';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport MinusIcon from '@mattermost/compass-icons/components/minus';\nimport { toKebab } from '@/utils/string';\nimport styles from './Checkbox.module.scss';\n\nexport type CheckboxSize = 'small' \| 'medium' \| 'large';\n\nexport interface CheckboxProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'size' \| 'type'\n> {\n /** Optional CSS class name. /\n className?: string;\n /* When true, shows indeterminate (minus) state. Syncs to native input.indeterminate. /\n indeterminate?: boolean;\n /* Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. /\n size?: CheckboxSize;\n /* When true, uses error/destructive styling (red fill when checked). /\n invalid?: boolean;\n /* Label content. Rendered next to the checkbox. /\n children?: React.ReactNode;\n}\n\n/* Icon size from design system scale for each checkbox size (fits inside box). /\nconst CHECKBOX_ICON_SIZE: Record<CheckboxSize, IconSize> = {\n small: '10',\n medium: '12',\n large: '16',\n};\n\n/* Compass icon component per checked/indeterminate state. /\nconst ICON_COMPONENT: Record<'check' \| 'minus', ElementType> = {\n check: CheckIcon,\n minus: MinusIcon,\n};\n\n/\n A Checkbox lets people pick any number of options from a set, or toggle a single setting\n * on or off. Each box represents one independent choice — pick none, some, or all.\n */\nexport default function Checkbox({\n className = '',\n indeterminate = false,\n size = 'medium',\n invalid = false,\n children,\n id: idProp,\n checked,\n defaultChecked,\n disabled,\n onChange,\n ...rest\n}: CheckboxProps) {\n const inputRef = useRef<HTMLInputElement>(null);\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const [resolvedChecked, handleChange] = useControllable(\n checked,\n defaultChecked,\n onChange,\n );\n\n const showingIcon = indeterminate\n ? 'minus'\n : resolvedChecked\n ? 'check'\n : null;\n\n useEffect(() => {\n const input = inputRef.current;\n if (input) input.indeterminate = indeterminate;\n }, [indeterminate]);\n\n const sizeClass = styles[`checkbox--size-${toKebab(size)}`];\n const invalidClass = invalid ? styles['checkbox--invalid'] : '';\n const indeterminateClass = indeterminate\n ? styles['checkbox--indeterminate']\n : '';\n\n const rootClass = [\n styles.checkbox,\n sizeClass,\n invalidClass,\n indeterminateClass,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const iconSize = CHECKBOX_ICON_SIZE[size];\n\n return (\n <label className={rootClass} htmlFor={id}>\n <input\n ref={inputRef}\n id={id}\n type=\"checkbox\"\n className={styles['checkbox__input']}\n checked={checked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n aria-invalid={invalid ? true : undefined}\n onChange={handleChange}\n {...rest}\n {...(indeterminate ? { 'aria-checked': 'mixed' as const } : {})}\n />\n <span className={styles['checkbox__box']}>\n {showingIcon !== null &&\n (() => {\n const IconComponent = ICON_COMPONENT[showingIcon];\n return (\n <span key={showingIcon} className={styles['checkbox__icon']}>\n <Icon glyph={<IconComponent />} size={iconSize} />\n </span>\n );\n })()}\n </span>\n {children != null && (\n <span className={styles['checkbox__label']}>{children}</span>\n )}\n </label>\n );\n}\n"],"names":["CHECKBOX_ICON_SIZE","ICON_COMPONENT","CheckIcon","MinusIcon","Checkbox","className","indeterminate","size","invalid","children","idProp","checked","defaultChecked","disabled","onChange","rest","inputRef","useRef","generatedId","useId","id","resolvedChecked","handleChange","useControllable","showingIcon","useEffect","input","sizeClass","styles","toKebab","invalidClass","indeterminateClass","rootClass","iconSize","jsxs","jsx","IconComponent","Icon"],"mappings":";;;;;;;;AA8BA,MAAMA,IAAqD;AAAA,EACzD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,GAGMC,IAAyD;AAAA,EAC7D,OAAOC;AAAA,EACP,OAAOC;AACT;AAMA,SAAwBC,EAAS;AAAA,EAC/B,WAAAC,IAAY;AAAA,EACZ,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,IAAIC;AAAA,EACJ,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAkB;AAChB,QAAMC,IAAWC,EAAyB,IAAI,GACxCC,IAAcC,EAAA,GACdC,IAAKV,KAAUQ,GACf,CAACG,GAAiBC,CAAY,IAAIC;AAAA,IACtCZ;AAAA,IACAC;AAAA,IACAE;AAAA,EAAA,GAGIU,IAAclB,IAChB,UACAe,IACE,UACA;AAEN,EAAAI,EAAU,MAAM;AACd,UAAMC,IAAQV,EAAS;AACvB,IAAIU,QAAa,gBAAgBpB;AAAA,EACnC,GAAG,CAACA,CAAa,CAAC;AAElB,QAAMqB,IAAYC,EAAO,kBAAkBC,EAAQtB,CAAI,CAAC,EAAE,GACpDuB,IAAetB,IAAUoB,EAAO,mBAAmB,IAAI,IACvDG,IAAqBzB,IACvBsB,EAAO,yBAAyB,IAChC,IAEEI,IAAY;AAAA,IAChBJ,EAAO;AAAA,IACPD;AAAA,IACAG;AAAA,IACAC;AAAA,IACA1B;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAEL4B,IAAWjC,EAAmBO,CAAI;AAExC,SACE,gBAAA2B,EAAC,SAAA,EAAM,WAAWF,GAAW,SAASZ,GACpC,UAAA;AAAA,IAAA,gBAAAe;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKnB;AAAA,QACL,IAAAI;AAAA,QACA,MAAK;AAAA,QACL,WAAWQ,EAAO;AAAA,QAClB,SAAAjB;AAAA,QACA,gBAAAC;AAAA,QACA,UAAAC;AAAA,QACA,gBAAcL,IAAU,KAAO;AAAA,QAC/B,UAAUc;AAAA,QACT,GAAGP;AAAA,QACH,GAAIT,IAAgB,EAAE,gBAAgB,YAAqB,CAAA;AAAA,MAAC;AAAA,IAAA;AAAA,IAE/D,gBAAA6B,EAAC,UAAK,WAAWP,EAAO,eACrB,UAAAJ,MAAgB,SACd,MAAM;AACL,YAAMY,IAAgBnC,EAAeuB,CAAW;AAChD,aACE,gBAAAW,EAAC,QAAA,EAAuB,WAAWP,EAAO,gBACxC,UAAA,gBAAAO,EAACE,GAAA,EAAK,yBAAQD,GAAA,CAAA,CAAc,GAAI,MAAMH,EAAA,CAAU,KADvCT,CAEX;AAAA,IAEJ,KAAG,CACP;AAAA,IACCf,KAAY,QACX,gBAAA0B,EAAC,QAAA,EAAK,WAAWP,EAAO,iBAAqB,UAAAnB,EAAA,CAAS;AAAA,EAAA,GAE1D;AAEJ;"}