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

package/dist/components/profile-popover/ProfilePopover.module.scss.js

@@ -0,0 +1,39 @@
+import './ProfilePopover.css';const o = {
+  "profile-popover": "_profile-popover_1k0p0_22",
+  "profile-popover--closing": "_profile-popover--closing_1k0p0_34",
+  "profile-popover__role-tag": "_profile-popover__role-tag_1k0p0_37",
+  "profile-popover__close": "_profile-popover__close_1k0p0_41",
+  "profile-popover__primary": "_profile-popover__primary_1k0p0_46",
+  "profile-popover__last-online": "_profile-popover__last-online_1k0p0_54",
+  "profile-popover__names": "_profile-popover__names_1k0p0_61",
+  "profile-popover__name": "_profile-popover__name_1k0p0_61",
+  "profile-popover__handle": "_profile-popover__handle_1k0p0_77",
+  "profile-popover__title": "_profile-popover__title_1k0p0_77",
+  "profile-popover__secondary": "_profile-popover__secondary_1k0p0_82",
+  "profile-popover__titles": "_profile-popover__titles_1k0p0_89",
+  "profile-popover__meta-item": "_profile-popover__meta-item_1k0p0_94",
+  "profile-popover__meta-item--stacked": "_profile-popover__meta-item--stacked_1k0p0_100",
+  "profile-popover__meta-icon": "_profile-popover__meta-icon_1k0p0_103",
+  "profile-popover__phone-body": "_profile-popover__phone-body_1k0p0_108",
+  "profile-popover__meta-link": "_profile-popover__meta-link_1k0p0_115",
+  "profile-popover__phone-sub": "_profile-popover__phone-sub_1k0p0_119",
+  "profile-popover__meta-text": "_profile-popover__meta-text_1k0p0_124",
+  "profile-popover__section-label": "_profile-popover__section-label_1k0p0_149",
+  "profile-popover__local-time": "_profile-popover__local-time_1k0p0_156",
+  "profile-popover__custom-status": "_profile-popover__custom-status_1k0p0_156",
+  "profile-popover__time": "_profile-popover__time_1k0p0_162",
+  "profile-popover__status-row": "_profile-popover__status-row_1k0p0_168",
+  "profile-popover__status-emoji": "_profile-popover__status-emoji_1k0p0_175",
+  "profile-popover__footer": "_profile-popover__footer_1k0p0_184",
+  "profile-popover__footer--others": "_profile-popover__footer--others_1k0p0_188",
+  "profile-popover__footer--you": "_profile-popover__footer--you_1k0p0_192",
+  "profile-popover__primary-action": "_profile-popover__primary-action_1k0p0_196",
+  "profile-popover__primary-action--others": "_profile-popover__primary-action--others_1k0p0_199",
+  "profile-popover__primary-action--you": "_profile-popover__primary-action--you_1k0p0_203",
+  "profile-popover__primary-button": "_profile-popover__primary-button_1k0p0_207",
+  "profile-popover__secondary-actions": "_profile-popover__secondary-actions_1k0p0_210"
+};
+export {
+  o as default
+};
+//# sourceMappingURL=ProfilePopover.module.scss.js.map

package/dist/components/profile-popover/ProfilePopover.module.scss.js.map

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

package/dist/components/profile-popover/index.cjs

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

package/dist/components/profile-popover/index.cjs.map

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

package/dist/components/profile-popover/index.d.ts.map

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

package/dist/components/profile-popover/index.js

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

package/dist/components/profile-popover/index.js.map

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

package/dist/components/progress-bar/ProgressBar.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),e=require("./ProgressBar.module.scss.cjs");function f(r){return r>=90?e.default["progress-bar__fill--danger"]:r>=70?e.default["progress-bar__fill--warning"]:e.default["progress-bar__fill--success"]}function d({value:r=0,size:s="large",semanticColors:i=!1,"aria-label":o="Progress",className:t=""}){const a=Math.min(100,Math.max(0,r)),u=s==="small"?e.default["progress-bar--size-small"]:e.default["progress-bar--size-large"],n=i?f(a):e.default["progress-bar__fill--default"];return l.jsx("div",{role:"progressbar","aria-valuenow":a,"aria-valuemin":0,"aria-valuemax":100,"aria-label":o,className:[e.default["progress-bar"],u,t].filter(Boolean).join(" "),children:l.jsx("div",{className:[e.default["progress-bar__fill"],n].filter(Boolean).join(" "),style:{width:`${a}%`}})})}exports.default=d;
+//# sourceMappingURL=ProgressBar.cjs.map

