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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelSidebarItem.js","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.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ChannelSidebarItem.css');const e={"channel-sidebar-item":"_channel-sidebar-item_m2jgi_2","channel-sidebar-item__menu-button":"_channel-sidebar-item__menu-button_m2jgi_10","channel-sidebar-item__mention-badge":"_channel-sidebar-item__mention-badge_m2jgi_20","channel-sidebar-item__menu-icon":"_channel-sidebar-item__menu-icon_m2jgi_23","channel-sidebar-item--active":"_channel-sidebar-item--active_m2jgi_37","channel-sidebar-item__active-border":"_channel-sidebar-item__active-border_m2jgi_40","channel-sidebar-item__left":"_channel-sidebar-item__left_m2jgi_47","channel-sidebar-item__icon-container":"_channel-sidebar-item__icon-container_m2jgi_70","channel-sidebar-item__icon-container--dm":"_channel-sidebar-item__icon-container--dm_m2jgi_78","channel-sidebar-item__group-icon":"_channel-sidebar-item__group-icon_m2jgi_83","channel-sidebar-item__content":"_channel-sidebar-item__content_m2jgi_99","channel-sidebar-item__name":"_channel-sidebar-item__name_m2jgi_107","channel-sidebar-item__status-hint":"_channel-sidebar-item__status-hint_m2jgi_120","channel-sidebar-item__shared-icon":"_channel-sidebar-item__shared-icon_m2jgi_131","channel-sidebar-item__custom-status":"_channel-sidebar-item__custom-status_m2jgi_139","channel-sidebar-item__right":"_channel-sidebar-item__right_m2jgi_147","channel-sidebar-item__call":"_channel-sidebar-item__call_m2jgi_156","channel-sidebar-item--text-only":"_channel-sidebar-item--text-only_m2jgi_166","channel-sidebar-item--status-unread":"_channel-sidebar-item--status-unread_m2jgi_178","channel-sidebar-item--status-mention":"_channel-sidebar-item--status-mention_m2jgi_178","channel-sidebar-item--drafts":"_channel-sidebar-item--drafts_m2jgi_185","channel-sidebar-item--muted":"_channel-sidebar-item--muted_m2jgi_201"};exports.default=e;
+//# sourceMappingURL=ChannelSidebarItem.module.scss.cjs.map

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

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

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

@@ -0,0 +1,28 @@
+import './ChannelSidebarItem.css';const e = {
+  "channel-sidebar-item": "_channel-sidebar-item_m2jgi_2",
+  "channel-sidebar-item__menu-button": "_channel-sidebar-item__menu-button_m2jgi_10",
+  "channel-sidebar-item__mention-badge": "_channel-sidebar-item__mention-badge_m2jgi_20",
+  "channel-sidebar-item__menu-icon": "_channel-sidebar-item__menu-icon_m2jgi_23",
+  "channel-sidebar-item--active": "_channel-sidebar-item--active_m2jgi_37",
+  "channel-sidebar-item__active-border": "_channel-sidebar-item__active-border_m2jgi_40",
+  "channel-sidebar-item__left": "_channel-sidebar-item__left_m2jgi_47",
+  "channel-sidebar-item__icon-container": "_channel-sidebar-item__icon-container_m2jgi_70",
+  "channel-sidebar-item__icon-container--dm": "_channel-sidebar-item__icon-container--dm_m2jgi_78",
+  "channel-sidebar-item__group-icon": "_channel-sidebar-item__group-icon_m2jgi_83",
+  "channel-sidebar-item__content": "_channel-sidebar-item__content_m2jgi_99",
+  "channel-sidebar-item__name": "_channel-sidebar-item__name_m2jgi_107",
+  "channel-sidebar-item__status-hint": "_channel-sidebar-item__status-hint_m2jgi_120",
+  "channel-sidebar-item__shared-icon": "_channel-sidebar-item__shared-icon_m2jgi_131",
+  "channel-sidebar-item__custom-status": "_channel-sidebar-item__custom-status_m2jgi_139",
+  "channel-sidebar-item__right": "_channel-sidebar-item__right_m2jgi_147",
+  "channel-sidebar-item__call": "_channel-sidebar-item__call_m2jgi_156",
+  "channel-sidebar-item--text-only": "_channel-sidebar-item--text-only_m2jgi_166",
+  "channel-sidebar-item--status-unread": "_channel-sidebar-item--status-unread_m2jgi_178",
+  "channel-sidebar-item--status-mention": "_channel-sidebar-item--status-mention_m2jgi_178",
+  "channel-sidebar-item--drafts": "_channel-sidebar-item--drafts_m2jgi_185",
+  "channel-sidebar-item--muted": "_channel-sidebar-item--muted_m2jgi_201"
+};
+export {
+  e as default
+};
+//# sourceMappingURL=ChannelSidebarItem.module.scss.js.map

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/channel-sidebar-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,YAAY,EACV,uBAAuB,EACvB,+BAA+B,EAC/B,wBAAwB,GACzB,MAAM,sBAAsB,CAAC"}

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

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

