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

package/dist/components/radio/Radio.d.ts

@@ -0,0 +1,20 @@
+import { InputHTMLAttributes } from 'react';
+export type RadioSize = 'small' | 'medium' | 'large';
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /** Optional CSS class name. */
+    className?: string;
+    /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */
+    size?: RadioSize;
+    /** When true, uses error/destructive styling (red when checked). */
+    invalid?: boolean;
+    /** Label content. Rendered next to the radio. */
+    children?: React.ReactNode;
+}
+/**
+ * Radios let people pick exactly one option from a small, mutually exclusive set — a
+ * workspace plan, a notification cadence, a default theme. Use a Radio when the choices are
+ * few enough to show at once and the user benefits from seeing every option side-by-side.
+ */
+declare const Radio: import('react').ForwardRefExoticComponent<RadioProps & import('react').RefAttributes<HTMLInputElement>>;
+export default Radio;
+//# sourceMappingURL=Radio.d.ts.map

package/dist/components/radio/Radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAMjD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,QAAA,MAAM,KAAK,yGAqDT,CAAC;AAIH,eAAe,KAAK,CAAC"}

package/dist/components/radio/Radio.js

@@ -0,0 +1,47 @@
+import { jsxs as g, jsx as o } from "react/jsx-runtime";
+import { forwardRef as j, useId as v } from "react";
+import { useControllable as x } from "../../hooks/use-controllable.js";
+import { toKebab as y } from "../../utils/string.js";
+import a from "./Radio.module.scss.js";
+const z = j(function({
+  className: n = "",
+  size: t = "medium",
+  invalid: s = !1,
+  children: i,
+  id: d,
+  checked: r,
+  defaultChecked: e,
+  disabled: m,
+  onChange: c,
+  name: p,
+  value: f,
+  ...u
+}, _) {
+  const N = v(), l = d ?? N, [, b] = x(r, e, c), C = a[`radio--size-${y(t)}`], h = s ? a["radio--invalid"] : "", R = [a.radio, C, h, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ g("label", { className: R, htmlFor: l, children: [
+    /* @__PURE__ */ o(
+      "input",
+      {
+        ref: _,
+        id: l,
+        type: "radio",
+        name: p,
+        value: f,
+        className: a.radio__input,
+        checked: r,
+        defaultChecked: e,
+        disabled: m,
+        "aria-invalid": s ? !0 : void 0,
+        onChange: b,
+        ...u
+      }
+    ),
+    /* @__PURE__ */ o("span", { className: a.radio__circle, children: /* @__PURE__ */ o("span", { className: a.radio__dot, "aria-hidden": !0 }) }),
+    i != null && /* @__PURE__ */ o("span", { className: a.radio__label, children: i })
+  ] });
+});
+z.displayName = "Radio";
+export {
+  z as default
+};
+//# sourceMappingURL=Radio.js.map

package/dist/components/radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { forwardRef, useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport { toKebab } from '@/utils/string';\nimport styles from './Radio.module.scss';\n\nexport type RadioSize = 'small' | 'medium' | 'large';\n\nexport interface RadioProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */\n  size?: RadioSize;\n  /** When true, uses error/destructive styling (red when checked). */\n  invalid?: boolean;\n  /** Label content. Rendered next to the radio. */\n  children?: React.ReactNode;\n}\n\n/**\n * Radios let people pick exactly one option from a small, mutually exclusive set — a\n * workspace plan, a notification cadence, a default theme. Use a Radio when the choices are\n * few enough to show at once and the user benefits from seeing every option side-by-side.\n */\nconst Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  {\n    className = '',\n    size = 'medium',\n    invalid = false,\n    children,\n    id: idProp,\n    checked,\n    defaultChecked,\n    disabled,\n    onChange,\n    name,\n    value,\n    ...rest\n  },\n  ref,\n) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [, handleChange] = useControllable(checked, defaultChecked, onChange);\n\n  const sizeClass = styles[`radio--size-${toKebab(size)}`];\n  const invalidClass = invalid ? styles['radio--invalid'] : '';\n\n  const rootClass = [styles.radio, sizeClass, invalidClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props -- invalid form contract; radio has no supported invalid ARIA */}\n      <input\n        ref={ref}\n        id={id}\n        type=\"radio\"\n        name={name}\n        value={value}\n        className={styles['radio__input']}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        aria-invalid={invalid ? true : undefined}\n        onChange={handleChange}\n        {...rest}\n      />\n      <span className={styles['radio__circle']}>\n        <span className={styles['radio__dot']} aria-hidden />\n      </span>\n      {children != null && (\n        <span className={styles['radio__label']}>{children}</span>\n      )}\n    </label>\n  );\n});\n\nRadio.displayName = 'Radio';\n\nexport default Radio;\n"],"names":["Radio","forwardRef","className","size","invalid","children","idProp","checked","defaultChecked","disabled","onChange","name","value","rest","ref","generatedId","useId","id","handleChange","useControllable","sizeClass","styles","toKebab","invalidClass","rootClass","jsxs","jsx"],"mappings":";;;;;AA2BA,MAAMA,IAAQC,EAAyC,SACrD;AAAA,EACE,WAAAC,IAAY;AAAA,EACZ,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,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAcC,EAAA,GACdC,IAAKX,KAAUS,GACf,CAAA,EAAGG,CAAY,IAAIC,EAAgBZ,GAASC,GAAgBE,CAAQ,GAEpEU,IAAYC,EAAO,eAAeC,EAAQnB,CAAI,CAAC,EAAE,GACjDoB,IAAenB,IAAUiB,EAAO,gBAAgB,IAAI,IAEpDG,IAAY,CAACH,EAAO,OAAOD,GAAWG,GAAcrB,CAAS,EAChE,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAuB,EAAC,SAAA,EAAM,WAAWD,GAAW,SAASP,GAEpC,UAAA;AAAA,IAAA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAZ;AAAA,QACA,IAAAG;AAAA,QACA,MAAK;AAAA,QACL,MAAAN;AAAA,QACA,OAAAC;AAAA,QACA,WAAWS,EAAO;AAAA,QAClB,SAAAd;AAAA,QACA,gBAAAC;AAAA,QACA,UAAAC;AAAA,QACA,gBAAcL,IAAU,KAAO;AAAA,QAC/B,UAAUc;AAAA,QACT,GAAGL;AAAA,MAAA;AAAA,IAAA;AAAA,IAEN,gBAAAa,EAAC,QAAA,EAAK,WAAWL,EAAO,eACtB,UAAA,gBAAAK,EAAC,QAAA,EAAK,WAAWL,EAAO,YAAe,eAAW,IAAC,GACrD;AAAA,IACChB,KAAY,QACX,gBAAAqB,EAAC,QAAA,EAAK,WAAWL,EAAO,cAAkB,UAAAhB,EAAA,CAAS;AAAA,EAAA,GAEvD;AAEJ,CAAC;AAEDL,EAAM,cAAc;"}

package/dist/components/radio/Radio.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Radio.css');const _="_radio_h0rbb_2",i="_radio__input_h0rbb_17",r="_radio__circle_h0rbb_36",o="_radio__dot_h0rbb_62",a="_radio__label_h0rbb_119",d={radio:_,radio__input:i,radio__circle:r,radio__dot:o,"radio--invalid":"_radio--invalid_h0rbb_83",radio__label:a,"radio--size-small":"_radio--size-small_h0rbb_122","radio--size-medium":"_radio--size-medium_h0rbb_143","radio--size-large":"_radio--size-large_h0rbb_164"};exports.default=d;exports.radio=_;exports.radio__circle=r;exports.radio__dot=o;exports.radio__input=i;exports.radio__label=a;
+//# sourceMappingURL=Radio.module.scss.cjs.map

package/dist/components/radio/Radio.module.scss.cjs.map

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

package/dist/components/radio/Radio.module.scss.js