package/dist/components/progress-bar/ProgressBar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.cjs","sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import styles from './ProgressBar.module.scss';\n\nexport type ProgressBarSize = 'small' | 'large';\n\nexport interface ProgressBarProps {\n  /** Progress value 0–100. Default: 0. */\n  value?: number;\n  /** Size variant. Default: Large. */\n  size?: ProgressBarSize;\n  /**\n   * When true, fill color shifts from green→yellow→red based on percentage.\n   * When false, uses the default brand blue. Default: false.\n   */\n  semanticColors?: boolean;\n  /** Accessible label for the progress bar. */\n  'aria-label'?: string;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nfunction getSemanticColorClass(value: number): string {\n  if (value >= 90) return styles['progress-bar__fill--danger'];\n  if (value >= 70) return styles['progress-bar__fill--warning'];\n  return styles['progress-bar__fill--success'];\n}\n\n/**\n * Progress Bar shows determinate progress through a wait state — an upload finishing, a\n * quota filling, an import running. Use it when the duration or total is known; reach for\n * [Spinner](/components/spinner) when it isn't.\n */\nexport default function ProgressBar({\n  value = 0,\n  size = 'large',\n  semanticColors = false,\n  'aria-label': ariaLabel = 'Progress',\n  className = '',\n}: ProgressBarProps) {\n  const clampedValue = Math.min(100, Math.max(0, value));\n  const sizeClass =\n    size === 'small'\n      ? styles['progress-bar--size-small']\n      : styles['progress-bar--size-large'];\n\n  const fillColorClass = semanticColors\n    ? getSemanticColorClass(clampedValue)\n    : styles['progress-bar__fill--default'];\n\n  return (\n    <div\n      role=\"progressbar\"\n      aria-valuenow={clampedValue}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-label={ariaLabel}\n      className={[styles['progress-bar'], sizeClass, className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div\n        className={[styles['progress-bar__fill'], fillColorClass]\n          .filter(Boolean)\n          .join(' ')}\n        style={{ width: `${clampedValue}%` }}\n      />\n    </div>\n  );\n}\n"],"names":["getSemanticColorClass","value","styles","ProgressBar","size","semanticColors","ariaLabel","className","clampedValue","sizeClass","fillColorClass","jsx"],"mappings":"4LAoBA,SAASA,EAAsBC,EAAuB,CACpD,OAAIA,GAAS,GAAWC,EAAAA,QAAO,4BAA4B,EACvDD,GAAS,GAAWC,EAAAA,QAAO,6BAA6B,EACrDA,EAAAA,QAAO,6BAA6B,CAC7C,CAOA,SAAwBC,EAAY,CAClC,MAAAF,EAAQ,EACR,KAAAG,EAAO,QACP,eAAAC,EAAiB,GACjB,aAAcC,EAAY,WAC1B,UAAAC,EAAY,EACd,EAAqB,CACnB,MAAMC,EAAe,KAAK,IAAI,IAAK,KAAK,IAAI,EAAGP,CAAK,CAAC,EAC/CQ,EACJL,IAAS,QACLF,EAAAA,QAAO,0BAA0B,EACjCA,EAAAA,QAAO,0BAA0B,EAEjCQ,EAAiBL,EACnBL,EAAsBQ,CAAY,EAClCN,EAAAA,QAAO,6BAA6B,EAExC,OACES,EAAAA,IAAC,MAAA,CACC,KAAK,cACL,gBAAeH,EACf,gBAAe,EACf,gBAAe,IACf,aAAYF,EACZ,UAAW,CAACJ,EAAAA,QAAO,cAAc,EAAGO,EAAWF,CAAS,EACrD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,SAAAI,EAAAA,IAAC,MAAA,CACC,UAAW,CAACT,UAAO,oBAAoB,EAAGQ,CAAc,EACrD,OAAO,OAAO,EACd,KAAK,GAAG,EACX,MAAO,CAAE,MAAO,GAAGF,CAAY,GAAA,CAAI,CAAA,CACrC,CAAA,CAGN"}

package/dist/components/progress-bar/ProgressBar.css

@@ -0,0 +1 @@
+._progress-bar_yw4zb_2{position:relative;width:100%;background-color:rgba(var(--center-channel-color-rgb),.16);overflow:hidden}._progress-bar--size-small_yw4zb_8{height:4px;border-radius:var(--radius-xs)}._progress-bar--size-small_yw4zb_8 ._progress-bar__fill_yw4zb_12{border-radius:var(--radius-xs)}._progress-bar--size-large_yw4zb_15{height:8px;border-radius:var(--radius-s)}._progress-bar--size-large_yw4zb_15 ._progress-bar__fill_yw4zb_12{border-radius:var(--radius-s)}._progress-bar__fill_yw4zb_12{position:absolute;top:0;bottom:0;left:0;transition:width var(--duration-quick) var(--ease-transition)}._progress-bar__fill--default_yw4zb_29{background-color:var(--button-bg)}._progress-bar__fill--success_yw4zb_32{background-color:var(--color-success)}._progress-bar__fill--warning_yw4zb_35{background-color:var(--color-warning)}._progress-bar__fill--danger_yw4zb_38{background-color:var(--error-text, var(--color-danger))}

package/dist/components/progress-bar/ProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,OAAO,CAAC;AAEhD,MAAM,WAAW,gBAAgB;IAC/B,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAS,EACT,IAAc,EACd,cAAsB,EACtB,YAAY,EAAE,SAAsB,EACpC,SAAc,GACf,EAAE,gBAAgB,2CA8BlB"}

package/dist/components/progress-bar/ProgressBar.js

@@ -0,0 +1,36 @@
+import { jsx as e } from "react/jsx-runtime";
+import r from "./ProgressBar.module.scss.js";
+function g(a) {
+  return a >= 90 ? r["progress-bar__fill--danger"] : a >= 70 ? r["progress-bar__fill--warning"] : r["progress-bar__fill--success"];
+}
+function c({
+  value: a = 0,
+  size: l = "large",
+  semanticColors: o = !1,
+  "aria-label": i = "Progress",
+  className: n = ""
+}) {
+  const s = Math.min(100, Math.max(0, a)), t = l === "small" ? r["progress-bar--size-small"] : r["progress-bar--size-large"], f = o ? g(s) : r["progress-bar__fill--default"];
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      role: "progressbar",
+      "aria-valuenow": s,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": i,
+      className: [r["progress-bar"], t, n].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ e(
+        "div",
+        {
+          className: [r["progress-bar__fill"], f].filter(Boolean).join(" "),
+          style: { width: `${s}%` }
+        }
+      )
+    }
+  );
+}
+export {
+  c as default
+};
+//# sourceMappingURL=ProgressBar.js.map

