@mattermost/compass-ui 0.1.0-alpha.1 → 0.1.0-alpha.11

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 i="_radio_difs7_2",_="_radio__input_difs7_13",d="_radio__circle_difs7_33",o="_radio__dot_difs7_59",a="_radio__label_difs7_116",r={radio:i,radio__input:_,radio__circle:d,radio__dot:o,"radio--invalid":"_radio--invalid_difs7_80",radio__label:a,"radio--size-small":"_radio--size-small_difs7_119","radio--size-medium":"_radio--size-medium_difs7_138","radio--size-large":"_radio--size-large_difs7_157"};exports.default=r;exports.radio=i;exports.radio__circle=d;exports.radio__dot=o;exports.radio__input=_;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_difs7_2", i = "_radio__input_difs7_13", d = "_radio__circle_difs7_33", a = "_radio__dot_difs7_59", o = "_radio__label_difs7_116", r = {
+  radio: _,
+  radio__input: i,
+  radio__circle: d,
+  radio__dot: a,
+  "radio--invalid": "_radio--invalid_difs7_80",
+  radio__label: o,
+  "radio--size-small": "_radio--size-small_difs7_119",
+  "radio--size-medium": "_radio--size-medium_difs7_138",
+  "radio--size-large": "_radio--size-large_difs7_157"
+};
+export {
+  r as default,
+  _ as radio,
+  d 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"),n=require("react"),t=require("./ReactionButton.module.scss.cjs");function b({emoji:a,count:e,byCurrentUser:i=!1,className:l="",onClick:d,...f}){const o=n.useRef(e),u=n.useRef(void 0),[s,c]=n.useState(null);n.useEffect(()=>(e!==o.current&&(clearTimeout(u.current),c(e>o.current?"up":"down"),o.current=e,u.current=setTimeout(()=>c(null),300)),()=>clearTimeout(u.current)),[e]);const m=[t.default["reaction-button"],i?t.default["reaction-button--mine"]:"",l].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:m,onClick:d,"aria-label":`${a} ${e} reaction${e!==1?"s":""}`,"aria-pressed":i,...f,children:[r.jsx("span",{className:t.default["reaction-button__emoji"],"aria-hidden":!0,children:a}),r.jsx("span",{className:_,children:e})]})}exports.default=b;
+//# 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}\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  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={`${emoji} ${count} reaction${count !== 1 ? 's' : ''}`}\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":["ReactionButton","emoji","count","byCurrentUser","className","onClick","rest","prevCountRef","useRef","timerRef","countAnim","setCountAnim","useState","useEffect","rootClass","styles","countClass","jsxs","jsx"],"mappings":"kNAmBA,SAAwBA,EAAe,CACrC,MAAAC,EACA,MAAAC,EACA,cAAAC,EAAgB,GAChB,UAAAC,EAAY,GACZ,QAAAC,EACA,GAAGC,CACL,EAAwB,CACtB,MAAMC,EAAeC,EAAAA,OAAON,CAAK,EAC3BO,EAAWD,EAAAA,OAAsC,MAAS,EAC1D,CAACE,EAAWC,CAAY,EAAIC,EAAAA,SAA+B,IAAI,EAErEC,EAAAA,UAAU,KACJX,IAAUK,EAAa,UACzB,aAAaE,EAAS,OAAO,EAC7BE,EAAaT,EAAQK,EAAa,QAAU,KAAO,MAAM,EACzDA,EAAa,QAAUL,EACvBO,EAAS,QAAU,WAAW,IAAME,EAAa,IAAI,EAAG,GAAG,GAEtD,IAAM,aAAaF,EAAS,OAAO,GACzC,CAACP,CAAK,CAAC,EAEV,MAAMY,EAAY,CAChBC,EAAAA,QAAO,iBAAiB,EACxBZ,EAAgBY,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,aAAY,GAAGJ,CAAK,IAAIC,CAAK,YAAYA,IAAU,EAAI,IAAM,EAAE,GAC/D,eAAcC,EACb,GAAGG,EAEJ,SAAA,CAAAY,EAAAA,IAAC,QAAK,UAAWH,UAAO,wBAAwB,EAAG,cAAW,GAC3D,SAAAd,EACH,EACAiB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAa,SAAAd,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,17 @@
+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;
+}
+/**
+ * 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, 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;CACzB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,SAAc,EACd,OAAO,EACP,GAAG,IAAI,EACR,EAAE,mBAAmB,2CA8CrB"}

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

@@ -0,0 +1,42 @@
+import { jsxs as b, jsx as u } from "react/jsx-runtime";
+import { useRef as c, useState as _, useEffect as h } from "react";
+import e from "./ReactionButton.module.scss.js";
+function x({
+  emoji: r,
+  count: t,
+  byCurrentUser: a = !1,
+  className: l = "",
+  onClick: m,
+  ...f
+}) {
+  const n = c(t), o = c(void 0), [i, s] = _(null);
+  h(() => (t !== n.current && (clearTimeout(o.current), s(t > n.current ? "up" : "down"), n.current = t, o.current = setTimeout(() => s(null), 300)), () => clearTimeout(o.current)), [t]);
+  const p = [
+    e["reaction-button"],
+    a ? e["reaction-button--mine"] : "",
+    l
+  ].filter(Boolean).join(" "), d = [
+    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__ */ b(
+    "button",
+    {
+      type: "button",
+      className: p,
+      onClick: m,
+      "aria-label": `${r} ${t} reaction${t !== 1 ? "s" : ""}`,
+      "aria-pressed": a,
+      ...f,
+      children: [
+        /* @__PURE__ */ u("span", { className: e["reaction-button__emoji"], "aria-hidden": !0, children: r }),
+        /* @__PURE__ */ u("span", { className: d, children: t })
+      ]
+    }
+  );
+}
+export {
+  x 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}\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  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={`${emoji} ${count} reaction${count !== 1 ? 's' : ''}`}\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":["ReactionButton","emoji","count","byCurrentUser","className","onClick","rest","prevCountRef","useRef","timerRef","countAnim","setCountAnim","useState","useEffect","rootClass","styles","countClass","jsxs","jsx"],"mappings":";;;AAmBA,SAAwBA,EAAe;AAAA,EACrC,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,GAAGC;AACL,GAAwB;AACtB,QAAMC,IAAeC,EAAON,CAAK,GAC3BO,IAAWD,EAAsC,MAAS,GAC1D,CAACE,GAAWC,CAAY,IAAIC,EAA+B,IAAI;AAErE,EAAAC,EAAU,OACJX,MAAUK,EAAa,YACzB,aAAaE,EAAS,OAAO,GAC7BE,EAAaT,IAAQK,EAAa,UAAU,OAAO,MAAM,GACzDA,EAAa,UAAUL,GACvBO,EAAS,UAAU,WAAW,MAAME,EAAa,IAAI,GAAG,GAAG,IAEtD,MAAM,aAAaF,EAAS,OAAO,IACzC,CAACP,CAAK,CAAC;AAEV,QAAMY,IAAY;AAAA,IAChBC,EAAO,iBAAiB;AAAA,IACxBZ,IAAgBY,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,cAAY,GAAGJ,CAAK,IAAIC,CAAK,YAAYA,MAAU,IAAI,MAAM,EAAE;AAAA,MAC/D,gBAAcC;AAAA,MACb,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAY,EAAC,UAAK,WAAWH,EAAO,wBAAwB,GAAG,eAAW,IAC3D,UAAAd,GACH;AAAA,QACA,gBAAAiB,EAAC,QAAA,EAAK,WAAWF,GAAa,UAAAd,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"),h=require("../icon-button/IconButton.cjs"),l=require("../icon/Icon.cjs"),w=require("../reaction-button/ReactionButton.cjs"),__p=require("@mattermost/compass-icons/components/check-circle-outline.js"),p=__p?.default??__p,__b=require("@mattermost/compass-icons/components/emoticon-plus-outline.js"),b=__b?.default??__b,a=require("./ReactionsRow.module.scss.cjs"),N=[{emoji:"👍",count:1},{emoji:"😀",count:4},{emoji:"🙌",count:1}];function q({reactions:n=N,showAddReaction:c=!1,acknowledged:i=!1,acknowledgeCount:r=0,currentUserAcknowledged:s=!1,onAddReaction:u,onReactionClick:t,onAcknowledge:d,className:f="",..._}){const j=[a.default["reactions-row"],f].filter(Boolean).join(" ");return e.jsxs("div",{className:j,..._,children:[i&&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":"Acknowledge message",children:[e.jsx("span",{className:a.default["reactions-row__ack-icon"],"aria-hidden":!0,children:e.jsx(l.default,{size:"16",glyph:e.jsx(p,{})})}),s?e.jsx("span",{className:a.default["reactions-row__ack-count"],children:r}):e.jsx("span",{className:a.default["reactions-row__ack-label"],children:"Acknowledge"})]}),e.jsxs("div",{className:a.default["reactions-row__buttons"],children:[n.map(({emoji:o,count:m,byCurrentUser:x})=>e.jsx(w.default,{emoji:o,count:m,byCurrentUser:x,onClick:()=>t==null?void 0:t(o)},o)),c&&e.jsx(h.default,{"aria-label":"Add reaction",className:a.default["reactions-row__add-reaction"],size:"x-small",onClick:u,icon:e.jsx(l.default,{size:"16",glyph:e.jsx(b,{})})})]})]})}exports.default=q;
+//# 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 } 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  /** 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  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=\"Acknowledge message\"\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              Acknowledge\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            onClick={() => onReactionClick?.(emoji)}\n          />\n        ))}\n\n        {/* Add reaction button */}\n        {showAddReaction && (\n          <IconButton\n            aria-label=\"Add reaction\"\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","className","rest","rootClass","styles","jsxs","jsx","Icon","CheckCircleOutlineIcon","emoji","count","byCurrentUser","ReactionButton","IconButton","EmoticonPlusOutlineIcon"],"mappings":"scAoCMA,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,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,CAAAP,GACCU,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,UAAW,CACTD,EAAAA,QAAO,oBAAoB,EAC3BP,EAA0BO,EAAAA,QAAO,4BAA4B,EAAI,EAAA,EAEhE,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASJ,EACT,eAAcH,EACd,aAAW,sBAEX,SAAA,CAAAS,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,EACCX,EACCS,EAAAA,IAAC,OAAA,CAAK,UAAWF,UAAO,0BAA0B,EAC/C,SAAAR,CAAA,CACH,QAEC,OAAA,CAAK,UAAWQ,EAAAA,QAAO,0BAA0B,EAAG,SAAA,aAAA,CAErD,CAAA,CAAA,CAAA,EAMNC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,wBAAwB,EAC5C,SAAA,CAAAX,EAAU,IAAI,CAAC,CAAE,MAAAgB,EAAO,MAAAC,EAAO,cAAAC,KAC9BL,EAAAA,IAACM,EAAAA,QAAA,CAEC,MAAAH,EACA,MAAAC,EACA,cAAAC,EACA,QAAS,IAAMZ,GAAA,YAAAA,EAAkBU,EAAK,EAJjCA,CAAA,CAMR,EAGAf,GACCY,EAAAA,IAACO,EAAAA,QAAA,CACC,aAAW,eACX,UAAWT,EAAAA,QAAO,6BAA6B,EAC/C,KAAK,UACL,QAASN,EACT,WAAOS,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,34 @@
+import { HTMLAttributes } 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;
+    /** 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, 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,MAAM,OAAO,CAAC;AAQ5C,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,+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,SAAc,EACd,GAAG,IAAI,EACR,EAAE,iBAAiB,2CA6DnB"}

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

@@ -0,0 +1,71 @@
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import N from "../icon-button/IconButton.js";
+import t from "../icon/Icon.js";
+import b from "../reaction-button/ReactionButton.js";
+import __j from "@mattermost/compass-icons/components/check-circle-outline.js";const j=__j&&__j.default?__j.default:__j;
+import __k from "@mattermost/compass-icons/components/emoticon-plus-outline.js";const k=__k&&__k.default?__k.default:__k;
+import a from "./ReactionsRow.module.scss.js";
+const I = [
+  { emoji: "👍", count: 1 },
+  { emoji: "😀", count: 4 },
+  { emoji: "🙌", count: 1 }
+];
+function C({
+  reactions: n = I,
+  showAddReaction: c = !1,
+  acknowledged: l = !1,
+  acknowledgeCount: m = 0,
+  currentUserAcknowledged: e = !1,
+  onAddReaction: p,
+  onReactionClick: s,
+  onAcknowledge: _,
+  className: d = "",
+  ...f
+}) {
+  const u = [a["reactions-row"], d].filter(Boolean).join(" ");
+  return /* @__PURE__ */ i("div", { className: u, ...f, children: [
+    l && /* @__PURE__ */ i(
+      "button",
+      {
+        type: "button",
+        className: [
+          a["reactions-row__ack"],
+          e ? a["reactions-row__ack--active"] : ""
+        ].filter(Boolean).join(" "),
+        onClick: _,
+        "aria-pressed": e,
+        "aria-label": "Acknowledge message",
+        children: [
+          /* @__PURE__ */ o("span", { className: a["reactions-row__ack-icon"], "aria-hidden": !0, children: /* @__PURE__ */ o(t, { size: "16", glyph: /* @__PURE__ */ o(j, {}) }) }),
+          e ? /* @__PURE__ */ o("span", { className: a["reactions-row__ack-count"], children: m }) : /* @__PURE__ */ o("span", { className: a["reactions-row__ack-label"], children: "Acknowledge" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ i("div", { className: a["reactions-row__buttons"], children: [
+      n.map(({ emoji: r, count: h, byCurrentUser: w }) => /* @__PURE__ */ o(
+        b,
+        {
+          emoji: r,
+          count: h,
+          byCurrentUser: w,
+          onClick: () => s == null ? void 0 : s(r)
+        },
+        r
+      )),
+      c && /* @__PURE__ */ o(
+        N,
+        {
+          "aria-label": "Add reaction",
+          className: a["reactions-row__add-reaction"],
+          size: "x-small",
+          onClick: p,
+          icon: /* @__PURE__ */ o(t, { size: "16", glyph: /* @__PURE__ */ o(k, {}) })
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  C 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 } 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  /** 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  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=\"Acknowledge message\"\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              Acknowledge\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            onClick={() => onReactionClick?.(emoji)}\n          />\n        ))}\n\n        {/* Add reaction button */}\n        {showAddReaction && (\n          <IconButton\n            aria-label=\"Add reaction\"\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","className","rest","rootClass","styles","jsxs","jsx","Icon","CheckCircleOutlineIcon","emoji","count","byCurrentUser","ReactionButton","IconButton","EmoticonPlusOutlineIcon"],"mappings":";;;;;;;AAoCA,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,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,IAAAP,KACC,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW;AAAA,UACTD,EAAO,oBAAoB;AAAA,UAC3BP,IAA0BO,EAAO,4BAA4B,IAAI;AAAA,QAAA,EAEhE,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QACX,SAASJ;AAAA,QACT,gBAAcH;AAAA,QACd,cAAW;AAAA,QAEX,UAAA;AAAA,UAAA,gBAAAS,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,UACCX,IACC,gBAAAS,EAAC,QAAA,EAAK,WAAWF,EAAO,0BAA0B,GAC/C,UAAAR,EAAA,CACH,sBAEC,QAAA,EAAK,WAAWQ,EAAO,0BAA0B,GAAG,UAAA,cAAA,CAErD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAMN,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,wBAAwB,GAC5C,UAAA;AAAA,MAAAX,EAAU,IAAI,CAAC,EAAE,OAAAgB,GAAO,OAAAC,GAAO,eAAAC,QAC9B,gBAAAL;AAAA,QAACM;AAAA,QAAA;AAAA,UAEC,OAAAH;AAAA,UACA,OAAAC;AAAA,UACA,eAAAC;AAAA,UACA,SAAS,MAAMZ,KAAA,gBAAAA,EAAkBU;AAAA,QAAK;AAAA,QAJjCA;AAAA,MAAA,CAMR;AAAA,MAGAf,KACC,gBAAAY;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,cAAW;AAAA,UACX,WAAWT,EAAO,6BAA6B;AAAA,UAC/C,MAAK;AAAA,UACL,SAASN;AAAA,UACT,wBAAOS,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"),__g=require("@mattermost/compass-icons/components/arrow-back-ios.js"),g=__g?.default??__g,__m=require("@mattermost/compass-icons/components/arrow-collapse.js"),m=__m?.default??__m,__p=require("@mattermost/compass-icons/components/arrow-expand.js"),p=__p?.default??__p,__N=require("@mattermost/compass-icons/components/close.js"),N=__N?.default??__N,s=require("../icon/Icon.cjs"),r=require("../icon-button/IconButton.cjs"),q=require("../tag/Tag.cjs"),a=require("./RightSidebarHeader.module.scss.cjs");function v({title:f,secondaryTitle:i,tag:l,tagType:j="info",leadingIcon:t,onBack:d,onExpand:c,expanded:n=!1,onClose:o,actionLabel:u,onActionClick:_,actionActive:h=!1,className:x=""}){const b=[a.default["right-sidebar-header"],x].filter(Boolean).join(" ");return e.jsxs("div",{className:b,children:[e.jsxs("div",{className:a.default["right-sidebar-header__left"],children:[e.jsxs("div",{className:a.default["right-sidebar-header__primary"],children:[d&&e.jsx(r.default,{className:a.default["right-sidebar-header__back"],size:"small","aria-label":"Back",onClick:d,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(g,{})})}),t&&e.jsx("span",{className:a.default["right-sidebar-header__leading-icon"],children:t}),e.jsx("span",{className:a.default["right-sidebar-header__title"],children:f}),l&&e.jsx("span",{className:a.default["right-sidebar-header__tag"],children:e.jsx(q.default,{label:l,type:j,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:[u&&e.jsx("button",{type:"button",className:[a.default["right-sidebar-header__action"],h?a.default["right-sidebar-header__action--active"]:""].filter(Boolean).join(" "),onClick:_,"aria-pressed":h?!0:void 0,children:u}),c&&e.jsx(r.default,{size:"small","aria-label":n?"Collapse":"Expand",onClick:c,icon:e.jsx(s.default,{size:"16",glyph:n?e.jsx(m,{}):e.jsx(p,{})})}),o&&e.jsx(r.default,{size:"small","aria-label":"Close",onClick:o,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(N,{})})})]})]})}exports.default=v;
+//# 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 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. */\n  title: string;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: string;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: string;\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  /** 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  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Optional inline action label (e.g. \"Follow\"). */\n  actionLabel?: string;\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  onExpand,\n  expanded = false,\n  onClose,\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=\"Back\"\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 ? 'Collapse' : 'Expand'}\n            onClick={onExpand}\n            icon={\n              <Icon\n                size=\"16\"\n                glyph={expanded ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n              />\n            }\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label=\"Close\"\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","onExpand","expanded","onClose","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowCollapseIcon","ArrowExpandIcon","CloseIcon"],"mappings":"giBAuCA,SAAwBA,EAAmB,CACzC,MAAAC,EACA,eAAAC,EACA,IAAAC,EACA,QAAAC,EAAU,OACV,YAAAC,EACA,OAAAC,EACA,SAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EACA,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,CAAAT,GACCW,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWH,EAAAA,QAAO,4BAA4B,EAC9C,KAAK,QACL,aAAW,OACX,QAAST,EACT,WAAOa,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACG,IAAiB,CAAA,CAAI,CAAA,CAAA,EAGtDf,GACCY,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,oCAAoC,EACzD,SAAAV,EACH,QAED,OAAA,CAAK,UAAWU,EAAAA,QAAO,6BAA6B,EAAI,SAAAd,EAAM,EAC9DE,GACCc,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,2BAA2B,EACjD,SAAAE,EAAAA,IAACI,EAAAA,QAAA,CACC,MAAOlB,EACP,KAAMC,EACN,KAAK,UACL,OAAO,UAAA,CAAA,CACT,CACF,CAAA,EAEJ,EACCF,GACCe,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,EAGJH,GACCU,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYV,EAAW,WAAa,SACpC,QAASD,EACT,KACEU,EAAAA,IAACE,EAAAA,QAAA,CACC,KAAK,KACL,MAAOX,EAAWS,MAACK,EAAA,CAAA,CAAkB,QAAMC,EAAA,CAAA,CAAgB,CAAA,CAAA,CAC7D,CAAA,EAILd,GACCQ,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAW,QACX,QAAST,EACT,WAAOU,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACO,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)}

package/dist/components/right-sidebar-header/RightSidebarHeader.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { TagType } from '../tag/Tag';
+export interface RightSidebarHeaderProps {
+    /** Primary title text. */
+    title: string;
+    /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */
+    secondaryTitle?: string;
+    /** Optional tag rendered next to the title (e.g. "BETA"). */
+    tag?: string;
+    /** Tag visual style. Default: Info. */
+    tagType?: TagType;
+    /** 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. */
+    leadingIcon?: ReactNode;
+    /** When set, shows a back button and calls this on click. */
+    onBack?: () => void;
+    /** When set, shows an expand/collapse button and calls this on click. */
+    onExpand?: () => void;
+    /** When true, the expand button shows the collapse icon. Requires `onExpand`. */
+    expanded?: boolean;
+    /** When set, shows a close button and calls this on click. */
+    onClose?: () => void;
+    /** Optional inline action label (e.g. "Follow"). */
+    actionLabel?: string;
+    /** Click handler for the action label. */
+    onActionClick?: () => void;
+    /** When true, the action button shows in its active state. */
+    actionActive?: boolean;
+    className?: string;
+}
+export default function RightSidebarHeader({ title, secondaryTitle, tag, tagType, leadingIcon, onBack, onExpand, expanded, onClose, actionLabel, onActionClick, actionActive, className, }: RightSidebarHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RightSidebarHeader.d.ts.map

package/dist/components/right-sidebar-header/RightSidebarHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightSidebarHeader.d.ts","sourceRoot":"","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAGpD,MAAM,WAAW,uBAAuB;IACtC,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,2FAA2F;IAC3F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+LAA+L;IAC/L,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,cAAc,EACd,GAAG,EACH,OAAgB,EAChB,WAAW,EACX,MAAM,EACN,QAAQ,EACR,QAAgB,EAChB,OAAO,EACP,WAAW,EACX,aAAa,EACb,YAAoB,EACpB,SAAc,GACf,EAAE,uBAAuB,2CAsFzB"}