@@ -0,0 +1,20 @@
+import './Radio.css';const _ = "_radio_h0rbb_2", i = "_radio__input_h0rbb_17", r = "_radio__circle_h0rbb_36", a = "_radio__dot_h0rbb_62", o = "_radio__label_h0rbb_119", d = {
+  radio: _,
+  radio__input: i,
+  radio__circle: r,
+  radio__dot: a,
+  "radio--invalid": "_radio--invalid_h0rbb_83",
+  radio__label: o,
+  "radio--size-small": "_radio--size-small_h0rbb_122",
+  "radio--size-medium": "_radio--size-medium_h0rbb_143",
+  "radio--size-large": "_radio--size-large_h0rbb_164"
+};
+export {
+  d as default,
+  _ as radio,
+  r as radio__circle,
+  a as radio__dot,
+  i as radio__input,
+  o as radio__label
+};
+//# sourceMappingURL=Radio.module.scss.js.map

package/dist/components/radio/Radio.module.scss.js.map

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

package/dist/components/radio/index.cjs

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

package/dist/components/radio/index.cjs.map

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/radio/index.js

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

package/dist/components/radio/index.js.map

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

package/dist/components/reaction-button/ReactionButton.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),o=require("react"),t=require("./ReactionButton.module.scss.cjs"),p=(n,e)=>`${n} ${e} reaction${e!==1?"s":""}`;function R({emoji:n,count:e,byCurrentUser:i=!1,formatLabel:c=p,className:d="",onClick:f,...m}){const u=o.useRef(e),a=o.useRef(void 0),[s,l]=o.useState(null);o.useEffect(()=>(e!==u.current&&(clearTimeout(a.current),l(e>u.current?"up":"down"),u.current=e,a.current=setTimeout(()=>l(null),300)),()=>clearTimeout(a.current)),[e]);const b=[t.default["reaction-button"],i?t.default["reaction-button--mine"]:"",d].filter(Boolean).join(" "),_=[t.default["reaction-button__count"],s==="up"?t.default["reaction-button__count--anim-up"]:"",s==="down"?t.default["reaction-button__count--anim-down"]:""].filter(Boolean).join(" ");return r.jsxs("button",{type:"button",className:b,onClick:f,"aria-label":c(n,e),"aria-pressed":i,...m,children:[r.jsx("span",{className:t.default["reaction-button__emoji"],"aria-hidden":!0,children:n}),r.jsx("span",{className:_,children:e})]})}exports.default=R;
+//# sourceMappingURL=ReactionButton.cjs.map

package/dist/components/reaction-button/ReactionButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionButton.cjs","sources":["../../../src/components/reaction-button/ReactionButton.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { ButtonHTMLAttributes } from 'react';\nimport styles from './ReactionButton.module.scss';\n\nexport interface ReactionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** The emoji character to display. */\n  emoji: string;\n  /** Number of users who reacted with this emoji. */\n  count: number;\n  /** Whether the current user has reacted with this emoji. */\n  byCurrentUser?: boolean;\n  /** Accessible name. Default: `{emoji} {count} reaction(s)`. An explicit `aria-label` still wins. */\n  formatLabel?: (emoji: string, count: number) => string;\n}\n\nconst defaultFormatLabel = (emoji: string, count: number) =>\n  `${emoji} ${count} reaction${count !== 1 ? 's' : ''}`;\n\n/**\n * A single emoji reaction button — shows the emoji, count, and highlights when the current user\n * has reacted. Fires onClick when clicked; the host owns toggle logic.\n *\n * The count animates up or down when the `count` prop changes.\n */\nexport default function ReactionButton({\n  emoji,\n  count,\n  byCurrentUser = false,\n  formatLabel = defaultFormatLabel,\n  className = '',\n  onClick,\n  ...rest\n}: ReactionButtonProps) {\n  const prevCountRef = useRef(count);\n  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n  const [countAnim, setCountAnim] = useState<'up' | 'down' | null>(null);\n\n  useEffect(() => {\n    if (count !== prevCountRef.current) {\n      clearTimeout(timerRef.current);\n      setCountAnim(count > prevCountRef.current ? 'up' : 'down');\n      prevCountRef.current = count;\n      timerRef.current = setTimeout(() => setCountAnim(null), 300);\n    }\n    return () => clearTimeout(timerRef.current);\n  }, [count]);\n\n  const rootClass = [\n    styles['reaction-button'],\n    byCurrentUser ? styles['reaction-button--mine'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const countClass = [\n    styles['reaction-button__count'],\n    countAnim === 'up' ? styles['reaction-button__count--anim-up'] : '',\n    countAnim === 'down' ? styles['reaction-button__count--anim-down'] : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      type=\"button\"\n      className={rootClass}\n      onClick={onClick}\n      aria-label={formatLabel(emoji, count)}\n      aria-pressed={byCurrentUser}\n      {...rest}\n    >\n      <span className={styles['reaction-button__emoji']} aria-hidden>\n        {emoji}\n      </span>\n      <span className={countClass}>{count}</span>\n    </button>\n  );\n}\n"],"names":["defaultFormatLabel","emoji","count","ReactionButton","byCurrentUser","formatLabel","className","onClick","rest","prevCountRef","useRef","timerRef","countAnim","setCountAnim","useState","useEffect","rootClass","styles","countClass","jsxs","jsx"],"mappings":"kNAeMA,EAAqB,CAACC,EAAeC,IACzC,GAAGD,CAAK,IAAIC,CAAK,YAAYA,IAAU,EAAI,IAAM,EAAE,GAQrD,SAAwBC,EAAe,CACrC,MAAAF,EACA,MAAAC,EACA,cAAAE,EAAgB,GAChB,YAAAC,EAAcL,EACd,UAAAM,EAAY,GACZ,QAAAC,EACA,GAAGC,CACL,EAAwB,CACtB,MAAMC,EAAeC,EAAAA,OAAOR,CAAK,EAC3BS,EAAWD,EAAAA,OAAsC,MAAS,EAC1D,CAACE,EAAWC,CAAY,EAAIC,EAAAA,SAA+B,IAAI,EAErEC,EAAAA,UAAU,KACJb,IAAUO,EAAa,UACzB,aAAaE,EAAS,OAAO,EAC7BE,EAAaX,EAAQO,EAAa,QAAU,KAAO,MAAM,EACzDA,EAAa,QAAUP,EACvBS,EAAS,QAAU,WAAW,IAAME,EAAa,IAAI,EAAG,GAAG,GAEtD,IAAM,aAAaF,EAAS,OAAO,GACzC,CAACT,CAAK,CAAC,EAEV,MAAMc,EAAY,CAChBC,EAAAA,QAAO,iBAAiB,EACxBb,EAAgBa,EAAAA,QAAO,uBAAuB,EAAI,GAClDX,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELY,EAAa,CACjBD,EAAAA,QAAO,wBAAwB,EAC/BL,IAAc,KAAOK,UAAO,iCAAiC,EAAI,GACjEL,IAAc,OAASK,UAAO,mCAAmC,EAAI,EAAA,EAEpE,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEE,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,UAAWH,EACX,QAAAT,EACA,aAAYF,EAAYJ,EAAOC,CAAK,EACpC,eAAcE,EACb,GAAGI,EAEJ,SAAA,CAAAY,EAAAA,IAAC,QAAK,UAAWH,UAAO,wBAAwB,EAAG,cAAW,GAC3D,SAAAhB,EACH,EACAmB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAa,SAAAhB,CAAA,CAAM,CAAA,CAAA,CAAA,CAG1C"}

package/dist/components/reaction-button/ReactionButton.css

@@ -0,0 +1 @@
+@keyframes _reaction-count-up_15oyo_1{0%{transform:translateY(var(--spacing-xxs));opacity:0}to{transform:translateY(0);opacity:1}}@keyframes _reaction-count-down_15oyo_1{0%{transform:translateY(calc(var(--spacing-xxs) * -1));opacity:0}to{transform:translateY(0);opacity:1}}._reaction-button_15oyo_22{display:inline-flex;align-items:center;gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xxs);border:none;border-radius:var(--radius-s);background-color:rgba(var(--center-channel-color-rgb),.08);cursor:pointer;outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition)}._reaction-button_15oyo_22:hover{background-color:rgba(var(--center-channel-color-rgb),.12)}._reaction-button_15oyo_22:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._reaction-button--mine_15oyo_42{background-color:rgba(var(--link-color-rgb),.08);box-shadow:inset 0 0 0 1px var(--link-color)}._reaction-button--mine_15oyo_42:hover{background-color:rgba(var(--link-color-rgb),.12)}._reaction-button--mine_15oyo_42 ._reaction-button__count_15oyo_49{color:var(--link-color)}._reaction-button__emoji_15oyo_52{font-size:var(--font-size-200);line-height:var(--line-height-50)}._reaction-button__count_15oyo_49{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.56)}._reaction-button__count--anim-up_15oyo_63{animation:_reaction-count-up_15oyo_1 var(--duration-moderate) var(--ease-entrance)}._reaction-button__count--anim-down_15oyo_66{animation:_reaction-count-down_15oyo_1 var(--duration-moderate) var(--ease-entrance)}