package/dist/components/progress-bar/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import styles from './ProgressBar.module.scss';\n\nexport type ProgressBarSize = 'small' | 'large';\n\nexport interface ProgressBarProps {\n  /** Progress value 0–100. Default: 0. */\n  value?: number;\n  /** Size variant. Default: Large. */\n  size?: ProgressBarSize;\n  /**\n   * When true, fill color shifts from green→yellow→red based on percentage.\n   * When false, uses the default brand blue. Default: false.\n   */\n  semanticColors?: boolean;\n  /** Accessible label for the progress bar. */\n  'aria-label'?: string;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nfunction getSemanticColorClass(value: number): string {\n  if (value >= 90) return styles['progress-bar__fill--danger'];\n  if (value >= 70) return styles['progress-bar__fill--warning'];\n  return styles['progress-bar__fill--success'];\n}\n\n/**\n * Progress Bar shows determinate progress through a wait state — an upload finishing, a\n * quota filling, an import running. Use it when the duration or total is known; reach for\n * [Spinner](/components/spinner) when it isn't.\n */\nexport default function ProgressBar({\n  value = 0,\n  size = 'large',\n  semanticColors = false,\n  'aria-label': ariaLabel = 'Progress',\n  className = '',\n}: ProgressBarProps) {\n  const clampedValue = Math.min(100, Math.max(0, value));\n  const sizeClass =\n    size === 'small'\n      ? styles['progress-bar--size-small']\n      : styles['progress-bar--size-large'];\n\n  const fillColorClass = semanticColors\n    ? getSemanticColorClass(clampedValue)\n    : styles['progress-bar__fill--default'];\n\n  return (\n    <div\n      role=\"progressbar\"\n      aria-valuenow={clampedValue}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-label={ariaLabel}\n      className={[styles['progress-bar'], sizeClass, className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div\n        className={[styles['progress-bar__fill'], fillColorClass]\n          .filter(Boolean)\n          .join(' ')}\n        style={{ width: `${clampedValue}%` }}\n      />\n    </div>\n  );\n}\n"],"names":["getSemanticColorClass","value","styles","ProgressBar","size","semanticColors","ariaLabel","className","clampedValue","sizeClass","fillColorClass","jsx"],"mappings":";;AAoBA,SAASA,EAAsBC,GAAuB;AACpD,SAAIA,KAAS,KAAWC,EAAO,4BAA4B,IACvDD,KAAS,KAAWC,EAAO,6BAA6B,IACrDA,EAAO,6BAA6B;AAC7C;AAOA,SAAwBC,EAAY;AAAA,EAClC,OAAAF,IAAQ;AAAA,EACR,MAAAG,IAAO;AAAA,EACP,gBAAAC,IAAiB;AAAA,EACjB,cAAcC,IAAY;AAAA,EAC1B,WAAAC,IAAY;AACd,GAAqB;AACnB,QAAMC,IAAe,KAAK,IAAI,KAAK,KAAK,IAAI,GAAGP,CAAK,CAAC,GAC/CQ,IACJL,MAAS,UACLF,EAAO,0BAA0B,IACjCA,EAAO,0BAA0B,GAEjCQ,IAAiBL,IACnBL,EAAsBQ,CAAY,IAClCN,EAAO,6BAA6B;AAExC,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,iBAAeH;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,cAAYF;AAAA,MACZ,WAAW,CAACJ,EAAO,cAAc,GAAGO,GAAWF,CAAS,EACrD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MAEX,UAAA,gBAAAI;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,CAACT,EAAO,oBAAoB,GAAGQ,CAAc,EACrD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,UACX,OAAO,EAAE,OAAO,GAAGF,CAAY,IAAA;AAAA,QAAI;AAAA,MAAA;AAAA,IACrC;AAAA,EAAA;AAGN;"}

package/dist/components/progress-bar/ProgressBar.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ProgressBar.css');const r={"progress-bar":"_progress-bar_yw4zb_2","progress-bar--size-small":"_progress-bar--size-small_yw4zb_8","progress-bar__fill":"_progress-bar__fill_yw4zb_12","progress-bar--size-large":"_progress-bar--size-large_yw4zb_15","progress-bar__fill--default":"_progress-bar__fill--default_yw4zb_29","progress-bar__fill--success":"_progress-bar__fill--success_yw4zb_32","progress-bar__fill--warning":"_progress-bar__fill--warning_yw4zb_35","progress-bar__fill--danger":"_progress-bar__fill--danger_yw4zb_38"};exports.default=r;
+//# sourceMappingURL=ProgressBar.module.scss.cjs.map

package/dist/components/progress-bar/ProgressBar.module.scss.cjs.map

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

package/dist/components/progress-bar/ProgressBar.module.scss.js

@@ -0,0 +1,14 @@
+import './ProgressBar.css';const r = {
+  "progress-bar": "_progress-bar_yw4zb_2",
+  "progress-bar--size-small": "_progress-bar--size-small_yw4zb_8",
+  "progress-bar__fill": "_progress-bar__fill_yw4zb_12",
+  "progress-bar--size-large": "_progress-bar--size-large_yw4zb_15",
+  "progress-bar__fill--default": "_progress-bar__fill--default_yw4zb_29",
+  "progress-bar__fill--success": "_progress-bar__fill--success_yw4zb_32",
+  "progress-bar__fill--warning": "_progress-bar__fill--warning_yw4zb_35",
+  "progress-bar__fill--danger": "_progress-bar__fill--danger_yw4zb_38"
+};
+export {
+  r as default
+};
+//# sourceMappingURL=ProgressBar.module.scss.js.map

package/dist/components/progress-bar/ProgressBar.module.scss.js.map

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

package/dist/components/progress-bar/index.cjs

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

package/dist/components/progress-bar/index.cjs.map

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

package/dist/components/progress-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/progress-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/progress-bar/index.js

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

package/dist/components/progress-bar/index.js.map

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

package/dist/components/radio/Radio.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),C=require("react"),h=require("../../hooks/use-controllable.cjs"),q=require("../../utils/string.cjs"),e=require("./Radio.module.scss.cjs");function v({className:r="",size:n="medium",invalid:s=!1,children:o,id:d,checked:t,defaultChecked:l,disabled:u,onChange:c,name:_,value:f,...m}){const b=C.useId(),i=d??b,[,j]=h.useControllable(t,l,c),p=e.default[`radio--size-${q.toKebab(n)}`],g=s?e.default["radio--invalid"]:"",x=[e.default.radio,p,g,r].filter(Boolean).join(" ");return a.jsxs("label",{className:x,htmlFor:i,children:[a.jsx("input",{id:i,type:"radio",name:_,value:f,className:e.default.radio__input,checked:t,defaultChecked:l,disabled:u,"aria-invalid":s?!0:void 0,onChange:j,...m}),a.jsx("span",{className:e.default.radio__circle,children:a.jsx("span",{className:e.default.radio__dot,"aria-hidden":!0})}),o!=null&&a.jsx("span",{className:e.default.radio__label,children:o})]})}exports.default=v;
+//# sourceMappingURL=Radio.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.cjs","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { 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 */\nexport default function Radio({\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}: RadioProps) {\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        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"],"names":["Radio","className","size","invalid","children","idProp","checked","defaultChecked","disabled","onChange","name","value","rest","generatedId","useId","id","handleChange","useControllable","sizeClass","styles","toKebab","invalidClass","rootClass","jsxs","jsx"],"mappings":"0RA2BA,SAAwBA,EAAM,CAC5B,UAAAC,EAAY,GACZ,KAAAC,EAAO,SACP,QAAAC,EAAU,GACV,SAAAC,EACA,GAAIC,EACJ,QAAAC,EACA,eAAAC,EACA,SAAAC,EACA,SAAAC,EACA,KAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EAAe,CACb,MAAMC,EAAcC,EAAAA,MAAA,EACdC,EAAKV,GAAUQ,EACf,CAAA,CAAGG,CAAY,EAAIC,EAAAA,gBAAgBX,EAASC,EAAgBE,CAAQ,EAEpES,EAAYC,EAAAA,QAAO,eAAeC,EAAAA,QAAQlB,CAAI,CAAC,EAAE,EACjDmB,EAAelB,EAAUgB,UAAO,gBAAgB,EAAI,GAEpDG,EAAY,CAACH,UAAO,MAAOD,EAAWG,EAAcpB,CAAS,EAChE,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEsB,EAAAA,KAAC,QAAA,CAAM,UAAWD,EAAW,QAASP,EAEpC,SAAA,CAAAS,EAAAA,IAAC,QAAA,CACC,GAAAT,EACA,KAAK,QACL,KAAAL,EACA,MAAAC,EACA,UAAWQ,EAAAA,QAAO,aAClB,QAAAb,EACA,eAAAC,EACA,SAAAC,EACA,eAAcL,EAAU,GAAO,OAC/B,SAAUa,EACT,GAAGJ,CAAA,CAAA,EAENY,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,cACtB,SAAAK,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,WAAe,cAAW,GAAC,EACrD,EACCf,GAAY,MACXoB,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,aAAkB,SAAAf,CAAA,CAAS,CAAA,EAEvD,CAEJ"}

