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

package/dist/components/text-area/TextArea.js

@@ -0,0 +1,94 @@
+import { jsxs as u, jsx as _ } from "react/jsx-runtime";
+import { forwardRef as O, useId as Q, useState as N, useCallback as f } from "react";
+import { toKebab as W } from "../../utils/string.js";
+import e from "./TextArea.module.scss.js";
+const L = O(
+  function({
+    className: j = "",
+    size: y = "medium",
+    label: d,
+    invalid: v = !1,
+    maxLength: l,
+    showCharacterCount: m = !1,
+    id: I,
+    value: c,
+    defaultValue: x,
+    placeholder: h,
+    onFocus: s,
+    onBlur: r,
+    onChange: i,
+    disabled: V,
+    readOnly: z,
+    rows: A = 3,
+    "aria-describedby": F,
+    ...T
+  }, $) {
+    const k = Q(), n = I ?? k, a = c !== void 0, [w, C] = N(
+      x ?? ""
+    ), o = a ? c : w, K = o != null && o !== "", [R, b] = N(!1), S = R || K, U = f(
+      (t) => {
+        b(!0), s == null || s(t);
+      },
+      [s]
+    ), q = f(
+      (t) => {
+        b(!1), r == null || r(t);
+      },
+      [r]
+    ), D = f(
+      (t) => {
+        a || C(t.target.value), i == null || i(t);
+      },
+      [a, i]
+    ), E = e[`text-area--size-${W(y)}`], G = v ? e["text-area--invalid"] : "", H = d != null && S ? e["text-area--label-floated"] : "", J = [
+      e["text-area"],
+      E,
+      G,
+      H,
+      j
+    ].filter(Boolean).join(" "), M = typeof o == "string" ? o.length : 0, p = m && l != null ? `${n}-counter` : void 0;
+    return /* @__PURE__ */ u("div", { className: J, children: [
+      /* @__PURE__ */ u("div", { className: e["text-area__wrapper"], children: [
+        d != null && /* @__PURE__ */ _("label", { className: e["text-area__label"], htmlFor: n, children: d }),
+        /* @__PURE__ */ _(
+          "textarea",
+          {
+            ref: $,
+            id: n,
+            className: e["text-area__input"],
+            value: a ? c : void 0,
+            defaultValue: a ? void 0 : x,
+            placeholder: h,
+            maxLength: l,
+            disabled: V,
+            readOnly: z,
+            rows: A,
+            "aria-invalid": v ? !0 : void 0,
+            "aria-describedby": [F, p].filter(Boolean).join(" ") || void 0,
+            onFocus: U,
+            onBlur: q,
+            onChange: D,
+            ...T
+          }
+        )
+      ] }),
+      m && l != null && /* @__PURE__ */ u(
+        "div",
+        {
+          id: p,
+          className: e["text-area__counter"],
+          "aria-live": "polite",
+          children: [
+            M,
+            " / ",
+            l
+          ]
+        }
+      )
+    ] });
+  }
+);
+export {
+  L as default
+};
+//# sourceMappingURL=TextArea.js.map