package/dist/components/channel-sidebar-item/index.js.map

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

package/dist/components/checkbox/Checkbox.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport {\n  forwardRef,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useRef,\n} 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 */\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\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  },\n  ref,\n) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\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\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["CHECKBOX_ICON_SIZE","ICON_COMPONENT","CheckIcon","MinusIcon","Checkbox","forwardRef","className","indeterminate","size","invalid","children","idProp","checked","defaultChecked","disabled","onChange","rest","ref","inputRef","useRef","useImperativeHandle","generatedId","useId","id","resolvedChecked","handleChange","useControllable","showingIcon","useEffect","input","sizeClass","styles","toKebab","invalidClass","indeterminateClass","rootClass","iconSize","jsxs","jsx","IconComponent","Icon"],"mappings":"2aAoCMA,EAAqD,CACzD,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAGMC,EAAyD,CAC7D,MAAOC,EACP,MAAOC,CACT,EAMMC,EAAWC,EAAAA,WAA4C,SAC3D,CACE,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,EACAC,EACA,CACA,MAAMC,EAAWC,EAAAA,OAAyB,IAAI,EAC9CC,EAAAA,oBAAoBH,EAAK,IAAMC,EAAS,OAA2B,EACnE,MAAMG,EAAcC,EAAAA,MAAA,EACdC,EAAKZ,GAAUU,EACf,CAACG,EAAiBC,CAAY,EAAIC,EAAAA,gBACtCd,EACAC,EACAE,CAAA,EAGIY,EAAcpB,EAChB,QACAiB,EACE,QACA,KAENI,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAQX,EAAS,QACnBW,MAAa,cAAgBtB,EACnC,EAAG,CAACA,CAAa,CAAC,EAElB,MAAMuB,EAAYC,EAAAA,QAAO,kBAAkBC,EAAAA,QAAQxB,CAAI,CAAC,EAAE,EACpDyB,EAAexB,EAAUsB,UAAO,mBAAmB,EAAI,GACvDG,EAAqB3B,EACvBwB,UAAO,yBAAyB,EAChC,GAEEI,EAAY,CAChBJ,EAAAA,QAAO,SACPD,EACAG,EACAC,EACA5B,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEL8B,EAAWpC,EAAmBQ,CAAI,EAExC,OACE6B,EAAAA,KAAC,QAAA,CAAM,UAAWF,EAAW,QAASZ,EACpC,SAAA,CAAAe,EAAAA,IAAC,QAAA,CACC,IAAKpB,EACL,GAAAK,EACA,KAAK,WACL,UAAWQ,EAAAA,QAAO,gBAClB,QAAAnB,EACA,eAAAC,EACA,SAAAC,EACA,eAAcL,EAAU,GAAO,OAC/B,SAAUgB,EACT,GAAGT,EACH,GAAIT,EAAgB,CAAE,eAAgB,SAAqB,CAAA,CAAC,CAAA,EAE/D+B,MAAC,QAAK,UAAWP,EAAAA,QAAO,cACrB,SAAAJ,IAAgB,OACd,IAAM,CACL,MAAMY,EAAgBtC,EAAe0B,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,EACCjB,GAAY,MACX4B,EAAAA,IAAC,OAAA,CAAK,UAAWP,EAAAA,QAAO,gBAAqB,SAAArB,CAAA,CAAS,CAAA,EAE1D,CAEJ,CAAC,EAEDN,EAAS,YAAc"}