package/dist/components/reaction-button/ReactionButton.d.ts

@@ -0,0 +1,19 @@
+import { ButtonHTMLAttributes } from 'react';
+export interface ReactionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** The emoji character to display. */
+    emoji: string;
+    /** Number of users who reacted with this emoji. */
+    count: number;
+    /** Whether the current user has reacted with this emoji. */
+    byCurrentUser?: boolean;
+    /** Accessible name. Default: `{emoji} {count} reaction(s)`. An explicit `aria-label` still wins. */
+    formatLabel?: (emoji: string, count: number) => string;
+}
+/**
+ * A single emoji reaction button — shows the emoji, count, and highlights when the current user
+ * has reacted. Fires onClick when clicked; the host owns toggle logic.
+ *
+ * The count animates up or down when the `count` prop changes.
+ */
+export default function ReactionButton({ emoji, count, byCurrentUser, formatLabel, className, onClick, ...rest }: ReactionButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ReactionButton.d.ts.map

package/dist/components/reaction-button/ReactionButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionButton.d.ts","sourceRoot":"","sources":["../../../src/components/reaction-button/ReactionButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGlD,MAAM,WAAW,mBAAoB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAClF,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oGAAoG;IACpG,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACxD;AAKD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,WAAgC,EAChC,SAAc,EACd,OAAO,EACP,GAAG,IAAI,EACR,EAAE,mBAAmB,2CA8CrB"}

package/dist/components/reaction-button/ReactionButton.js

@@ -0,0 +1,44 @@
+import { jsxs as _, jsx as u } from "react/jsx-runtime";
+import { useRef as c, useState as h, useEffect as j } from "react";
+import e from "./ReactionButton.module.scss.js";
+const R = (n, t) => `${n} ${t} reaction${t !== 1 ? "s" : ""}`;
+function C({
+  emoji: n,
+  count: t,
+  byCurrentUser: a = !1,
+  formatLabel: l = R,
+  className: m = "",
+  onClick: f,
+  ...d
+}) {
+  const o = c(t), r = c(void 0), [i, s] = h(null);
+  j(() => (t !== o.current && (clearTimeout(r.current), s(t > o.current ? "up" : "down"), o.current = t, r.current = setTimeout(() => s(null), 300)), () => clearTimeout(r.current)), [t]);
+  const p = [
+    e["reaction-button"],
+    a ? e["reaction-button--mine"] : "",
+    m
+  ].filter(Boolean).join(" "), b = [
+    e["reaction-button__count"],
+    i === "up" ? e["reaction-button__count--anim-up"] : "",
+    i === "down" ? e["reaction-button__count--anim-down"] : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ _(
+    "button",
+    {
+      type: "button",
+      className: p,
+      onClick: f,
+      "aria-label": l(n, t),
+      "aria-pressed": a,
+      ...d,
+      children: [
+        /* @__PURE__ */ u("span", { className: e["reaction-button__emoji"], "aria-hidden": !0, children: n }),
+        /* @__PURE__ */ u("span", { className: b, children: t })
+      ]
+    }
+  );
+}
+export {
+  C as default
+};
+//# sourceMappingURL=ReactionButton.js.map

package/dist/components/reaction-button/ReactionButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionButton.js","sources":["../../../src/components/reaction-button/ReactionButton.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { ButtonHTMLAttributes } from 'react';\nimport styles from './ReactionButton.module.scss';\n\nexport interface ReactionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** The emoji character to display. */\n  emoji: string;\n  /** Number of users who reacted with this emoji. */\n  count: number;\n  /** Whether the current user has reacted with this emoji. */\n  byCurrentUser?: boolean;\n  /** Accessible name. Default: `{emoji} {count} reaction(s)`. An explicit `aria-label` still wins. */\n  formatLabel?: (emoji: string, count: number) => string;\n}\n\nconst defaultFormatLabel = (emoji: string, count: number) =>\n  `${emoji} ${count} reaction${count !== 1 ? 's' : ''}`;\n\n/**\n * A single emoji reaction button — shows the emoji, count, and highlights when the current user\n * has reacted. Fires onClick when clicked; the host owns toggle logic.\n *\n * The count animates up or down when the `count` prop changes.\n */\nexport default function ReactionButton({\n  emoji,\n  count,\n  byCurrentUser = false,\n  formatLabel = defaultFormatLabel,\n  className = '',\n  onClick,\n  ...rest\n}: ReactionButtonProps) {\n  const prevCountRef = useRef(count);\n  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n  const [countAnim, setCountAnim] = useState<'up' | 'down' | null>(null);\n\n  useEffect(() => {\n    if (count !== prevCountRef.current) {\n      clearTimeout(timerRef.current);\n      setCountAnim(count > prevCountRef.current ? 'up' : 'down');\n      prevCountRef.current = count;\n      timerRef.current = setTimeout(() => setCountAnim(null), 300);\n    }\n    return () => clearTimeout(timerRef.current);\n  }, [count]);\n\n  const rootClass = [\n    styles['reaction-button'],\n    byCurrentUser ? styles['reaction-button--mine'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const countClass = [\n    styles['reaction-button__count'],\n    countAnim === 'up' ? styles['reaction-button__count--anim-up'] : '',\n    countAnim === 'down' ? styles['reaction-button__count--anim-down'] : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      type=\"button\"\n      className={rootClass}\n      onClick={onClick}\n      aria-label={formatLabel(emoji, count)}\n      aria-pressed={byCurrentUser}\n      {...rest}\n    >\n      <span className={styles['reaction-button__emoji']} aria-hidden>\n        {emoji}\n      </span>\n      <span className={countClass}>{count}</span>\n    </button>\n  );\n}\n"],"names":["defaultFormatLabel","emoji","count","ReactionButton","byCurrentUser","formatLabel","className","onClick","rest","prevCountRef","useRef","timerRef","countAnim","setCountAnim","useState","useEffect","rootClass","styles","countClass","jsxs","jsx"],"mappings":";;;AAeA,MAAMA,IAAqB,CAACC,GAAeC,MACzC,GAAGD,CAAK,IAAIC,CAAK,YAAYA,MAAU,IAAI,MAAM,EAAE;AAQrD,SAAwBC,EAAe;AAAA,EACrC,OAAAF;AAAA,EACA,OAAAC;AAAA,EACA,eAAAE,IAAgB;AAAA,EAChB,aAAAC,IAAcL;AAAA,EACd,WAAAM,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,GAAGC;AACL,GAAwB;AACtB,QAAMC,IAAeC,EAAOR,CAAK,GAC3BS,IAAWD,EAAsC,MAAS,GAC1D,CAACE,GAAWC,CAAY,IAAIC,EAA+B,IAAI;AAErE,EAAAC,EAAU,OACJb,MAAUO,EAAa,YACzB,aAAaE,EAAS,OAAO,GAC7BE,EAAaX,IAAQO,EAAa,UAAU,OAAO,MAAM,GACzDA,EAAa,UAAUP,GACvBS,EAAS,UAAU,WAAW,MAAME,EAAa,IAAI,GAAG,GAAG,IAEtD,MAAM,aAAaF,EAAS,OAAO,IACzC,CAACT,CAAK,CAAC;AAEV,QAAMc,IAAY;AAAA,IAChBC,EAAO,iBAAiB;AAAA,IACxBb,IAAgBa,EAAO,uBAAuB,IAAI;AAAA,IAClDX;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELY,IAAa;AAAA,IACjBD,EAAO,wBAAwB;AAAA,IAC/BL,MAAc,OAAOK,EAAO,iCAAiC,IAAI;AAAA,IACjEL,MAAc,SAASK,EAAO,mCAAmC,IAAI;AAAA,EAAA,EAEpE,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWH;AAAA,MACX,SAAAT;AAAA,MACA,cAAYF,EAAYJ,GAAOC,CAAK;AAAA,MACpC,gBAAcE;AAAA,MACb,GAAGI;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAY,EAAC,UAAK,WAAWH,EAAO,wBAAwB,GAAG,eAAW,IAC3D,UAAAhB,GACH;AAAA,QACA,gBAAAmB,EAAC,QAAA,EAAK,WAAWF,GAAa,UAAAhB,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1C;"}

package/dist/components/reaction-button/ReactionButton.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ReactionButton.css');const o={"reaction-button":"_reaction-button_15oyo_22","reaction-button--mine":"_reaction-button--mine_15oyo_42","reaction-button__count":"_reaction-button__count_15oyo_49","reaction-button__emoji":"_reaction-button__emoji_15oyo_52","reaction-button__count--anim-up":"_reaction-button__count--anim-up_15oyo_63","reaction-button__count--anim-down":"_reaction-button__count--anim-down_15oyo_66"};exports.default=o;
+//# sourceMappingURL=ReactionButton.module.scss.cjs.map

package/dist/components/reaction-button/ReactionButton.module.scss.cjs.map

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

package/dist/components/reaction-button/ReactionButton.module.scss.js

@@ -0,0 +1,12 @@
+import './ReactionButton.css';const o = {
+  "reaction-button": "_reaction-button_15oyo_22",
+  "reaction-button--mine": "_reaction-button--mine_15oyo_42",
+  "reaction-button__count": "_reaction-button__count_15oyo_49",
+  "reaction-button__emoji": "_reaction-button__emoji_15oyo_52",
+  "reaction-button__count--anim-up": "_reaction-button__count--anim-up_15oyo_63",
+  "reaction-button__count--anim-down": "_reaction-button__count--anim-down_15oyo_66"
+};
+export {
+  o as default
+};
+//# sourceMappingURL=ReactionButton.module.scss.js.map

package/dist/components/reaction-button/ReactionButton.module.scss.js.map

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

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

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

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

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

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

@@ -0,0 +1,3 @@
+export { default as ReactionButton } from './ReactionButton';
+export type { ReactionButtonProps } from './ReactionButton';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/reaction-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

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

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

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

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

package/dist/components/reactions-row/ReactionsRow.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),N=require("../icon-button/IconButton.cjs"),l=require("../icon/Icon.cjs"),q=require("../reaction-button/ReactionButton.cjs"),__g=require("@mattermost/compass-icons/components/check-circle-outline.js"),g=__g?.default??__g,__k=require("@mattermost/compass-icons/components/emoticon-plus-outline.js"),k=__k?.default??__k,a=require("./ReactionsRow.module.scss.cjs"),v=[{emoji:"👍",count:1},{emoji:"😀",count:4},{emoji:"🙌",count:1}];function I({reactions:n=v,showAddReaction:c=!1,acknowledged:r=!1,acknowledgeCount:i=0,currentUserAcknowledged:s=!1,onAddReaction:u,onReactionClick:t,onAcknowledge:d,acknowledgeLabel:f="Acknowledge",acknowledgeAriaLabel:_="Acknowledge message",addReactionLabel:j="Add reaction",formatReactionLabel:m,className:x="",...h}){const w=[a.default["reactions-row"],x].filter(Boolean).join(" ");return e.jsxs("div",{className:w,...h,children:[r&&e.jsxs("button",{type:"button",className:[a.default["reactions-row__ack"],s?a.default["reactions-row__ack--active"]:""].filter(Boolean).join(" "),onClick:d,"aria-pressed":s,"aria-label":_,children:[e.jsx("span",{className:a.default["reactions-row__ack-icon"],"aria-hidden":!0,children:e.jsx(l.default,{size:"16",glyph:e.jsx(g,{})})}),s?e.jsx("span",{className:a.default["reactions-row__ack-count"],children:i}):e.jsx("span",{className:a.default["reactions-row__ack-label"],children:f})]}),e.jsxs("div",{className:a.default["reactions-row__buttons"],children:[n.map(({emoji:o,count:b,byCurrentUser:p})=>e.jsx(q.default,{emoji:o,count:b,byCurrentUser:p,formatLabel:m,onClick:()=>t==null?void 0:t(o)},o)),c&&e.jsx(N.default,{"aria-label":j,className:a.default["reactions-row__add-reaction"],size:"x-small",onClick:u,icon:e.jsx(l.default,{size:"16",glyph:e.jsx(k,{})})})]})]})}exports.default=I;
+//# sourceMappingURL=ReactionsRow.cjs.map

package/dist/components/reactions-row/ReactionsRow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionsRow.cjs","sources":["../../../src/components/reactions-row/ReactionsRow.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport ReactionButton from '@/components/reaction-button/ReactionButton';\nimport CheckCircleOutlineIcon from '@mattermost/compass-icons/components/check-circle-outline';\nimport EmoticonPlusOutlineIcon from '@mattermost/compass-icons/components/emoticon-plus-outline';\nimport styles from './ReactionsRow.module.scss';\n\nexport interface ReactionItem {\n  emoji: string;\n  count: number;\n  /** Whether the current user reacted with this emoji. */\n  byCurrentUser?: boolean;\n}\n\nexport interface ReactionsRowProps extends HTMLAttributes<HTMLDivElement> {\n  /** List of reactions to display. */\n  reactions?: ReactionItem[];\n  /** Whether to show the add-reaction button. Default: false. */\n  showAddReaction?: boolean;\n  /** Whether to show the acknowledge button. */\n  acknowledged?: boolean;\n  /** Acknowledge count. */\n  acknowledgeCount?: number;\n  /** Whether the current user has acknowledged. Default: false. */\n  currentUserAcknowledged?: boolean;\n  /** Called when add-reaction is clicked. */\n  onAddReaction?: () => void;\n  /** Called when a Reaction Button is clicked. */\n  onReactionClick?: (emoji: string) => void;\n  /** Called when the acknowledge button is clicked. */\n  onAcknowledge?: () => void;\n  /** Visible acknowledge button text. Default: \"Acknowledge\". */\n  acknowledgeLabel?: ReactNode;\n  /** Accessible name for the acknowledge button. Default: \"Acknowledge message\". */\n  acknowledgeAriaLabel?: string;\n  /** Accessible name for the add-reaction button. Default: \"Add reaction\". */\n  addReactionLabel?: string;\n  /** Accessible name for each reaction button. Default: `{emoji} {count} reaction(s)`. */\n  formatReactionLabel?: (emoji: string, count: number) => string;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_REACTIONS: ReactionItem[] = [\n  { emoji: '👍', count: 1 },\n  { emoji: '😀', count: 4 },\n  { emoji: '🙌', count: 1 },\n];\n\n/**\n * Reactions Row is the strip of Reaction Buttons below a message — the lightest weight way to\n * respond, applaud, or acknowledge without adding to the thread. The component handles the\n * count, the \"this is mine\" highlight, and the add-reaction affordance.\n */\nexport default function ReactionsRow({\n  reactions = DEFAULT_REACTIONS,\n  showAddReaction = false,\n  acknowledged = false,\n  acknowledgeCount = 0,\n  currentUserAcknowledged = false,\n  onAddReaction,\n  onReactionClick,\n  onAcknowledge,\n  acknowledgeLabel = 'Acknowledge',\n  acknowledgeAriaLabel = 'Acknowledge message',\n  addReactionLabel = 'Add reaction',\n  formatReactionLabel,\n  className = '',\n  ...rest\n}: ReactionsRowProps) {\n  const rootClass = [styles['reactions-row'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} {...rest}>\n      {/* Acknowledge button */}\n      {acknowledged && (\n        <button\n          type=\"button\"\n          className={[\n            styles['reactions-row__ack'],\n            currentUserAcknowledged ? styles['reactions-row__ack--active'] : '',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={onAcknowledge}\n          aria-pressed={currentUserAcknowledged}\n          aria-label={acknowledgeAriaLabel}\n        >\n          <span className={styles['reactions-row__ack-icon']} aria-hidden>\n            <Icon size=\"16\" glyph={<CheckCircleOutlineIcon />} />\n          </span>\n          {currentUserAcknowledged ? (\n            <span className={styles['reactions-row__ack-count']}>\n              {acknowledgeCount}\n            </span>\n          ) : (\n            <span className={styles['reactions-row__ack-label']}>\n              {acknowledgeLabel}\n            </span>\n          )}\n        </button>\n      )}\n\n      {/* Reaction buttons */}\n      <div className={styles['reactions-row__buttons']}>\n        {reactions.map(({ emoji, count, byCurrentUser }) => (\n          <ReactionButton\n            key={emoji}\n            emoji={emoji}\n            count={count}\n            byCurrentUser={byCurrentUser}\n            formatLabel={formatReactionLabel}\n            onClick={() => onReactionClick?.(emoji)}\n          />\n        ))}\n\n        {/* Add reaction button */}\n        {showAddReaction && (\n          <IconButton\n            aria-label={addReactionLabel}\n            className={styles['reactions-row__add-reaction']}\n            size=\"x-small\"\n            onClick={onAddReaction}\n            icon={<Icon size=\"16\" glyph={<EmoticonPlusOutlineIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["DEFAULT_REACTIONS","ReactionsRow","reactions","showAddReaction","acknowledged","acknowledgeCount","currentUserAcknowledged","onAddReaction","onReactionClick","onAcknowledge","acknowledgeLabel","acknowledgeAriaLabel","addReactionLabel","formatReactionLabel","className","rest","rootClass","styles","jsxs","jsx","Icon","CheckCircleOutlineIcon","emoji","count","byCurrentUser","ReactionButton","IconButton","EmoticonPlusOutlineIcon"],"mappings":"scA4CMA,EAAoC,CACxC,CAAE,MAAO,KAAM,MAAO,CAAA,EACtB,CAAE,MAAO,KAAM,MAAO,CAAA,EACtB,CAAE,MAAO,KAAM,MAAO,CAAA,CACxB,EAOA,SAAwBC,EAAa,CACnC,UAAAC,EAAYF,EACZ,gBAAAG,EAAkB,GAClB,aAAAC,EAAe,GACf,iBAAAC,EAAmB,EACnB,wBAAAC,EAA0B,GAC1B,cAAAC,EACA,gBAAAC,EACA,cAAAC,EACA,iBAAAC,EAAmB,cACnB,qBAAAC,EAAuB,sBACvB,iBAAAC,EAAmB,eACnB,oBAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAsB,CACpB,MAAMC,EAAY,CAACC,UAAO,eAAe,EAAGH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEI,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAY,GAAGD,EAE5B,SAAA,CAAAX,GACCc,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,UAAW,CACTD,EAAAA,QAAO,oBAAoB,EAC3BX,EAA0BW,EAAAA,QAAO,4BAA4B,EAAI,EAAA,EAEhE,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASR,EACT,eAAcH,EACd,aAAYK,EAEZ,SAAA,CAAAQ,MAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,yBAAyB,EAAG,cAAW,GAC7D,SAAAE,EAAAA,IAACC,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,EAAA,CAAA,CAAuB,EAAI,EACrD,EACCf,EACCa,EAAAA,IAAC,OAAA,CAAK,UAAWF,UAAO,0BAA0B,EAC/C,SAAAZ,CAAA,CACH,QAEC,OAAA,CAAK,UAAWY,EAAAA,QAAO,0BAA0B,EAC/C,SAAAP,CAAA,CACH,CAAA,CAAA,CAAA,EAMNQ,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,wBAAwB,EAC5C,SAAA,CAAAf,EAAU,IAAI,CAAC,CAAE,MAAAoB,EAAO,MAAAC,EAAO,cAAAC,KAC9BL,EAAAA,IAACM,EAAAA,QAAA,CAEC,MAAAH,EACA,MAAAC,EACA,cAAAC,EACA,YAAaX,EACb,QAAS,IAAML,GAAA,YAAAA,EAAkBc,EAAK,EALjCA,CAAA,CAOR,EAGAnB,GACCgB,EAAAA,IAACO,EAAAA,QAAA,CACC,aAAYd,EACZ,UAAWK,EAAAA,QAAO,6BAA6B,EAC/C,KAAK,UACL,QAASV,EACT,WAAOa,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACQ,IAAwB,CAAA,CAAI,CAAA,CAAA,CAC5D,CAAA,CAEJ,CAAA,EACF,CAEJ"}

package/dist/components/reactions-row/ReactionsRow.css

@@ -0,0 +1 @@
+._reactions-row_2mtjp_2{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xs);padding:var(--spacing-xxxxs) 0}._reactions-row__buttons_2mtjp_9{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xxxs)}@media(hover:hover)and (pointer:fine){._reactions-row__add-reaction_2mtjp_16{opacity:0;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-transition)}._reactions-row_2mtjp_2:hover ._reactions-row__add-reaction_2mtjp_16,._reactions-row_2mtjp_2:focus-within ._reactions-row__add-reaction_2mtjp_16{opacity:1;pointer-events:auto}}._reactions-row__ack_2mtjp_26{display:inline-flex;align-items:center;gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xxs);border:none;border-radius:var(--radius-s);background-color:rgba(var(--color-success-rgb),.12);color:var(--color-success);cursor:pointer;outline:2px solid color-mix(in srgb,var(--color-success) 0%,transparent);outline-offset:0;transition:background-color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition)}._reactions-row__ack_2mtjp_26:hover{background-color:rgba(var(--color-success-rgb),.2)}._reactions-row__ack_2mtjp_26:focus-visible{outline-color:var(--color-success);outline-offset:3px}._reactions-row__ack--active_2mtjp_47{background-color:var(--color-success);color:var(--button-color)}._reactions-row__ack--active_2mtjp_47:hover{background-color:color-mix(in srgb,black 8%,var(--color-success))}._reactions-row__ack-icon_2mtjp_54{display:inline-flex;align-items:center}._reactions-row__ack-count_2mtjp_58,._reactions-row__ack-label_2mtjp_64{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75)}

package/dist/components/reactions-row/ReactionsRow.d.ts

@@ -0,0 +1,42 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ReactionItem {
+    emoji: string;
+    count: number;
+    /** Whether the current user reacted with this emoji. */
+    byCurrentUser?: boolean;
+}
+export interface ReactionsRowProps extends HTMLAttributes<HTMLDivElement> {
+    /** List of reactions to display. */
+    reactions?: ReactionItem[];
+    /** Whether to show the add-reaction button. Default: false. */
+    showAddReaction?: boolean;
+    /** Whether to show the acknowledge button. */
+    acknowledged?: boolean;
+    /** Acknowledge count. */
+    acknowledgeCount?: number;
+    /** Whether the current user has acknowledged. Default: false. */
+    currentUserAcknowledged?: boolean;
+    /** Called when add-reaction is clicked. */
+    onAddReaction?: () => void;
+    /** Called when a Reaction Button is clicked. */
+    onReactionClick?: (emoji: string) => void;
+    /** Called when the acknowledge button is clicked. */
+    onAcknowledge?: () => void;
+    /** Visible acknowledge button text. Default: "Acknowledge". */
+    acknowledgeLabel?: ReactNode;
+    /** Accessible name for the acknowledge button. Default: "Acknowledge message". */
+    acknowledgeAriaLabel?: string;
+    /** Accessible name for the add-reaction button. Default: "Add reaction". */
+    addReactionLabel?: string;
+    /** Accessible name for each reaction button. Default: `{emoji} {count} reaction(s)`. */
+    formatReactionLabel?: (emoji: string, count: number) => string;
+    /** Optional CSS class name. */
+    className?: string;
+}
+/**
+ * Reactions Row is the strip of Reaction Buttons below a message — the lightest weight way to
+ * respond, applaud, or acknowledge without adding to the thread. The component handles the
+ * count, the "this is mine" highlight, and the add-reaction affordance.
+ */
+export default function ReactionsRow({ reactions, showAddReaction, acknowledged, acknowledgeCount, currentUserAcknowledged, onAddReaction, onReactionClick, onAcknowledge, acknowledgeLabel, acknowledgeAriaLabel, addReactionLabel, formatReactionLabel, className, ...rest }: ReactionsRowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ReactionsRow.d.ts.map

package/dist/components/reactions-row/ReactionsRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionsRow.d.ts","sourceRoot":"","sources":["../../../src/components/reactions-row/ReactionsRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,oCAAoC;IACpC,SAAS,CAAC,EAAE,YAAY,EAAE,CAAC;IAC3B,+DAA+D;IAC/D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iEAAiE;IACjE,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,gDAAgD;IAChD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,qDAAqD;IACrD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,kFAAkF;IAClF,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wFAAwF;IACxF,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/D,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAA6B,EAC7B,eAAuB,EACvB,YAAoB,EACpB,gBAAoB,EACpB,uBAA+B,EAC/B,aAAa,EACb,eAAe,EACf,aAAa,EACb,gBAAgC,EAChC,oBAA4C,EAC5C,gBAAiC,EACjC,mBAAmB,EACnB,SAAc,EACd,GAAG,IAAI,EACR,EAAE,iBAAiB,2CA8DnB"}

package/dist/components/reactions-row/ReactionsRow.js

@@ -0,0 +1,76 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import I from "../icon-button/IconButton.js";
+import i from "../icon/Icon.js";
+import x from "../reaction-button/ReactionButton.js";
+import __y from "@mattermost/compass-icons/components/check-circle-outline.js";const y=__y&&__y.default?__y.default:__y;
+import __B from "@mattermost/compass-icons/components/emoticon-plus-outline.js";const B=__B&&__B.default?__B.default:__B;
+import a from "./ReactionsRow.module.scss.js";
+const g = [
+  { emoji: "👍", count: 1 },
+  { emoji: "😀", count: 4 },
+  { emoji: "🙌", count: 1 }
+];
+function T({
+  reactions: n = g,
+  showAddReaction: c = !1,
+  acknowledged: l = !1,
+  acknowledgeCount: m = 0,
+  currentUserAcknowledged: e = !1,
+  onAddReaction: p,
+  onReactionClick: s,
+  onAcknowledge: f,
+  acknowledgeLabel: _ = "Acknowledge",
+  acknowledgeAriaLabel: d = "Acknowledge message",
+  addReactionLabel: u = "Add reaction",
+  formatReactionLabel: h,
+  className: w = "",
+  ...N
+}) {
+  const b = [a["reactions-row"], w].filter(Boolean).join(" ");
+  return /* @__PURE__ */ t("div", { className: b, ...N, children: [
+    l && /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        className: [
+          a["reactions-row__ack"],
+          e ? a["reactions-row__ack--active"] : ""
+        ].filter(Boolean).join(" "),
+        onClick: f,
+        "aria-pressed": e,
+        "aria-label": d,
+        children: [
+          /* @__PURE__ */ o("span", { className: a["reactions-row__ack-icon"], "aria-hidden": !0, children: /* @__PURE__ */ o(i, { size: "16", glyph: /* @__PURE__ */ o(y, {}) }) }),
+          e ? /* @__PURE__ */ o("span", { className: a["reactions-row__ack-count"], children: m }) : /* @__PURE__ */ o("span", { className: a["reactions-row__ack-label"], children: _ })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: a["reactions-row__buttons"], children: [
+      n.map(({ emoji: r, count: j, byCurrentUser: k }) => /* @__PURE__ */ o(
+        x,
+        {
+          emoji: r,
+          count: j,
+          byCurrentUser: k,
+          formatLabel: h,
+          onClick: () => s == null ? void 0 : s(r)
+        },
+        r
+      )),
+      c && /* @__PURE__ */ o(
+        I,
+        {
+          "aria-label": u,
+          className: a["reactions-row__add-reaction"],
+          size: "x-small",
+          onClick: p,
+          icon: /* @__PURE__ */ o(i, { size: "16", glyph: /* @__PURE__ */ o(B, {}) })
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  T as default
+};
+//# sourceMappingURL=ReactionsRow.js.map

package/dist/components/reactions-row/ReactionsRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionsRow.js","sources":["../../../src/components/reactions-row/ReactionsRow.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport ReactionButton from '@/components/reaction-button/ReactionButton';\nimport CheckCircleOutlineIcon from '@mattermost/compass-icons/components/check-circle-outline';\nimport EmoticonPlusOutlineIcon from '@mattermost/compass-icons/components/emoticon-plus-outline';\nimport styles from './ReactionsRow.module.scss';\n\nexport interface ReactionItem {\n  emoji: string;\n  count: number;\n  /** Whether the current user reacted with this emoji. */\n  byCurrentUser?: boolean;\n}\n\nexport interface ReactionsRowProps extends HTMLAttributes<HTMLDivElement> {\n  /** List of reactions to display. */\n  reactions?: ReactionItem[];\n  /** Whether to show the add-reaction button. Default: false. */\n  showAddReaction?: boolean;\n  /** Whether to show the acknowledge button. */\n  acknowledged?: boolean;\n  /** Acknowledge count. */\n  acknowledgeCount?: number;\n  /** Whether the current user has acknowledged. Default: false. */\n  currentUserAcknowledged?: boolean;\n  /** Called when add-reaction is clicked. */\n  onAddReaction?: () => void;\n  /** Called when a Reaction Button is clicked. */\n  onReactionClick?: (emoji: string) => void;\n  /** Called when the acknowledge button is clicked. */\n  onAcknowledge?: () => void;\n  /** Visible acknowledge button text. Default: \"Acknowledge\". */\n  acknowledgeLabel?: ReactNode;\n  /** Accessible name for the acknowledge button. Default: \"Acknowledge message\". */\n  acknowledgeAriaLabel?: string;\n  /** Accessible name for the add-reaction button. Default: \"Add reaction\". */\n  addReactionLabel?: string;\n  /** Accessible name for each reaction button. Default: `{emoji} {count} reaction(s)`. */\n  formatReactionLabel?: (emoji: string, count: number) => string;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_REACTIONS: ReactionItem[] = [\n  { emoji: '👍', count: 1 },\n  { emoji: '😀', count: 4 },\n  { emoji: '🙌', count: 1 },\n];\n\n/**\n * Reactions Row is the strip of Reaction Buttons below a message — the lightest weight way to\n * respond, applaud, or acknowledge without adding to the thread. The component handles the\n * count, the \"this is mine\" highlight, and the add-reaction affordance.\n */\nexport default function ReactionsRow({\n  reactions = DEFAULT_REACTIONS,\n  showAddReaction = false,\n  acknowledged = false,\n  acknowledgeCount = 0,\n  currentUserAcknowledged = false,\n  onAddReaction,\n  onReactionClick,\n  onAcknowledge,\n  acknowledgeLabel = 'Acknowledge',\n  acknowledgeAriaLabel = 'Acknowledge message',\n  addReactionLabel = 'Add reaction',\n  formatReactionLabel,\n  className = '',\n  ...rest\n}: ReactionsRowProps) {\n  const rootClass = [styles['reactions-row'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} {...rest}>\n      {/* Acknowledge button */}\n      {acknowledged && (\n        <button\n          type=\"button\"\n          className={[\n            styles['reactions-row__ack'],\n            currentUserAcknowledged ? styles['reactions-row__ack--active'] : '',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={onAcknowledge}\n          aria-pressed={currentUserAcknowledged}\n          aria-label={acknowledgeAriaLabel}\n        >\n          <span className={styles['reactions-row__ack-icon']} aria-hidden>\n            <Icon size=\"16\" glyph={<CheckCircleOutlineIcon />} />\n          </span>\n          {currentUserAcknowledged ? (\n            <span className={styles['reactions-row__ack-count']}>\n              {acknowledgeCount}\n            </span>\n          ) : (\n            <span className={styles['reactions-row__ack-label']}>\n              {acknowledgeLabel}\n            </span>\n          )}\n        </button>\n      )}\n\n      {/* Reaction buttons */}\n      <div className={styles['reactions-row__buttons']}>\n        {reactions.map(({ emoji, count, byCurrentUser }) => (\n          <ReactionButton\n            key={emoji}\n            emoji={emoji}\n            count={count}\n            byCurrentUser={byCurrentUser}\n            formatLabel={formatReactionLabel}\n            onClick={() => onReactionClick?.(emoji)}\n          />\n        ))}\n\n        {/* Add reaction button */}\n        {showAddReaction && (\n          <IconButton\n            aria-label={addReactionLabel}\n            className={styles['reactions-row__add-reaction']}\n            size=\"x-small\"\n            onClick={onAddReaction}\n            icon={<Icon size=\"16\" glyph={<EmoticonPlusOutlineIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["DEFAULT_REACTIONS","ReactionsRow","reactions","showAddReaction","acknowledged","acknowledgeCount","currentUserAcknowledged","onAddReaction","onReactionClick","onAcknowledge","acknowledgeLabel","acknowledgeAriaLabel","addReactionLabel","formatReactionLabel","className","rest","rootClass","styles","jsxs","jsx","Icon","CheckCircleOutlineIcon","emoji","count","byCurrentUser","ReactionButton","IconButton","EmoticonPlusOutlineIcon"],"mappings":";;;;;;;AA4CA,MAAMA,IAAoC;AAAA,EACxC,EAAE,OAAO,MAAM,OAAO,EAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,EAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,EAAA;AACxB;AAOA,SAAwBC,EAAa;AAAA,EACnC,WAAAC,IAAYF;AAAA,EACZ,iBAAAG,IAAkB;AAAA,EAClB,cAAAC,IAAe;AAAA,EACf,kBAAAC,IAAmB;AAAA,EACnB,yBAAAC,IAA0B;AAAA,EAC1B,eAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,sBAAAC,IAAuB;AAAA,EACvB,kBAAAC,IAAmB;AAAA,EACnB,qBAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAsB;AACpB,QAAMC,IAAY,CAACC,EAAO,eAAe,GAAGH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAI,EAAC,OAAA,EAAI,WAAWF,GAAY,GAAGD,GAE5B,UAAA;AAAA,IAAAX,KACC,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW;AAAA,UACTD,EAAO,oBAAoB;AAAA,UAC3BX,IAA0BW,EAAO,4BAA4B,IAAI;AAAA,QAAA,EAEhE,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QACX,SAASR;AAAA,QACT,gBAAcH;AAAA,QACd,cAAYK;AAAA,QAEZ,UAAA;AAAA,UAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAWF,EAAO,yBAAyB,GAAG,eAAW,IAC7D,UAAA,gBAAAE,EAACC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACE,GAAA,CAAA,CAAuB,GAAI,GACrD;AAAA,UACCf,IACC,gBAAAa,EAAC,QAAA,EAAK,WAAWF,EAAO,0BAA0B,GAC/C,UAAAZ,EAAA,CACH,sBAEC,QAAA,EAAK,WAAWY,EAAO,0BAA0B,GAC/C,UAAAP,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAMN,gBAAAQ,EAAC,OAAA,EAAI,WAAWD,EAAO,wBAAwB,GAC5C,UAAA;AAAA,MAAAf,EAAU,IAAI,CAAC,EAAE,OAAAoB,GAAO,OAAAC,GAAO,eAAAC,QAC9B,gBAAAL;AAAA,QAACM;AAAA,QAAA;AAAA,UAEC,OAAAH;AAAA,UACA,OAAAC;AAAA,UACA,eAAAC;AAAA,UACA,aAAaX;AAAA,UACb,SAAS,MAAML,KAAA,gBAAAA,EAAkBc;AAAA,QAAK;AAAA,QALjCA;AAAA,MAAA,CAOR;AAAA,MAGAnB,KACC,gBAAAgB;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,cAAYd;AAAA,UACZ,WAAWK,EAAO,6BAA6B;AAAA,UAC/C,MAAK;AAAA,UACL,SAASV;AAAA,UACT,wBAAOa,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACQ,KAAwB,EAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAC5D,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/reactions-row/ReactionsRow.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ReactionsRow.css');const _={"reactions-row":"_reactions-row_2mtjp_2","reactions-row__buttons":"_reactions-row__buttons_2mtjp_9","reactions-row__add-reaction":"_reactions-row__add-reaction_2mtjp_16","reactions-row__ack":"_reactions-row__ack_2mtjp_26","reactions-row__ack--active":"_reactions-row__ack--active_2mtjp_47","reactions-row__ack-icon":"_reactions-row__ack-icon_2mtjp_54","reactions-row__ack-count":"_reactions-row__ack-count_2mtjp_58","reactions-row__ack-label":"_reactions-row__ack-label_2mtjp_64"};exports.default=_;
+//# sourceMappingURL=ReactionsRow.module.scss.cjs.map

package/dist/components/reactions-row/ReactionsRow.module.scss.cjs.map

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

package/dist/components/reactions-row/ReactionsRow.module.scss.js

@@ -0,0 +1,14 @@
+import './ReactionsRow.css';const _ = {
+  "reactions-row": "_reactions-row_2mtjp_2",
+  "reactions-row__buttons": "_reactions-row__buttons_2mtjp_9",
+  "reactions-row__add-reaction": "_reactions-row__add-reaction_2mtjp_16",
+  "reactions-row__ack": "_reactions-row__ack_2mtjp_26",
+  "reactions-row__ack--active": "_reactions-row__ack--active_2mtjp_47",
+  "reactions-row__ack-icon": "_reactions-row__ack-icon_2mtjp_54",
+  "reactions-row__ack-count": "_reactions-row__ack-count_2mtjp_58",
+  "reactions-row__ack-label": "_reactions-row__ack-label_2mtjp_64"
+};
+export {
+  _ as default
+};
+//# sourceMappingURL=ReactionsRow.module.scss.js.map

package/dist/components/reactions-row/ReactionsRow.module.scss.js.map

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

package/dist/components/reactions-row/index.cjs

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

package/dist/components/reactions-row/index.cjs.map

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

package/dist/components/reactions-row/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ReactionsRow } from './ReactionsRow';
+export type { ReactionsRowProps, ReactionItem } from './ReactionsRow';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/reactions-row/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/reactions-row/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/reactions-row/index.js

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

package/dist/components/reactions-row/index.js.map

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

package/dist/components/right-sidebar-header/RightSidebarHeader.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__z=require("@mattermost/compass-icons/components/arrow-back-ios.js"),z=__z?.default??__z,__C=require("@mattermost/compass-icons/components/arrow-collapse.js"),C=__C?.default??__C,__k=require("@mattermost/compass-icons/components/arrow-expand.js"),k=__k?.default??__k,__v=require("@mattermost/compass-icons/components/close.js"),v=__v?.default??__v,__w=require("@mattermost/compass-icons/components/dock-window.js"),w=__w?.default??__w,s=require("../icon/Icon.cjs"),r=require("../icon-button/IconButton.cjs"),I=require("../tag/Tag.cjs"),a=require("./RightSidebarHeader.module.scss.cjs");function B({title:j,secondaryTitle:i,tag:l,tagType:x="info",leadingIcon:d,onBack:t,backLabel:_="Back",onExpand:n,expanded:c=!1,expandLabel:b="Expand",collapseLabel:g="Collapse",onPopout:o,popoutLabel:m="Open in new window",onClose:u,closeLabel:p="Close",actionLabel:h,onActionClick:N,actionActive:f=!1,className:q=""}){const y=[a.default["right-sidebar-header"],q].filter(Boolean).join(" ");return e.jsxs("div",{className:y,children:[e.jsxs("div",{className:a.default["right-sidebar-header__left"],children:[e.jsxs("div",{className:a.default["right-sidebar-header__primary"],children:[t&&e.jsx(r.default,{className:a.default["right-sidebar-header__back"],size:"small","aria-label":_,onClick:t,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(z,{})})}),d&&e.jsx("span",{className:a.default["right-sidebar-header__leading-icon"],children:d}),e.jsx("span",{className:a.default["right-sidebar-header__title"],children:j}),l&&e.jsx("span",{className:a.default["right-sidebar-header__tag"],children:e.jsx(I.default,{label:l,type:x,size:"x-small",casing:"all-caps"})})]}),i&&e.jsx("div",{className:a.default["right-sidebar-header__secondary"],children:e.jsx("span",{className:a.default["right-sidebar-header__secondary-text"],children:i})})]}),e.jsxs("div",{className:a.default["right-sidebar-header__actions"],children:[h&&e.jsx("button",{type:"button",className:[a.default["right-sidebar-header__action"],f?a.default["right-sidebar-header__action--active"]:""].filter(Boolean).join(" "),onClick:N,"aria-pressed":f?!0:void 0,children:h}),n&&e.jsx(r.default,{size:"small","aria-label":c?g:b,onClick:n,icon:e.jsx(s.default,{size:"16",glyph:c?e.jsx(C,{}):e.jsx(k,{})})}),o&&e.jsx(r.default,{size:"small","aria-label":m,onClick:o,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(w,{})})}),u&&e.jsx(r.default,{size:"small","aria-label":p,onClick:u,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(v,{})})})]})]})}exports.default=B;
+//# sourceMappingURL=RightSidebarHeader.cjs.map

package/dist/components/right-sidebar-header/RightSidebarHeader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightSidebarHeader.cjs","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowCollapseIcon from '@mattermost/compass-icons/components/arrow-collapse';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport DockWindowIcon from '@mattermost/compass-icons/components/dock-window';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n  /** Primary title text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: ReactNode;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: ReactNode;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"20\" />` to align with the title text. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Back\". */\n  backLabel?: string;\n  /** When set, shows an expand/collapse button and calls this on click. */\n  onExpand?: () => void;\n  /** When true, the expand button shows the collapse icon. Requires `onExpand`. */\n  expanded?: boolean;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse\". */\n  collapseLabel?: string;\n  /** When set, shows a pop out button (open in a new window) between expand and close, and calls this on click. */\n  onPopout?: () => void;\n  /** Accessible name for the pop out button. Default: \"Open in new window\". */\n  popoutLabel?: string;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Optional inline action label (e.g. \"Follow\"). Accepts translated nodes. */\n  actionLabel?: ReactNode;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  backLabel = 'Back',\n  onExpand,\n  expanded = false,\n  expandLabel = 'Expand',\n  collapseLabel = 'Collapse',\n  onPopout,\n  popoutLabel = 'Open in new window',\n  onClose,\n  closeLabel = 'Close',\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  className = '',\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label={backLabel}\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            <span className={styles['right-sidebar-header__secondary-text']}>\n              {secondaryTitle}\n            </span>\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label={expanded ? collapseLabel : expandLabel}\n            onClick={onExpand}\n            icon={\n              <Icon\n                size=\"16\"\n                glyph={expanded ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n              />\n            }\n          />\n        )}\n        {onPopout && (\n          <IconButton\n            size=\"small\"\n            aria-label={popoutLabel}\n            onClick={onPopout}\n            icon={<Icon size=\"16\" glyph={<DockWindowIcon />} />}\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label={closeLabel}\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","backLabel","onExpand","expanded","expandLabel","collapseLabel","onPopout","popoutLabel","onClose","closeLabel","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowCollapseIcon","ArrowExpandIcon","DockWindowIcon","CloseIcon"],"mappings":"8lBAoDA,SAAwBA,EAAmB,CACzC,MAAAC,EACA,eAAAC,EACA,IAAAC,EACA,QAAAC,EAAU,OACV,YAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,OACZ,SAAAC,EACA,SAAAC,EAAW,GACX,YAAAC,EAAc,SACd,cAAAC,EAAgB,WAChB,SAAAC,EACA,YAAAC,EAAc,qBACd,QAAAC,EACA,WAAAC,EAAa,QACb,YAAAC,EACA,cAAAC,EACA,aAAAC,EAAe,GACf,UAAAC,EAAY,EACd,EAA4B,CAC1B,MAAMC,EAAY,CAACC,UAAO,sBAAsB,EAAGF,CAAS,EACzD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEG,EAAAA,KAAC,MAAA,CAAI,UAAWF,EACd,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,4BAA4B,EACjD,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAf,GACCiB,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWH,EAAAA,QAAO,4BAA4B,EAC9C,KAAK,QACL,aAAYd,EACZ,QAASD,EACT,WAAOmB,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACG,IAAiB,CAAA,CAAI,CAAA,CAAA,EAGtDrB,GACCkB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,oCAAoC,EACzD,SAAAhB,EACH,QAED,OAAA,CAAK,UAAWgB,EAAAA,QAAO,6BAA6B,EAAI,SAAApB,EAAM,EAC9DE,GACCoB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,2BAA2B,EACjD,SAAAE,EAAAA,IAACI,EAAAA,QAAA,CACC,MAAOxB,EACP,KAAMC,EACN,KAAK,UACL,OAAO,UAAA,CAAA,CACT,CACF,CAAA,EAEJ,EACCF,GACCqB,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,iCAAiC,EACtD,SAAAE,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,sCAAsC,EAC3D,WACH,CAAA,CACF,CAAA,EAEJ,EAEAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAL,GACCO,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAW,CACTF,EAAAA,QAAO,8BAA8B,EACrCH,EACIG,EAAAA,QAAO,sCAAsC,EAC7C,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASJ,EACT,eAAcC,EAAe,GAAO,OAEnC,SAAAF,CAAA,CAAA,EAGJR,GACCe,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYf,EAAWE,EAAgBD,EACvC,QAASF,EACT,KACEe,EAAAA,IAACE,EAAAA,QAAA,CACC,KAAK,KACL,MAAOhB,EAAWc,MAACK,EAAA,CAAA,CAAkB,QAAMC,EAAA,CAAA,CAAgB,CAAA,CAAA,CAC7D,CAAA,EAILjB,GACCW,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYX,EACZ,QAASD,EACT,WAAOa,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACO,IAAe,CAAA,CAAI,CAAA,CAAA,EAGpDhB,GACCS,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYT,EACZ,QAASD,EACT,WAAOW,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACQ,IAAU,CAAA,CAAI,CAAA,CAAA,CAC9C,CAAA,CAEJ,CAAA,EACF,CAEJ"}

package/dist/components/right-sidebar-header/RightSidebarHeader.css

@@ -0,0 +1 @@
+._right-sidebar-header_11chd_2{display:flex;align-items:center;gap:var(--spacing-l);height:56px;padding:var(--spacing-m);background-color:var(--center-channel-bg);border-bottom:1px solid rgba(var(--center-channel-color-rgb),.12);box-sizing:border-box}._right-sidebar-header__left_11chd_12{display:flex;flex:1 1 0;min-width:0;align-items:center}._right-sidebar-header__primary_11chd_18{display:flex;align-items:center;gap:var(--spacing-xxs);padding:0 var(--spacing-xs);min-width:0}._right-sidebar-header__back_11chd_25{margin-left:-12px}._right-sidebar-header__leading-icon_11chd_28{display:inline-flex;align-items:center;flex-shrink:0}._right-sidebar-header__tag_11chd_33{display:inline-flex;align-items:center}._right-sidebar-header__title_11chd_37{font-family:var(--font-family-heading);font-size:var(--font-size-200);font-weight:var(--font-weight-semibold);line-height:var(--line-height-200);color:var(--center-channel-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._right-sidebar-header__secondary_11chd_47{display:flex;flex:1 1 0;min-width:0;align-items:center;padding:0 var(--spacing-xs);border-left:1px solid rgba(var(--center-channel-color-rgb),.16)}._right-sidebar-header__secondary-text_11chd_55{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-200);color:rgba(var(--center-channel-color-rgb),.56);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._right-sidebar-header__actions_11chd_65{display:flex;align-items:center;gap:var(--spacing-xxxs);flex-shrink:0}._right-sidebar-header__action_11chd_65{display:inline-flex;align-items:center;justify-content:center;height:24px;padding:var(--spacing-xxxxs) var(--spacing-s);border:none;border-radius:var(--radius-s);background-color:transparent;font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.64);cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._right-sidebar-header__action_11chd_65:hover{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.75)}._right-sidebar-header__action_11chd_65:active{background-color:rgba(var(--center-channel-color-rgb),.12)}._right-sidebar-header__action_11chd_65:focus-visible{outline:none;box-shadow:0 0 0 2px var(--button-bg)}._right-sidebar-header__action--active_11chd_99{background-color:rgba(var(--center-channel-color-rgb),.08);color:var(--center-channel-color)}