package/dist/components/text-area/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sources":["../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import type { TextareaHTMLAttributes, ReactNode, ChangeEvent } from 'react';\nimport { forwardRef, useId, useState, useCallback } from 'react';\nimport { toKebab } from '@/utils/string';\nimport styles from './TextArea.module.scss';\n\nexport type TextAreaSize = 'small' | 'medium' | 'large';\n\nexport interface TextAreaProps extends Omit<\n  TextareaHTMLAttributes<HTMLTextAreaElement>,\n  'size'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows invalid/error styling. */\n  invalid?: boolean;\n  /** Floating label content. When provided, label floats on focus or when value is non-empty. */\n  label?: ReactNode;\n  /** Max length for the textarea; used with showCharacterCount for counter. */\n  maxLength?: number;\n  /** When true with maxLength, shows \"current / max\" character count below textarea. */\n  showCharacterCount?: boolean;\n  /** Size variant. Default: Medium. */\n  size?: TextAreaSize;\n}\n\n/**\n * Text Areas let people write long-form text that spans multiple lines — descriptions,\n * channel purposes, message drafts, admin notes. They share their visual rhythm with Text\n * Input but trade the single-line constraint for room to breathe.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      invalid = false,\n      maxLength,\n      showCharacterCount = false,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      readOnly,\n      rows = 3,\n      'aria-describedby': describedBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n\n    const isControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\n\n    const [isFocused, setIsFocused] = useState(false);\n    const labelFloated = isFocused || hasValue;\n\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        if (!isControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isControlled, onChange],\n    );\n\n    const sizeClass = styles[`text-area--size-${toKebab(size)}`];\n    const invalidClass = invalid ? styles['text-area--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['text-area--label-floated'] : '';\n\n    const rootClass = [\n      styles['text-area'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const currentLength = typeof value === 'string' ? value.length : 0;\n    const counterId =\n      showCharacterCount && maxLength != null ? `${id}-counter` : undefined;\n\n    return (\n      <div className={rootClass}>\n        <div className={styles['text-area__wrapper']}>\n          {label != null && (\n            <label className={styles['text-area__label']} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <textarea\n            ref={ref}\n            id={id}\n            className={styles['text-area__input']}\n            value={isControlled ? valueProp : undefined}\n            defaultValue={isControlled ? undefined : defaultValue}\n            placeholder={placeholder}\n            maxLength={maxLength}\n            disabled={disabled}\n            readOnly={readOnly}\n            rows={rows}\n            aria-invalid={invalid ? true : undefined}\n            aria-describedby={\n              [describedBy, counterId].filter(Boolean).join(' ') || undefined\n            }\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onChange={handleChange}\n            {...rest}\n          />\n        </div>\n        {showCharacterCount && maxLength != null && (\n          <div\n            id={counterId}\n            className={styles['text-area__counter']}\n            aria-live=\"polite\"\n          >\n            {currentLength} / {maxLength}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nexport default TextArea;\n"],"names":["TextArea","forwardRef","className","size","label","invalid","maxLength","showCharacterCount","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","readOnly","rows","describedBy","rest","ref","generatedId","useId","id","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","e","handleBlur","handleChange","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","rootClass","currentLength","counterId","jsxs","jsx"],"mappings":"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"}

package/dist/components/text-area/TextArea.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./TextArea.css');const e={"text-area":"_text-area_1qev1_2","text-area__wrapper":"_text-area__wrapper_1qev1_7","text-area__input":"_text-area__input_1qev1_14","text-area__label":"_text-area__label_1qev1_24","text-area--label-floated":"_text-area--label-floated_1qev1_43","text-area__counter":"_text-area__counter_1qev1_74","text-area--size-small":"_text-area--size-small_1qev1_81","text-area--size-medium":"_text-area--size-medium_1qev1_96","text-area--size-large":"_text-area--size-large_1qev1_111","text-area--invalid":"_text-area--invalid_1qev1_133"};exports.default=e;
+//# sourceMappingURL=TextArea.module.scss.cjs.map

package/dist/components/text-area/TextArea.module.scss.cjs.map

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

package/dist/components/text-area/TextArea.module.scss.js

@@ -0,0 +1,16 @@
+import './TextArea.css';const e = {
+  "text-area": "_text-area_1qev1_2",
+  "text-area__wrapper": "_text-area__wrapper_1qev1_7",
+  "text-area__input": "_text-area__input_1qev1_14",
+  "text-area__label": "_text-area__label_1qev1_24",
+  "text-area--label-floated": "_text-area--label-floated_1qev1_43",
+  "text-area__counter": "_text-area__counter_1qev1_74",
+  "text-area--size-small": "_text-area--size-small_1qev1_81",
+  "text-area--size-medium": "_text-area--size-medium_1qev1_96",
+  "text-area--size-large": "_text-area--size-large_1qev1_111",
+  "text-area--invalid": "_text-area--invalid_1qev1_133"
+};
+export {
+  e as default
+};
+//# sourceMappingURL=TextArea.module.scss.js.map

package/dist/components/text-area/TextArea.module.scss.js.map

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

package/dist/components/text-area/index.cjs

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

package/dist/components/text-area/index.cjs.map

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

package/dist/components/text-area/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/text-area/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/text-area/index.js

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

package/dist/components/text-area/index.js.map

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

package/dist/components/text-input/TextInput.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),s=require("react"),I=require("../icon/Icon.cjs"),X=require("../../utils/string.cjs"),e=require("./TextInput.module.scss.cjs"),Y=s.forwardRef(function({className:y="",size:R="medium",label:r,leadingIcon:f,trailingIcon:p,invalid:v=!1,maxLength:i,showCharacterCount:_=!1,id:S,value:x,defaultValue:b,placeholder:q,onFocus:u,onBlur:c,onChange:d,disabled:T,readOnly:g,"aria-describedby":k,...z},n){const V=s.useId(),j=S??V,h=s.useRef(null),M=s.useCallback(t=>{if(h.current=t,typeof n=="function"){const N=n(t);return()=>{h.current=null,typeof N=="function"&&N()}}n&&(n.current=t)},[n]),a=x!==void 0,[$,w]=s.useState(b??""),o=a?x:$,F=o!=null&&o!=="",[K,m]=s.useState(!1),O=K||F,P=s.useCallback(t=>{m(!0),u==null||u(t)},[u]),U=s.useCallback(t=>{m(!1),c==null||c(t)},[c]),A=s.useCallback(t=>{a||w(t.target.value),d==null||d(t)},[a,d]),D=e.default[`text-input--size-${X.toKebab(R)}`],E=v?e.default["text-input--invalid"]:"",G=r!=null&&O?e.default["text-input--label-floated"]:"",H=f!=null?e.default["text-input--has-leading-icon"]:"",J=p!=null?e.default["text-input--has-trailing-icon"]:"",Q=[e.default["text-input"],D,E,G,H,J,y].filter(Boolean).join(" "),W=typeof o=="string"?o.length:0,C=_&&i!=null?`${j}-counter`:void 0;return l.jsxs("div",{className:Q,children:[l.jsx("div",{className:e.default["text-input__wrapper"],children:l.jsxs("label",{className:e.default["text-input__inner"],children:[r!=null&&l.jsx("span",{className:e.default["text-input__label"],children:r}),f!=null&&l.jsx("span",{className:e.default["text-input__leading-icon"],children:l.jsx(I.IconSlotContext.Provider,{value:{size:"16"},children:f})}),l.jsx("input",{ref:M,id:j,className:e.default["text-input__input"],value:a?x:void 0,defaultValue:a?void 0:b,placeholder:q,maxLength:i,disabled:T,readOnly:g,"aria-invalid":v?!0:void 0,"aria-describedby":[k,C].filter(Boolean).join(" ")||void 0,onFocus:P,onBlur:U,onChange:A,...z}),p!=null&&l.jsx("span",{className:e.default["text-input__trailing-icon"],children:l.jsx(I.IconSlotContext.Provider,{value:{size:"16"},children:p})})]})}),_&&i!=null&&l.jsxs("div",{id:C,className:e.default["text-input__counter"],"aria-live":"polite",children:[W," / ",i]})]})});exports.default=Y;
+//# sourceMappingURL=TextInput.cjs.map

package/dist/components/text-input/TextInput.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.cjs","sources":["../../../src/components/text-input/TextInput.tsx"],"sourcesContent":["import type {\n  InputHTMLAttributes,\n  ReactNode,\n  ChangeEvent,\n  RefCallback,\n} from 'react';\nimport { forwardRef, useId, useState, useCallback, useRef } from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport { toKebab } from '@/utils/string';\nimport styles from './TextInput.module.scss';\n\nexport type TextInputSize = 'small' | 'medium' | 'large';\n\nexport interface TextInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows invalid/error styling. */\n  invalid?: boolean;\n  /** Floating label content. When provided, label floats on focus or when value is non-empty. */\n  label?: ReactNode;\n  /** Leading icon — pass `<Icon glyph={<SearchIcon />} />`; TextInput provides the correct size via context. */\n  leadingIcon?: ReactNode;\n  /** Max length for the input; used with showCharacterCount for counter. */\n  maxLength?: number;\n  /** When true with maxLength, shows \"current / max\" character count below input. */\n  showCharacterCount?: boolean;\n  /** Size variant. Figma: Small (32px), Medium (40px), Large (48px). Default: Medium. */\n  size?: TextInputSize;\n  /** Trailing icon — pass `<Icon glyph={<SomeIcon />} />`; TextInput provides the correct size via context. */\n  trailingIcon?: ReactNode;\n}\n\n/**\n * Text Inputs let people enter and edit a single line of text — names, emails, search\n * queries, channel titles. They're the workhorse of every form and modal in Mattermost.\n */\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n  function TextInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      leadingIcon,\n      trailingIcon,\n      invalid = false,\n      maxLength,\n      showCharacterCount = false,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      readOnly,\n      'aria-describedby': describedBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const setInputRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') {\n          const cleanup = (ref as RefCallback<HTMLInputElement>)(node);\n          return () => {\n            inputRef.current = null;\n            if (typeof cleanup === 'function') cleanup();\n          };\n        }\n        if (ref) ref.current = node;\n      },\n      [ref],\n    );\n\n    const isControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\n\n    const [isFocused, setIsFocused] = useState(false);\n    const labelFloated = isFocused || hasValue;\n\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        if (!isControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isControlled, onChange],\n    );\n\n    const sizeClass = styles[`text-input--size-${toKebab(size)}`];\n    const invalidClass = invalid ? styles['text-input--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['text-input--label-floated'] : '';\n    const hasLeadingClass =\n      leadingIcon != null ? styles['text-input--has-leading-icon'] : '';\n    const hasTrailingClass =\n      trailingIcon != null ? styles['text-input--has-trailing-icon'] : '';\n\n    const rootClass = [\n      styles['text-input'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      hasLeadingClass,\n      hasTrailingClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const currentLength = typeof value === 'string' ? value.length : 0;\n    const counterId =\n      showCharacterCount && maxLength != null ? `${id}-counter` : undefined;\n\n    return (\n      <div className={rootClass}>\n        <div className={styles['text-input__wrapper']}>\n          <label className={styles['text-input__inner']}>\n            {label != null && (\n              <span className={styles['text-input__label']}>{label}</span>\n            )}\n            {leadingIcon != null && (\n              <span className={styles['text-input__leading-icon']}>\n                <IconSlotContext.Provider value={{ size: '16' }}>\n                  {leadingIcon}\n                </IconSlotContext.Provider>\n              </span>\n            )}\n            <input\n              ref={setInputRef}\n              id={id}\n              className={styles['text-input__input']}\n              value={isControlled ? valueProp : undefined}\n              defaultValue={isControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              maxLength={maxLength}\n              disabled={disabled}\n              readOnly={readOnly}\n              aria-invalid={invalid ? true : undefined}\n              aria-describedby={\n                [describedBy, counterId].filter(Boolean).join(' ') || undefined\n              }\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              {...rest}\n            />\n            {trailingIcon != null && (\n              <span className={styles['text-input__trailing-icon']}>\n                <IconSlotContext.Provider value={{ size: '16' }}>\n                  {trailingIcon}\n                </IconSlotContext.Provider>\n              </span>\n            )}\n          </label>\n        </div>\n        {showCharacterCount && maxLength != null && (\n          <div\n            id={counterId}\n            className={styles['text-input__counter']}\n            aria-live=\"polite\"\n          >\n            {currentLength} / {maxLength}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nexport default TextInput;\n"],"names":["TextInput","forwardRef","className","size","label","leadingIcon","trailingIcon","invalid","maxLength","showCharacterCount","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","readOnly","describedBy","rest","ref","generatedId","useId","id","inputRef","useRef","setInputRef","useCallback","node","cleanup","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","e","handleBlur","handleChange","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","hasLeadingClass","hasTrailingClass","rootClass","currentLength","counterId","jsxs","jsx","IconSlotContext"],"mappings":"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"}

package/dist/components/text-input/TextInput.css

@@ -0,0 +1 @@
+._text-input_16ayx_2{display:flex;flex-direction:column;width:100%}._text-input__wrapper_16ayx_7{position:relative;display:flex;flex-direction:column;min-height:0;background-color:var(--center-channel-bg);border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.16);transition:box-shadow var(--duration-quick) var(--ease-transition);cursor:text}._text-input_16ayx_2:has(._text-input__input_16ayx_18:not(:disabled)):hover:not(:focus-within) ._text-input__wrapper_16ayx_7{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._text-input_16ayx_2:has(._text-input__input_16ayx_18:focus-visible) ._text-input__wrapper_16ayx_7{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._text-input_16ayx_2:has(._text-input__input_16ayx_18:disabled) ._text-input__wrapper_16ayx_7{background-color:var(--center-channel-bg);opacity:.56;cursor:not-allowed}._text-input__label_16ayx_29{position:absolute;left:var(--spacing-xs);top:50%;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.64);background-color:var(--center-channel-bg);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);transition:transform var(--duration-quick) var(--ease-transition),font-size var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),left var(--duration-quick) var(--ease-transition)}._text-input--label-floated_16ayx_49 ._text-input__label_16ayx_29{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._text-input__inner_16ayx_56{display:flex;align-items:center;flex:1;width:100%;min-width:0;box-sizing:border-box;margin:0;cursor:text}._text-input__input_16ayx_18{flex:1 1 0;width:100%;min-width:0;min-height:100%;margin:0;padding:0;border:0;background:transparent;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:var(--center-channel-color)}._text-input__input_16ayx_18:focus{outline:none}._text-input__input_16ayx_18::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._text-input__leading-icon_16ayx_87,._text-input__trailing-icon_16ayx_87{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._text-input__leading-icon_16ayx_87{margin-right:var(--spacing-xs)}._text-input__trailing-icon_16ayx_87{margin-left:var(--spacing-xs)}._text-input__counter_16ayx_100{margin-top:var(--spacing-xxxs);font-family:Open Sans,sans-serif;font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._text-input--size-small_16ayx_107 ._text-input__wrapper_16ayx_7{min-height:32px}._text-input--size-small_16ayx_107 ._text-input__inner_16ayx_56{padding:var(--spacing-xs) var(--spacing-m)}._text-input--size-small_16ayx_107 ._text-input__input_16ayx_18{font-size:var(--font-size-75);line-height:var(--line-height-25)}._text-input--size-small_16ayx_107._text-input--label-floated_16ayx_49 ._text-input__label_16ayx_29{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._text-input--size-medium_16ayx_123 ._text-input__wrapper_16ayx_7{min-height:40px}._text-input--size-medium_16ayx_123 ._text-input__inner_16ayx_56{padding:var(--spacing-s) var(--spacing-l)}._text-input--size-medium_16ayx_123 ._text-input__input_16ayx_18{font-size:var(--font-size-100);line-height:var(--line-height-100)}._text-input--size-medium_16ayx_123 ._text-input__label_16ayx_29{font-size:var(--font-size-100);left:var(--spacing-m)}._text-input--size-medium_16ayx_123._text-input--label-floated_16ayx_49 ._text-input__label_16ayx_29{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._text-input--size-large_16ayx_143 ._text-input__wrapper_16ayx_7{min-height:48px}._text-input--size-large_16ayx_143 ._text-input__inner_16ayx_56{padding:var(--spacing-m) var(--spacing-l)}._text-input--size-large_16ayx_143 ._text-input__input_16ayx_18{font-size:var(--font-size-200);line-height:var(--line-height-200)}._text-input--size-large_16ayx_143 ._text-input__label_16ayx_29{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._text-input--size-large_16ayx_143._text-input--label-floated_16ayx_49 ._text-input__label_16ayx_29{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._text-input--has-leading-icon_16ayx_164 ._text-input__label_16ayx_29{left:var(--spacing-xxxl)}._text-input--has-leading-icon_16ayx_164._text-input--label-floated_16ayx_49 ._text-input__label_16ayx_29{left:var(--spacing-xs)}._text-input--has-leading-icon_16ayx_164._text-input--size-medium_16ayx_123 ._text-input__label_16ayx_29,._text-input--has-leading-icon_16ayx_164._text-input--size-large_16ayx_143 ._text-input__label_16ayx_29{left:36px}._text-input--has-leading-icon_16ayx_164._text-input--size-medium_16ayx_123._text-input--label-floated_16ayx_49 ._text-input__label_16ayx_29,._text-input--has-leading-icon_16ayx_164._text-input--size-large_16ayx_143._text-input--label-floated_16ayx_49 ._text-input__label_16ayx_29{left:var(--spacing-m)}._text-input_16ayx_2:has(._text-input__input_16ayx_18:focus-visible) ._text-input__label_16ayx_29{color:var(--button-bg)}._text-input_16ayx_2:has(._text-input__label_16ayx_29):not(._text-input--label-floated_16ayx_49) ._text-input__input_16ayx_18::placeholder{color:transparent}._text-input--invalid_16ayx_182 ._text-input__wrapper_16ayx_7{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._text-input--invalid_16ayx_182:has(._text-input__input_16ayx_18:focus-visible) ._text-input__wrapper_16ayx_7{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 1px var(--error-text, var(--color-danger))}._text-input--invalid_16ayx_182 ._text-input__label_16ayx_29{color:var(--error-text, var(--color-danger))}._text-input--invalid_16ayx_182:has(._text-input__input_16ayx_18:focus-visible) ._text-input__label_16ayx_29{color:var(--error-text, var(--color-danger))}

package/dist/components/text-input/TextInput.d.ts

@@ -0,0 +1,27 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+export type TextInputSize = 'small' | 'medium' | 'large';
+export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Optional CSS class name. */
+    className?: string;
+    /** When true, shows invalid/error styling. */
+    invalid?: boolean;
+    /** Floating label content. When provided, label floats on focus or when value is non-empty. */
+    label?: ReactNode;
+    /** Leading icon — pass `<Icon glyph={<SearchIcon />} />`; TextInput provides the correct size via context. */
+    leadingIcon?: ReactNode;
+    /** Max length for the input; used with showCharacterCount for counter. */
+    maxLength?: number;
+    /** When true with maxLength, shows "current / max" character count below input. */
+    showCharacterCount?: boolean;
+    /** Size variant. Figma: Small (32px), Medium (40px), Large (48px). Default: Medium. */
+    size?: TextInputSize;
+    /** Trailing icon — pass `<Icon glyph={<SomeIcon />} />`; TextInput provides the correct size via context. */
+    trailingIcon?: ReactNode;
+}
+/**
+ * Text Inputs let people enter and edit a single line of text — names, emails, search
+ * queries, channel titles. They're the workhorse of every form and modal in Mattermost.
+ */
+declare const TextInput: import('react').ForwardRefExoticComponent<TextInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export default TextInput;
+//# sourceMappingURL=TextInput.d.ts.map

package/dist/components/text-input/TextInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/components/text-input/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,SAAS,EAGV,MAAM,OAAO,CAAC;AAMf,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,CACP;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+FAA+F;IAC/F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8GAA8G;IAC9G,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mFAAmF;IACnF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uFAAuF;IACvF,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,6GAA6G;IAC7G,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED;;;GAGG;AACH,QAAA,MAAM,SAAS,6GA2Jd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/text-input/TextInput.js

@@ -0,0 +1,110 @@
+import { jsxs as m, jsx as l } from "react/jsx-runtime";
+import { forwardRef as Z, useId as B, useRef as L, useCallback as r, useState as C } from "react";
+import { IconSlotContext as I } from "../icon/Icon.js";
+import { toKebab as tt } from "../../utils/string.js";
+import t from "./TextInput.module.scss.js";
+const ct = Z(
+  function({
+    className: R = "",
+    size: T = "medium",
+    label: d,
+    leadingIcon: p,
+    trailingIcon: f,
+    invalid: x = !1,
+    maxLength: i,
+    showCharacterCount: _ = !1,
+    id: V,
+    value: v,
+    defaultValue: h,
+    placeholder: S,
+    onFocus: a,
+    onBlur: c,
+    onChange: o,
+    disabled: $,
+    readOnly: g,
+    "aria-describedby": k,
+    ...w
+  }, n) {
+    const F = B(), b = V ?? F, N = L(null), K = r(
+      (e) => {
+        if (N.current = e, typeof n == "function") {
+          const z = n(e);
+          return () => {
+            N.current = null, typeof z == "function" && z();
+          };
+        }
+        n && (n.current = e);
+      },
+      [n]
+    ), s = v !== void 0, [U, q] = C(
+      h ?? ""
+    ), u = s ? v : U, A = u != null && u !== "", [D, y] = C(!1), E = D || A, G = r(
+      (e) => {
+        y(!0), a == null || a(e);
+      },
+      [a]
+    ), H = r(
+      (e) => {
+        y(!1), c == null || c(e);
+      },
+      [c]
+    ), J = r(
+      (e) => {
+        s || q(e.target.value), o == null || o(e);
+      },
+      [s, o]
+    ), M = t[`text-input--size-${tt(T)}`], O = x ? t["text-input--invalid"] : "", P = d != null && E ? t["text-input--label-floated"] : "", Q = p != null ? t["text-input--has-leading-icon"] : "", W = f != null ? t["text-input--has-trailing-icon"] : "", X = [
+      t["text-input"],
+      M,
+      O,
+      P,
+      Q,
+      W,
+      R
+    ].filter(Boolean).join(" "), Y = typeof u == "string" ? u.length : 0, j = _ && i != null ? `${b}-counter` : void 0;
+    return /* @__PURE__ */ m("div", { className: X, children: [
+      /* @__PURE__ */ l("div", { className: t["text-input__wrapper"], children: /* @__PURE__ */ m("label", { className: t["text-input__inner"], children: [
+        d != null && /* @__PURE__ */ l("span", { className: t["text-input__label"], children: d }),
+        p != null && /* @__PURE__ */ l("span", { className: t["text-input__leading-icon"], children: /* @__PURE__ */ l(I.Provider, { value: { size: "16" }, children: p }) }),
+        /* @__PURE__ */ l(
+          "input",
+          {
+            ref: K,
+            id: b,
+            className: t["text-input__input"],
+            value: s ? v : void 0,
+            defaultValue: s ? void 0 : h,
+            placeholder: S,
+            maxLength: i,
+            disabled: $,
+            readOnly: g,
+            "aria-invalid": x ? !0 : void 0,
+            "aria-describedby": [k, j].filter(Boolean).join(" ") || void 0,
+            onFocus: G,
+            onBlur: H,
+            onChange: J,
+            ...w
+          }
+        ),
+        f != null && /* @__PURE__ */ l("span", { className: t["text-input__trailing-icon"], children: /* @__PURE__ */ l(I.Provider, { value: { size: "16" }, children: f }) })
+      ] }) }),
+      _ && i != null && /* @__PURE__ */ m(
+        "div",
+        {
+          id: j,
+          className: t["text-input__counter"],
+          "aria-live": "polite",
+          children: [
+            Y,
+            " / ",
+            i
+          ]
+        }
+      )
+    ] });
+  }
+);
+export {
+  ct as default
+};
+//# sourceMappingURL=TextInput.js.map

package/dist/components/text-input/TextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.js","sources":["../../../src/components/text-input/TextInput.tsx"],"sourcesContent":["import type {\n  InputHTMLAttributes,\n  ReactNode,\n  ChangeEvent,\n  RefCallback,\n} from 'react';\nimport { forwardRef, useId, useState, useCallback, useRef } from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport { toKebab } from '@/utils/string';\nimport styles from './TextInput.module.scss';\n\nexport type TextInputSize = 'small' | 'medium' | 'large';\n\nexport interface TextInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows invalid/error styling. */\n  invalid?: boolean;\n  /** Floating label content. When provided, label floats on focus or when value is non-empty. */\n  label?: ReactNode;\n  /** Leading icon — pass `<Icon glyph={<SearchIcon />} />`; TextInput provides the correct size via context. */\n  leadingIcon?: ReactNode;\n  /** Max length for the input; used with showCharacterCount for counter. */\n  maxLength?: number;\n  /** When true with maxLength, shows \"current / max\" character count below input. */\n  showCharacterCount?: boolean;\n  /** Size variant. Figma: Small (32px), Medium (40px), Large (48px). Default: Medium. */\n  size?: TextInputSize;\n  /** Trailing icon — pass `<Icon glyph={<SomeIcon />} />`; TextInput provides the correct size via context. */\n  trailingIcon?: ReactNode;\n}\n\n/**\n * Text Inputs let people enter and edit a single line of text — names, emails, search\n * queries, channel titles. They're the workhorse of every form and modal in Mattermost.\n */\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n  function TextInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      leadingIcon,\n      trailingIcon,\n      invalid = false,\n      maxLength,\n      showCharacterCount = false,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      readOnly,\n      'aria-describedby': describedBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const setInputRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') {\n          const cleanup = (ref as RefCallback<HTMLInputElement>)(node);\n          return () => {\n            inputRef.current = null;\n            if (typeof cleanup === 'function') cleanup();\n          };\n        }\n        if (ref) ref.current = node;\n      },\n      [ref],\n    );\n\n    const isControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\n\n    const [isFocused, setIsFocused] = useState(false);\n    const labelFloated = isFocused || hasValue;\n\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        if (!isControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isControlled, onChange],\n    );\n\n    const sizeClass = styles[`text-input--size-${toKebab(size)}`];\n    const invalidClass = invalid ? styles['text-input--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['text-input--label-floated'] : '';\n    const hasLeadingClass =\n      leadingIcon != null ? styles['text-input--has-leading-icon'] : '';\n    const hasTrailingClass =\n      trailingIcon != null ? styles['text-input--has-trailing-icon'] : '';\n\n    const rootClass = [\n      styles['text-input'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      hasLeadingClass,\n      hasTrailingClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const currentLength = typeof value === 'string' ? value.length : 0;\n    const counterId =\n      showCharacterCount && maxLength != null ? `${id}-counter` : undefined;\n\n    return (\n      <div className={rootClass}>\n        <div className={styles['text-input__wrapper']}>\n          <label className={styles['text-input__inner']}>\n            {label != null && (\n              <span className={styles['text-input__label']}>{label}</span>\n            )}\n            {leadingIcon != null && (\n              <span className={styles['text-input__leading-icon']}>\n                <IconSlotContext.Provider value={{ size: '16' }}>\n                  {leadingIcon}\n                </IconSlotContext.Provider>\n              </span>\n            )}\n            <input\n              ref={setInputRef}\n              id={id}\n              className={styles['text-input__input']}\n              value={isControlled ? valueProp : undefined}\n              defaultValue={isControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              maxLength={maxLength}\n              disabled={disabled}\n              readOnly={readOnly}\n              aria-invalid={invalid ? true : undefined}\n              aria-describedby={\n                [describedBy, counterId].filter(Boolean).join(' ') || undefined\n              }\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              {...rest}\n            />\n            {trailingIcon != null && (\n              <span className={styles['text-input__trailing-icon']}>\n                <IconSlotContext.Provider value={{ size: '16' }}>\n                  {trailingIcon}\n                </IconSlotContext.Provider>\n              </span>\n            )}\n          </label>\n        </div>\n        {showCharacterCount && maxLength != null && (\n          <div\n            id={counterId}\n            className={styles['text-input__counter']}\n            aria-live=\"polite\"\n          >\n            {currentLength} / {maxLength}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nexport default TextInput;\n"],"names":["TextInput","forwardRef","className","size","label","leadingIcon","trailingIcon","invalid","maxLength","showCharacterCount","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","readOnly","describedBy","rest","ref","generatedId","useId","id","inputRef","useRef","setInputRef","useCallback","node","cleanup","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","handleBlur","handleChange","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","hasLeadingClass","hasTrailingClass","rootClass","currentLength","counterId","jsxs","jsx","IconSlotContext"],"mappings":"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"}

package/dist/components/text-input/TextInput.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./TextInput.css');const t={"text-input":"_text-input_16ayx_2","text-input__wrapper":"_text-input__wrapper_16ayx_7","text-input__input":"_text-input__input_16ayx_18","text-input__label":"_text-input__label_16ayx_29","text-input--label-floated":"_text-input--label-floated_16ayx_49","text-input__inner":"_text-input__inner_16ayx_56","text-input__leading-icon":"_text-input__leading-icon_16ayx_87","text-input__trailing-icon":"_text-input__trailing-icon_16ayx_87","text-input__counter":"_text-input__counter_16ayx_100","text-input--size-small":"_text-input--size-small_16ayx_107","text-input--size-medium":"_text-input--size-medium_16ayx_123","text-input--size-large":"_text-input--size-large_16ayx_143","text-input--has-leading-icon":"_text-input--has-leading-icon_16ayx_164","text-input--invalid":"_text-input--invalid_16ayx_182"};exports.default=t;
+//# sourceMappingURL=TextInput.module.scss.cjs.map

package/dist/components/text-input/TextInput.module.scss.cjs.map

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

package/dist/components/text-input/TextInput.module.scss.js

@@ -0,0 +1,20 @@
+import './TextInput.css';const t = {
+  "text-input": "_text-input_16ayx_2",
+  "text-input__wrapper": "_text-input__wrapper_16ayx_7",
+  "text-input__input": "_text-input__input_16ayx_18",
+  "text-input__label": "_text-input__label_16ayx_29",
+  "text-input--label-floated": "_text-input--label-floated_16ayx_49",
+  "text-input__inner": "_text-input__inner_16ayx_56",
+  "text-input__leading-icon": "_text-input__leading-icon_16ayx_87",
+  "text-input__trailing-icon": "_text-input__trailing-icon_16ayx_87",
+  "text-input__counter": "_text-input__counter_16ayx_100",
+  "text-input--size-small": "_text-input--size-small_16ayx_107",
+  "text-input--size-medium": "_text-input--size-medium_16ayx_123",
+  "text-input--size-large": "_text-input--size-large_16ayx_143",
+  "text-input--has-leading-icon": "_text-input--has-leading-icon_16ayx_164",
+  "text-input--invalid": "_text-input--invalid_16ayx_182"
+};
+export {
+  t as default
+};
+//# sourceMappingURL=TextInput.module.scss.js.map

package/dist/components/text-input/TextInput.module.scss.js.map

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

package/dist/components/text-input/index.cjs

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

package/dist/components/text-input/index.cjs.map

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

package/dist/components/text-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/text-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/text-input/index.js

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

package/dist/components/text-input/index.js.map

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

package/dist/components/thread-footer/ThreadFooter.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),u=require("../button/Button.cjs"),j=require("../icon/Icon.cjs"),__x=require("@mattermost/compass-icons/components/reply-outline.js"),x=__x?.default??__x,p=require("../mention-badge/MentionBadge.cjs"),v=require("../user-avatar-group/UserAvatarGroup.cjs"),a=require("./ThreadFooter.module.scss.cjs");function N({replyCount:s=3,avatars:d=[],badge:t="none",mentionCount:l=1,following:r=!1,lastReplyTime:o,onReply:f,onFollowToggle:c,hovered:n=!1,className:h="",..._}){const m=[a.default["thread-footer"],r?a.default["thread-footer--following"]:"",n?a.default["thread-footer--hovered"]:"",h].filter(Boolean).join(" "),i=t==="mention"?`${l} mention${l===1?"":"s"}`:t==="unread"?"Unread replies":void 0;return e.jsx("div",{className:m,..._,children:e.jsxs("div",{className:a.default["thread-footer__inner"],children:[e.jsxs("div",{className:a.default["thread-footer__avatars-group"],children:[i&&e.jsx("span",{className:a.default["thread-footer__status-hint"],children:i}),(t==="unread"||t==="mention")&&e.jsxs("div",{className:a.default["thread-footer__badge-container"],"aria-hidden":!0,children:[t==="unread"&&e.jsx("span",{className:a.default["thread-footer__unread-dot"]}),t==="mention"&&e.jsx("span",{className:a.default["thread-footer__mention-badge"],children:e.jsx(p.default,{count:l,location:"channel",size:"medium"})})]}),d.length>0&&e.jsx(v.default,{avatars:d,max:3,size:"20"})]}),e.jsxs("div",{className:a.default["thread-footer__buttons"],children:[e.jsx(u.default,{emphasis:"quaternary",size:"x-small",className:[a.default["thread-footer__reply-btn"],n?a.default["thread-footer__reply-btn--hovered"]:""].filter(Boolean).join(" "),onClick:f,"aria-label":`${s} repl${s===1?"y":"ies"}`,leadingIcon:e.jsx(j.default,{size:"12",glyph:e.jsx(x,{})}),children:e.jsxs("span",{className:a.default["thread-footer__btn-label"],children:[s," ",s===1?"reply":"replies"]})}),e.jsx("div",{className:a.default["thread-footer__divider"],"aria-hidden":!0}),e.jsx(u.default,{emphasis:"quaternary",size:"x-small",className:[a.default["thread-footer__follow-btn"],r?a.default["thread-footer__follow-btn--following"]:""].filter(Boolean).join(" "),onClick:c,"aria-pressed":r,"aria-label":r?"Unfollow thread":"Follow thread",children:r?"Following":"Follow"}),r&&o&&e.jsxs("div",{className:a.default["thread-footer__last-reply-group"],children:[e.jsx("div",{className:a.default["thread-footer__divider"],"aria-hidden":!0}),e.jsx("span",{className:a.default["thread-footer__last-reply"],children:o})]})]})]})})}exports.default=N;
+//# sourceMappingURL=ThreadFooter.cjs.map

package/dist/components/thread-footer/ThreadFooter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadFooter.cjs","sources":["../../../src/components/thread-footer/ThreadFooter.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport ReplyOutlineIcon from '@mattermost/compass-icons/components/reply-outline';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport UserAvatarGroup, {\n  type UserAvatarGroupItem,\n} from '@/components/user-avatar-group/UserAvatarGroup';\nimport styles from './ThreadFooter.module.scss';\n\nexport type ThreadFooterBadge = 'none' | 'unread' | 'mention';\n\nexport interface ThreadFooterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Reply count. Default: 3. */\n  replyCount?: number;\n  /** Participant avatars. Rendered with User Avatar Group (first 3 shown, overflow as +N). */\n  avatars?: UserAvatarGroupItem[];\n  /** Badge variant. Default: None. */\n  badge?: ThreadFooterBadge;\n  /** Shown when `badge` is Mention. Default: 1. */\n  mentionCount?: number;\n  /** Whether the current user is following the thread. Default: false. */\n  following?: boolean;\n  /** Last reply timestamp label. Shown on row hover when following. */\n  lastReplyTime?: string;\n  /** Called when Reply is clicked. */\n  onReply?: () => void;\n  /** Called when Follow/Following is clicked. */\n  onFollowToggle?: () => void;\n  /** Hover / active state for button highlight. Default: false. */\n  hovered?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * The Thread Footer is the reply summary bar at the bottom of a message. It shows\n * participants, reply count, follow state, and last-reply time — the information someone\n * needs to decide whether to dive in.\n */\nexport default function ThreadFooter({\n  replyCount = 3,\n  avatars = [],\n  badge = 'none',\n  mentionCount = 1,\n  following = false,\n  lastReplyTime,\n  onReply,\n  onFollowToggle,\n  hovered = false,\n  className = '',\n  ...rest\n}: ThreadFooterProps) {\n  const rootClass = [\n    styles['thread-footer'],\n    following ? styles['thread-footer--following'] : '',\n    hovered ? styles['thread-footer--hovered'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const badgeStatusHint =\n    badge === 'mention'\n      ? `${mentionCount} mention${mentionCount === 1 ? '' : 's'}`\n      : badge === 'unread'\n        ? 'Unread replies'\n        : undefined;\n\n  return (\n    <div className={rootClass} {...rest}>\n      <div className={styles['thread-footer__inner']}>\n        <div className={styles['thread-footer__avatars-group']}>\n          {badgeStatusHint && (\n            <span className={styles['thread-footer__status-hint']}>\n              {badgeStatusHint}\n            </span>\n          )}\n          {(badge === 'unread' || badge === 'mention') && (\n            <div\n              className={styles['thread-footer__badge-container']}\n              aria-hidden\n            >\n              {badge === 'unread' && (\n                <span className={styles['thread-footer__unread-dot']} />\n              )}\n              {badge === 'mention' && (\n                <span className={styles['thread-footer__mention-badge']}>\n                  <MentionBadge\n                    count={mentionCount}\n                    location=\"channel\"\n                    size=\"medium\"\n                  />\n                </span>\n              )}\n            </div>\n          )}\n\n          {avatars.length > 0 && (\n            <UserAvatarGroup avatars={avatars} max={3} size=\"20\" />\n          )}\n        </div>\n\n        {/* Buttons */}\n        <div className={styles['thread-footer__buttons']}>\n          {/* Reply button */}\n          <Button\n            emphasis=\"quaternary\"\n            size=\"x-small\"\n            className={[\n              styles['thread-footer__reply-btn'],\n              hovered ? styles['thread-footer__reply-btn--hovered'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onReply}\n            aria-label={`${replyCount} repl${replyCount === 1 ? 'y' : 'ies'}`}\n            leadingIcon={<Icon size=\"12\" glyph={<ReplyOutlineIcon />} />}\n          >\n            <span className={styles['thread-footer__btn-label']}>\n              {replyCount} {replyCount === 1 ? 'reply' : 'replies'}\n            </span>\n          </Button>\n\n          <div className={styles['thread-footer__divider']} aria-hidden />\n\n          {/* Follow / Following button */}\n          <Button\n            emphasis=\"quaternary\"\n            size=\"x-small\"\n            className={[\n              styles['thread-footer__follow-btn'],\n              following ? styles['thread-footer__follow-btn--following'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onFollowToggle}\n            aria-pressed={following}\n            aria-label={following ? 'Unfollow thread' : 'Follow thread'}\n          >\n            {following ? 'Following' : 'Follow'}\n          </Button>\n\n          {/* Last reply time — revealed on row hover when following */}\n          {following && lastReplyTime && (\n            <div className={styles['thread-footer__last-reply-group']}>\n              <div className={styles['thread-footer__divider']} aria-hidden />\n              <span className={styles['thread-footer__last-reply']}>\n                {lastReplyTime}\n              </span>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["ThreadFooter","replyCount","avatars","badge","mentionCount","following","lastReplyTime","onReply","onFollowToggle","hovered","className","rest","rootClass","styles","badgeStatusHint","jsx","jsxs","MentionBadge","UserAvatarGroup","Button","Icon","ReplyOutlineIcon"],"mappings":"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"}

package/dist/components/thread-footer/ThreadFooter.css

@@ -0,0 +1 @@
+._thread-footer_b5kji_2{--thread-footer-focus-ring-color: var(--focus-ring-color);display:flex;flex-direction:column;align-items:flex-start}._thread-footer__inner_b5kji_8{position:relative;display:inline-flex;align-items:center;border-radius:var(--radius-s)}._thread-footer__avatars-group_b5kji_14{display:inline-flex;align-items:center;padding-right:var(--spacing-xxxs)}._thread-footer__status-hint_b5kji_19{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._thread-footer__badge-container_b5kji_30{position:absolute;left:calc(var(--spacing-xxs) * -1);top:50%;transform:translate(-100%,-50%);display:flex;align-items:center;justify-content:flex-end}._thread-footer__unread-dot_b5kji_39{display:block;width:8px;height:8px;border-radius:var(--radius-full);background-color:var(--link-color)}._thread-footer__mention-badge_b5kji_46{display:inline-flex}._thread-footer__buttons_b5kji_49{display:inline-flex;align-items:center;gap:0}._thread-footer__reply-btn_b5kji_54,._thread-footer__follow-btn_b5kji_54{--focus-ring-color: var(--thread-footer-focus-ring-color)}._thread-footer_b5kji_2 ._thread-footer__reply-btn_b5kji_54[class*=button--emphasis-quaternary],._thread-footer_b5kji_2 ._thread-footer__follow-btn_b5kji_54:not(._thread-footer__follow-btn--following_b5kji_57)[class*=button--emphasis-quaternary]{color:rgba(var(--center-channel-color-rgb),.75)}._thread-footer_b5kji_2 ._thread-footer__reply-btn_b5kji_54[class*=button--emphasis-quaternary]:hover:not(:disabled),._thread-footer_b5kji_2 ._thread-footer__follow-btn_b5kji_54:not(._thread-footer__follow-btn--following_b5kji_57)[class*=button--emphasis-quaternary]:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._thread-footer_b5kji_2 ._thread-footer__reply-btn--hovered_b5kji_63[class*=button--emphasis-quaternary]{background-color:rgba(var(--center-channel-color-rgb),.08)}._thread-footer_b5kji_2 ._thread-footer__follow-btn--following_b5kji_57[class*=button--emphasis-quaternary]{color:var(--link-color);background-color:rgba(var(--link-color-rgb),.08)}._thread-footer_b5kji_2 ._thread-footer__follow-btn--following_b5kji_57[class*=button--emphasis-quaternary]:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._thread-footer__btn-label_b5kji_73{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:15px;white-space:nowrap}._thread-footer__divider_b5kji_80{box-sizing:border-box;width:1px;min-width:1px;max-width:1px;height:16px;padding:0;margin:0;border:0;background-color:rgba(var(--center-channel-color-rgb),.16);flex-shrink:0;transition:opacity var(--duration-quick) var(--ease-transition)}._thread-footer__buttons_b5kji_49:has(._thread-footer__follow-btn--following_b5kji_57)>._thread-footer__divider_b5kji_80:first-of-type,._thread-footer__buttons_b5kji_49:has(._thread-footer__follow-btn--following_b5kji_57)>._thread-footer__last-reply-group_b5kji_93>._thread-footer__divider_b5kji_80{opacity:0}._thread-footer__buttons_b5kji_49:not(:has(._thread-footer__follow-btn--following_b5kji_57)):has(._thread-footer__reply-btn_b5kji_54:hover,._thread-footer__reply-btn--hovered_b5kji_63,._thread-footer__reply-btn_b5kji_54:focus-visible,._thread-footer__follow-btn_b5kji_54:hover,._thread-footer__follow-btn_b5kji_54:focus-visible)>._thread-footer__divider_b5kji_80:first-of-type{opacity:0}._thread-footer__last-reply-group_b5kji_93{display:inline-flex;align-items:center;gap:0;overflow:hidden;max-width:0;opacity:0;transition:max-width var(--duration-quick) var(--ease-transition),opacity var(--duration-quick) var(--ease-transition)}._thread-footer--following_b5kji_112:hover ._thread-footer__last-reply-group_b5kji_93,._thread-footer--following_b5kji_112:focus-within ._thread-footer__last-reply-group_b5kji_93,._thread-footer--following_b5kji_112._thread-footer--hovered_b5kji_112 ._thread-footer__last-reply-group_b5kji_93{max-width:10rem;opacity:1}._thread-footer__last-reply_b5kji_93{padding:4.5px var(--spacing-s);color:rgba(var(--center-channel-color-rgb),.64);font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:15px;white-space:nowrap}

package/dist/components/thread-footer/ThreadFooter.d.ts

@@ -0,0 +1,32 @@
+import { HTMLAttributes } from 'react';
+import { UserAvatarGroupItem } from '../user-avatar-group/UserAvatarGroup';
+export type ThreadFooterBadge = 'none' | 'unread' | 'mention';
+export interface ThreadFooterProps extends HTMLAttributes<HTMLDivElement> {
+    /** Reply count. Default: 3. */
+    replyCount?: number;
+    /** Participant avatars. Rendered with User Avatar Group (first 3 shown, overflow as +N). */
+    avatars?: UserAvatarGroupItem[];
+    /** Badge variant. Default: None. */
+    badge?: ThreadFooterBadge;
+    /** Shown when `badge` is Mention. Default: 1. */
+    mentionCount?: number;
+    /** Whether the current user is following the thread. Default: false. */
+    following?: boolean;
+    /** Last reply timestamp label. Shown on row hover when following. */
+    lastReplyTime?: string;
+    /** Called when Reply is clicked. */
+    onReply?: () => void;
+    /** Called when Follow/Following is clicked. */
+    onFollowToggle?: () => void;
+    /** Hover / active state for button highlight. Default: false. */
+    hovered?: boolean;
+    /** Optional CSS class name. */
+    className?: string;
+}
+/**
+ * The Thread Footer is the reply summary bar at the bottom of a message. It shows
+ * participants, reply count, follow state, and last-reply time — the information someone
+ * needs to decide whether to dive in.
+ */
+export default function ThreadFooter({ replyCount, avatars, badge, mentionCount, following, lastReplyTime, onReply, onFollowToggle, hovered, className, ...rest }: ThreadFooterProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThreadFooter.d.ts.map

package/dist/components/thread-footer/ThreadFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadFooter.d.ts","sourceRoot":"","sources":["../../../src/components/thread-footer/ThreadFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,OAAwB,EACtB,KAAK,mBAAmB,EACzB,MAAM,8CAA8C,CAAC;AAGtD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE9D,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4FAA4F;IAC5F,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,oCAAoC;IACpC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,UAAc,EACd,OAAY,EACZ,KAAc,EACd,YAAgB,EAChB,SAAiB,EACjB,aAAa,EACb,OAAO,EACP,cAAc,EACd,OAAe,EACf,SAAc,EACd,GAAG,IAAI,EACR,EAAE,iBAAiB,2CAwGnB"}