package/dist/components/radio/Radio.css

@@ -0,0 +1 @@
+._radio_difs7_2{position:relative;display:flex;align-items:center;width:100%;gap:var(--spacing-xs);font-family:var(--font-family-body);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._radio_difs7_2:has(._radio__input_difs7_13:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._radio__input_difs7_13{position:absolute;left:0;top:50%;transform:translateY(-50%);margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}._radio__input_difs7_13:focus-visible{outline:none}._radio__circle_difs7_33{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.24);border-radius:var(--radius-full);transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),border-width var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._radio__input_difs7_13:focus-visible~._radio__circle_difs7_33{box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover ._radio__circle_difs7_33{border-color:rgba(var(--center-channel-color-rgb),.32)}._radio__input_difs7_13:disabled~._radio__circle_difs7_33{border-color:rgba(var(--center-channel-color-rgb),.16)}._radio__input_difs7_13:checked~._radio__circle_difs7_33{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--button-bg)}._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:var(--button-bg)}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover ._radio__input_difs7_13:checked~._radio__circle_difs7_33{border-color:var(--button-bg)}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover ._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:var(--button-bg)}._radio__input_difs7_13:focus-visible:checked~._radio__circle_difs7_33{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio__input_difs7_13:disabled:checked~._radio__circle_difs7_33{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.32);border-width:1px}._radio__input_difs7_13:disabled:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:rgba(var(--center-channel-color-rgb),.32)}._radio--invalid_difs7_80 ._radio__circle_difs7_33{border-color:var(--error-text, var(--color-danger))}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover._radio--invalid_difs7_80 ._radio__input_difs7_13:not(:checked)~._radio__circle_difs7_33{border-color:var(--error-text, var(--color-danger))}._radio--invalid_difs7_80 ._radio__input_difs7_13:checked~._radio__circle_difs7_33{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--error-text, var(--color-danger))}._radio--invalid_difs7_80 ._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:var(--error-text, var(--color-danger))}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover._radio--invalid_difs7_80 ._radio__input_difs7_13:checked~._radio__circle_difs7_33{border-color:var(--error-text, var(--color-danger))}._radio_difs7_2:has(._radio__input_difs7_13:not(:disabled)):hover._radio--invalid_difs7_80 ._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{background-color:var(--error-text, var(--color-danger))}._radio--invalid_difs7_80 ._radio__input_difs7_13:focus-visible~._radio__circle_difs7_33{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio--invalid_difs7_80 ._radio__input_difs7_13:focus-visible:checked~._radio__circle_difs7_33{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio__dot_difs7_59{display:block;border-radius:var(--radius-full);pointer-events:none;transform:scale(.5);transition:transform var(--duration-quick) var(--ease-entrance)}._radio__input_difs7_13:checked~._radio__circle_difs7_33 ._radio__dot_difs7_59{transform:scale(1)}._radio__label_difs7_116{line-height:1}._radio--size-small_difs7_119{gap:var(--spacing-xs)}._radio--size-small_difs7_119 ._radio__input_difs7_13,._radio--size-small_difs7_119 ._radio__circle_difs7_33{width:12px;height:12px}._radio--size-small_difs7_119 ._radio__dot_difs7_59{width:6px;height:6px}._radio--size-small_difs7_119 ._radio__label_difs7_116{font-size:var(--font-size-75);line-height:var(--line-height-75)}._radio--size-medium_difs7_138{gap:var(--spacing-xs)}._radio--size-medium_difs7_138 ._radio__input_difs7_13,._radio--size-medium_difs7_138 ._radio__circle_difs7_33{width:16px;height:16px}._radio--size-medium_difs7_138 ._radio__dot_difs7_59{width:8px;height:8px}._radio--size-medium_difs7_138 ._radio__label_difs7_116{font-size:var(--font-size-100);line-height:var(--line-height-100)}._radio--size-large_difs7_157{gap:var(--spacing-s)}._radio--size-large_difs7_157 ._radio__input_difs7_13,._radio--size-large_difs7_157 ._radio__circle_difs7_33{width:20px;height:20px}._radio--size-large_difs7_157 ._radio__dot_difs7_59{width:10px;height:10px}._radio--size-large_difs7_157 ._radio__label_difs7_116{font-size:var(--font-size-200);line-height:var(--line-height-200)}

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

@@ -0,0 +1,19 @@
+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.
+ */
+export default function Radio({ className, size, invalid, children, id: idProp, checked, defaultChecked, disabled, onChange, name, value, ...rest }: RadioProps): import("react/jsx-runtime").JSX.Element;
+//# 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,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,SAAc,EACd,IAAe,EACf,OAAe,EACf,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,GAAG,IAAI,EACR,EAAE,UAAU,2CAoCZ"}

package/dist/components/radio/Radio.js

@@ -0,0 +1,45 @@
+import { jsxs as g, jsx as o } from "react/jsx-runtime";
+import { useId as j } from "react";
+import { useControllable as v } from "../../hooks/use-controllable.js";
+import { toKebab as x } from "../../utils/string.js";
+import a from "./Radio.module.scss.js";
+function K({
+  className: n = "",
+  size: t = "medium",
+  invalid: s = !1,
+  children: i,
+  id: d,
+  checked: r,
+  defaultChecked: e,
+  disabled: m,
+  onChange: c,
+  name: p,
+  value: u,
+  ...f
+}) {
+  const _ = j(), l = d ?? _, [, b] = v(r, e, c), C = a[`radio--size-${x(t)}`], N = s ? a["radio--invalid"] : "", h = [a.radio, C, N, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ g("label", { className: h, htmlFor: l, children: [
+    /* @__PURE__ */ o(
+      "input",
+      {
+        id: l,
+        type: "radio",
+        name: p,
+        value: u,
+        className: a.radio__input,
+        checked: r,
+        defaultChecked: e,
+        disabled: m,
+        "aria-invalid": s ? !0 : void 0,
+        onChange: b,
+        ...f
+      }
+    ),
+    /* @__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 })
+  ] });
+}
+export {
+  K 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 { 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 */\nexport default function Radio({\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}: RadioProps) {\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        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"],"names":["Radio","className","size","invalid","children","idProp","checked","defaultChecked","disabled","onChange","name","value","rest","generatedId","useId","id","handleChange","useControllable","sizeClass","styles","toKebab","invalidClass","rootClass","jsxs","jsx"],"mappings":";;;;;AA2BA,SAAwBA,EAAM;AAAA,EAC5B,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,GAAe;AACb,QAAMC,IAAcC,EAAA,GACdC,IAAKV,KAAUQ,GACf,CAAA,EAAGG,CAAY,IAAIC,EAAgBX,GAASC,GAAgBE,CAAQ,GAEpES,IAAYC,EAAO,eAAeC,EAAQlB,CAAI,CAAC,EAAE,GACjDmB,IAAelB,IAAUgB,EAAO,gBAAgB,IAAI,IAEpDG,IAAY,CAACH,EAAO,OAAOD,GAAWG,GAAcpB,CAAS,EAChE,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAsB,EAAC,SAAA,EAAM,WAAWD,GAAW,SAASP,GAEpC,UAAA;AAAA,IAAA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAAT;AAAA,QACA,MAAK;AAAA,QACL,MAAAL;AAAA,QACA,OAAAC;AAAA,QACA,WAAWQ,EAAO;AAAA,QAClB,SAAAb;AAAA,QACA,gBAAAC;AAAA,QACA,UAAAC;AAAA,QACA,gBAAcL,IAAU,KAAO;AAAA,QAC/B,UAAUa;AAAA,QACT,GAAGJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEN,gBAAAY,EAAC,QAAA,EAAK,WAAWL,EAAO,eACtB,UAAA,gBAAAK,EAAC,QAAA,EAAK,WAAWL,EAAO,YAAe,eAAW,IAAC,GACrD;AAAA,IACCf,KAAY,QACX,gBAAAoB,EAAC,QAAA,EAAK,WAAWL,EAAO,cAAkB,UAAAf,EAAA,CAAS;AAAA,EAAA,GAEvD;AAEJ;"}

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\n              ? styles['reactions-row__ack--active']\n              : '',\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,EACIO,EAAAA,QAAO,4BAA4B,EACnC,EAAA,EAEH,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,2CA+DnB"}