package/dist/components/checkbox/Checkbox.css

@@ -0,0 +1 @@
+@keyframes _checkbox-icon-enter_18swc_1{0%{transform:scale(.5)}to{transform:scale(1)}}._checkbox_18swc_10{position:relative;display:flex;align-items:flex-start;width:100%;gap:var(--spacing-s);font-family:var(--font-family-body);font-weight:var(--font-weight-regular);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._checkbox_18swc_10._checkbox_18swc_10{margin:0}._checkbox_18swc_10:has(._checkbox__input_18swc_25:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._checkbox__input_18swc_25{position:absolute;left:0;top:0;margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}._checkbox__input_18swc_25:focus-visible{outline:none}._checkbox__box_18swc_44{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.24);transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._checkbox__input_18swc_25:focus-visible~._checkbox__box_18swc_44{box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._checkbox_18swc_10:has(._checkbox__input_18swc_25:not(:disabled)):hover ._checkbox__box_18swc_44{border-color:rgba(var(--center-channel-color-rgb),.32)}._checkbox__input_18swc_25:disabled~._checkbox__box_18swc_44{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.16)}._checkbox__input_18swc_25:checked~._checkbox__box_18swc_44,._checkbox--indeterminate_18swc_65 ._checkbox__box_18swc_44{background-color:var(--button-bg);border-color:var(--button-bg)}._checkbox__input_18swc_25:checked~._checkbox__box_18swc_44 ._checkbox__icon_18swc_69,._checkbox--indeterminate_18swc_65 ._checkbox__box_18swc_44 ._checkbox__icon_18swc_69{color:var(--button-color)}._checkbox_18swc_10:has(._checkbox__input_18swc_25:not(:disabled)):hover ._checkbox__input_18swc_25:checked~._checkbox__box_18swc_44,._checkbox_18swc_10:has(._checkbox__input_18swc_25:not(:disabled)):hover._checkbox--indeterminate_18swc_65 ._checkbox__box_18swc_44{background-color:var(--button-bg);border-color:var(--button-bg)}._checkbox__input_18swc_25:focus-visible:checked~._checkbox__box_18swc_44,._checkbox--indeterminate_18swc_65 ._checkbox__input_18swc_25:focus-visible~._checkbox__box_18swc_44{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._checkbox__input_18swc_25:disabled:checked~._checkbox__box_18swc_44,._checkbox--indeterminate_18swc_65 ._checkbox__input_18swc_25:disabled~._checkbox__box_18swc_44{background-color:rgba(var(--center-channel-color-rgb),.32);border-color:transparent}._checkbox__input_18swc_25:disabled:checked~._checkbox__box_18swc_44 ._checkbox__icon_18swc_69,._checkbox--indeterminate_18swc_65 ._checkbox__input_18swc_25:disabled~._checkbox__box_18swc_44 ._checkbox__icon_18swc_69{color:var(--button-color)}._checkbox--invalid_18swc_87 ._checkbox__box_18swc_44{border-color:rgba(var(--error-text-color-rgb),.5)}._checkbox--invalid_18swc_87 ._checkbox__input_18swc_25:checked~._checkbox__box_18swc_44,._checkbox--invalid_18swc_87._checkbox--indeterminate_18swc_65 ._checkbox__box_18swc_44{background-color:var(--error-text);border-color:var(--error-text)}._checkbox--invalid_18swc_87 ._checkbox__input_18swc_25:checked~._checkbox__box_18swc_44 ._checkbox__icon_18swc_69,._checkbox--invalid_18swc_87._checkbox--indeterminate_18swc_65 ._checkbox__box_18swc_44 ._checkbox__icon_18swc_69{color:var(--button-color)}._checkbox_18swc_10:has(._checkbox__input_18swc_25:not(:disabled)):hover._checkbox--invalid_18swc_87 ._checkbox__input_18swc_25:checked~._checkbox__box_18swc_44,._checkbox_18swc_10:has(._checkbox__input_18swc_25:not(:disabled)):hover._checkbox--invalid_18swc_87._checkbox--indeterminate_18swc_65 ._checkbox__box_18swc_44{background-color:var(--error-text);border-color:var(--error-text)}._checkbox--invalid_18swc_87 ._checkbox__input_18swc_25:focus-visible~._checkbox__box_18swc_44{box-shadow:0 0 0 2px var(--error-text)}._checkbox--invalid_18swc_87 ._checkbox__input_18swc_25:focus-visible:checked~._checkbox__box_18swc_44,._checkbox--invalid_18swc_87._checkbox--indeterminate_18swc_65 ._checkbox__input_18swc_25:focus-visible~._checkbox__box_18swc_44{border-color:rgba(var(--button-color-rgb),.24);box-shadow:0 0 0 2px var(--error-text)}._checkbox_18swc_10:has(._checkbox__input_18swc_25:not(:disabled)):hover._checkbox--invalid_18swc_87 ._checkbox__input_18swc_25:not(:checked)~._checkbox__box_18swc_44{border-color:var(--error-text)}._checkbox__icon_18swc_69{display:inline-flex;align-items:center;justify-content:center;color:var(--button-color);pointer-events:none;transform-origin:center;animation:_checkbox-icon-enter_18swc_1 var(--duration-quick) var(--ease-entrance) forwards}._checkbox__label_18swc_120{line-height:1}._checkbox--size-small_18swc_123 ._checkbox__input_18swc_25{width:var(--icon-size-12);height:var(--icon-size-12);margin-top:calc((var(--line-height-75) - var(--icon-size-12)) / 2)}._checkbox--size-small_18swc_123 ._checkbox__box_18swc_44{width:var(--icon-size-12);height:var(--icon-size-12);border-radius:var(--radius-xs);margin-top:calc((var(--line-height-75) - var(--icon-size-12)) / 2)}._checkbox--size-small_18swc_123 ._checkbox__label_18swc_120{font-size:var(--font-size-75);line-height:var(--line-height-75)}._checkbox--size-medium_18swc_138 ._checkbox__input_18swc_25{width:var(--icon-size-16);height:var(--icon-size-16);margin-top:calc((var(--line-height-100) - var(--icon-size-16)) / 2)}._checkbox--size-medium_18swc_138 ._checkbox__box_18swc_44{width:var(--icon-size-16);height:var(--icon-size-16);border-radius:var(--radius-xs);margin-top:calc((var(--line-height-100) - var(--icon-size-16)) / 2)}._checkbox--size-medium_18swc_138 ._checkbox__label_18swc_120{font-size:var(--font-size-100);line-height:var(--line-height-100)}._checkbox--size-large_18swc_153 ._checkbox__input_18swc_25{width:var(--icon-size-20);height:var(--icon-size-20);margin-top:calc((var(--line-height-200) - var(--icon-size-20)) / 2)}._checkbox--size-large_18swc_153 ._checkbox__box_18swc_44{width:var(--icon-size-20);height:var(--icon-size-20);border-radius:var(--radius-s);margin-top:calc((var(--line-height-200) - var(--icon-size-20)) / 2)}._checkbox--size-large_18swc_153 ._checkbox__label_18swc_120{font-size:var(--font-size-200);line-height:var(--line-height-200)}

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

@@ -0,0 +1,21 @@
+import { InputHTMLAttributes } from 'react';
+export type CheckboxSize = 'small' | 'medium' | 'large';
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /** Optional CSS class name. */
+    className?: string;
+    /** When true, shows indeterminate (minus) state. Syncs to native input.indeterminate. */
+    indeterminate?: boolean;
+    /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */
+    size?: CheckboxSize;
+    /** When true, uses error/destructive styling (red fill when checked). */
+    invalid?: boolean;
+    /** Label content. Rendered next to the checkbox. */
+    children?: React.ReactNode;
+}
+/**
+ * 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.
+ */
+declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;
+export default Checkbox;
+//# sourceMappingURL=Checkbox.d.ts.map

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

@@ -0,0 +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;AAiBjD,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,QAAA,MAAM,QAAQ,4GAsFZ,CAAC;AAIH,eAAe,QAAQ,CAAC"}

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1,75 @@
+import { jsxs as y, jsx as e } from "react/jsx-runtime";
+import { forwardRef as E, useRef as j, useImperativeHandle as z, useId as R, useEffect as w } from "react";
+import { useControllable as B } from "../../hooks/use-controllable.js";
+import H from "../icon/Icon.js";
+import __K from "@mattermost/compass-icons/components/check.js";const K=__K&&__K.default?__K.default:__K;
+import __M from "@mattermost/compass-icons/components/minus.js";const M=__M&&__M.default?__M.default:__M;
+import { toKebab as S } from "../../utils/string.js";
+import o from "./Checkbox.module.scss.js";
+const F = {
+  small: "10",
+  medium: "12",
+  large: "16"
+}, P = {
+  check: K,
+  minus: M
+}, T = E(function({
+  className: h = "",
+  indeterminate: c = !1,
+  size: l = "medium",
+  invalid: a = !1,
+  children: r,
+  id: p,
+  checked: i,
+  defaultChecked: m,
+  disabled: f,
+  onChange: b,
+  ...d
+}, x) {
+  const n = j(null);
+  z(x, () => n.current);
+  const C = R(), u = p ?? C, [k, I] = B(
+    i,
+    m,
+    b
+  ), t = c ? "minus" : k ? "check" : null;
+  w(() => {
+    const s = n.current;
+    s && (s.indeterminate = c);
+  }, [c]);
+  const _ = o[`checkbox--size-${S(l)}`], N = a ? o["checkbox--invalid"] : "", g = c ? o["checkbox--indeterminate"] : "", v = [
+    o.checkbox,
+    _,
+    N,
+    g,
+    h
+  ].filter(Boolean).join(" "), O = F[l];
+  return /* @__PURE__ */ y("label", { className: v, htmlFor: u, children: [
+    /* @__PURE__ */ e(
+      "input",
+      {
+        ref: n,
+        id: u,
+        type: "checkbox",
+        className: o.checkbox__input,
+        checked: i,
+        defaultChecked: m,
+        disabled: f,
+        "aria-invalid": a ? !0 : void 0,
+        onChange: I,
+        ...d,
+        ...c ? { "aria-checked": "mixed" } : {}
+      }
+    ),
+    /* @__PURE__ */ e("span", { className: o.checkbox__box, children: t !== null && (() => {
+      const s = P[t];
+      return /* @__PURE__ */ e("span", { className: o.checkbox__icon, children: /* @__PURE__ */ e(H, { glyph: /* @__PURE__ */ e(s, {}), size: O }) }, t);
+    })() }),
+    r != null && /* @__PURE__ */ e("span", { className: o.checkbox__label, children: r })
+  ] });
+});
+T.displayName = "Checkbox";
+export {
+  T as default
+};
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport {\n  forwardRef,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useRef,\n} 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 */\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\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  },\n  ref,\n) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\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\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["CHECKBOX_ICON_SIZE","ICON_COMPONENT","CheckIcon","MinusIcon","Checkbox","forwardRef","className","indeterminate","size","invalid","children","idProp","checked","defaultChecked","disabled","onChange","rest","ref","inputRef","useRef","useImperativeHandle","generatedId","useId","id","resolvedChecked","handleChange","useControllable","showingIcon","useEffect","input","sizeClass","styles","toKebab","invalidClass","indeterminateClass","rootClass","iconSize","jsxs","jsx","IconComponent","Icon"],"mappings":";;;;;;;;AAoCA,MAAMA,IAAqD;AAAA,EACzD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,GAGMC,IAAyD;AAAA,EAC7D,OAAOC;AAAA,EACP,OAAOC;AACT,GAMMC,IAAWC,EAA4C,SAC3D;AAAA,EACE,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,GACAC,GACA;AACA,QAAMC,IAAWC,EAAyB,IAAI;AAC9C,EAAAC,EAAoBH,GAAK,MAAMC,EAAS,OAA2B;AACnE,QAAMG,IAAcC,EAAA,GACdC,IAAKZ,KAAUU,GACf,CAACG,GAAiBC,CAAY,IAAIC;AAAA,IACtCd;AAAA,IACAC;AAAA,IACAE;AAAA,EAAA,GAGIY,IAAcpB,IAChB,UACAiB,IACE,UACA;AAEN,EAAAI,EAAU,MAAM;AACd,UAAMC,IAAQX,EAAS;AACvB,IAAIW,QAAa,gBAAgBtB;AAAA,EACnC,GAAG,CAACA,CAAa,CAAC;AAElB,QAAMuB,IAAYC,EAAO,kBAAkBC,EAAQxB,CAAI,CAAC,EAAE,GACpDyB,IAAexB,IAAUsB,EAAO,mBAAmB,IAAI,IACvDG,IAAqB3B,IACvBwB,EAAO,yBAAyB,IAChC,IAEEI,IAAY;AAAA,IAChBJ,EAAO;AAAA,IACPD;AAAA,IACAG;AAAA,IACAC;AAAA,IACA5B;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAEL8B,IAAWpC,EAAmBQ,CAAI;AAExC,SACE,gBAAA6B,EAAC,SAAA,EAAM,WAAWF,GAAW,SAASZ,GACpC,UAAA;AAAA,IAAA,gBAAAe;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKpB;AAAA,QACL,IAAAK;AAAA,QACA,MAAK;AAAA,QACL,WAAWQ,EAAO;AAAA,QAClB,SAAAnB;AAAA,QACA,gBAAAC;AAAA,QACA,UAAAC;AAAA,QACA,gBAAcL,IAAU,KAAO;AAAA,QAC/B,UAAUgB;AAAA,QACT,GAAGT;AAAA,QACH,GAAIT,IAAgB,EAAE,gBAAgB,YAAqB,CAAA;AAAA,MAAC;AAAA,IAAA;AAAA,IAE/D,gBAAA+B,EAAC,UAAK,WAAWP,EAAO,eACrB,UAAAJ,MAAgB,SACd,MAAM;AACL,YAAMY,IAAgBtC,EAAe0B,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,IACCjB,KAAY,QACX,gBAAA4B,EAAC,QAAA,EAAK,WAAWP,EAAO,iBAAqB,UAAArB,EAAA,CAAS;AAAA,EAAA,GAE1D;AAEJ,CAAC;AAEDN,EAAS,cAAc;"}

package/dist/components/checkbox/Checkbox.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Checkbox.css');const c="_checkbox_18swc_10",e="_checkbox__input_18swc_25",_="_checkbox__box_18swc_44",o="_checkbox__icon_18swc_69",b="_checkbox__label_18swc_120",x={checkbox:c,checkbox__input:e,checkbox__box:_,"checkbox--indeterminate":"_checkbox--indeterminate_18swc_65",checkbox__icon:o,"checkbox--invalid":"_checkbox--invalid_18swc_87","checkbox-icon-enter":"_checkbox-icon-enter_18swc_1",checkbox__label:b,"checkbox--size-small":"_checkbox--size-small_18swc_123","checkbox--size-medium":"_checkbox--size-medium_18swc_138","checkbox--size-large":"_checkbox--size-large_18swc_153"};exports.checkbox=c;exports.checkbox__box=_;exports.checkbox__icon=o;exports.checkbox__input=e;exports.checkbox__label=b;exports.default=x;
+//# sourceMappingURL=Checkbox.module.scss.cjs.map

package/dist/components/checkbox/Checkbox.module.scss.cjs.map

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