@mattermost/compass-ui 0.1.0-alpha.3 → 0.1.0-alpha.5

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

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

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

@@ -1 +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      ...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[`textArea--size-${toKebab(size)}`];\n    const invalidClass = invalid ? styles['textArea--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['textArea--label-floated'] : '';\n\n    const rootClass = [\n      styles.textArea,\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.textArea__wrapper}>\n          {label != null && (\n            <label className={styles.textArea__label} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <textarea\n            ref={ref}\n            id={id}\n            className={styles.textArea__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={counterId}\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.textArea__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","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":";;;;AA8BA,MAAMA,IAAWC;AAAA,EACf,SACE;AAAA,IACE,WAAAC,IAAY;AAAA,IACZ,MAAAC,IAAO;AAAA,IACP,OAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,WAAAC;AAAA,IACA,oBAAAC,IAAqB;AAAA,IACrB,IAAIC;AAAA,IACJ,OAAOC;AAAA,IACP,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAAcC,EAAA,GACdC,IAAKd,KAAUY,GAEfG,IAAed,MAAc,QAC7B,CAACe,GAAmBC,CAAoB,IAAIC;AAAA,MAChDhB,KAAgB;AAAA,IAAA,GAEZiB,IAAQJ,IAAgBd,IAAuBe,GAC/CI,IAAWD,KAAS,QAAQA,MAAU,IAEtC,CAACE,GAAWC,CAAY,IAAIJ,EAAS,EAAK,GAC1CK,IAAeF,KAAaD,GAE5BI,IAAcC;AAAA,MAClB,CAACC,MAA6C;AAC5C,QAAAJ,EAAa,EAAI,GACjBlB,KAAA,QAAAA,EAAUsB;AAAA,MACZ;AAAA,MACA,CAACtB,CAAO;AAAA,IAAA,GAEJuB,IAAaF;AAAA,MACjB,CAACC,MAA6C;AAC5C,QAAAJ,EAAa,EAAK,GAClBjB,KAAA,QAAAA,EAASqB;AAAA,MACX;AAAA,MACA,CAACrB,CAAM;AAAA,IAAA,GAEHuB,IAAeH;AAAA,MACnB,CAACC,MAAwC;AACvC,QAAKX,KAAcE,EAAqBS,EAAE,OAAO,KAAK,GACtDpB,KAAA,QAAAA,EAAWoB;AAAA,MACb;AAAA,MACA,CAACX,GAAcT,CAAQ;AAAA,IAAA,GAGnBuB,IAAYC,EAAO,kBAAkBC,EAAQpC,CAAI,CAAC,EAAE,GACpDqC,IAAenC,IAAUiC,EAAO,mBAAmB,IAAI,IACvDG,IACJrC,KAAS,QAAQ2B,IAAeO,EAAO,yBAAyB,IAAI,IAEhEI,IAAY;AAAA,MAChBJ,EAAO;AAAA,MACPD;AAAA,MACAG;AAAA,MACAC;AAAA,MACAvC;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELyC,IAAgB,OAAOhB,KAAU,WAAWA,EAAM,SAAS,GAC3DiB,IACJrC,KAAsBD,KAAa,OAAO,GAAGgB,CAAE,aAAa;AAE9D,WACE,gBAAAuB,EAAC,OAAA,EAAI,WAAWH,GACd,UAAA;AAAA,MAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWP,EAAO,mBACpB,UAAA;AAAA,QAAAlC,KAAS,0BACP,SAAA,EAAM,WAAWkC,EAAO,iBAAiB,SAAShB,GAChD,UAAAlB,EAAA,CACH;AAAA,QAEF,gBAAA0C;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAA3B;AAAA,YACA,IAAAG;AAAA,YACA,WAAWgB,EAAO;AAAA,YAClB,OAAOf,IAAed,IAAY;AAAA,YAClC,cAAcc,IAAe,SAAYb;AAAA,YACzC,aAAAC;AAAA,YACA,WAAAL;AAAA,YACA,UAAAS;AAAA,YACA,UAAAC;AAAA,YACA,MAAAC;AAAA,YACA,gBAAcZ,IAAU,KAAO;AAAA,YAC/B,oBAAkBuC;AAAA,YAClB,SAASZ;AAAA,YACT,QAAQG;AAAA,YACR,UAAUC;AAAA,YACT,GAAGlB;AAAA,UAAA;AAAA,QAAA;AAAA,MACN,GACF;AAAA,MACCX,KAAsBD,KAAa,QAClC,gBAAAuC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAID;AAAA,UACJ,WAAWN,EAAO;AAAA,UAClB,aAAU;AAAA,UAET,UAAA;AAAA,YAAAK;AAAA,YAAc;AAAA,YAAIrC;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACrB,GAEJ;AAAA,EAEJ;AACF;"}
+{"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.css

@@ -1 +1 @@
-._textArea_ewczf_2{display:flex;flex-direction:column;width:100%}._textArea__wrapper_ewczf_7{position:relative;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)}._textArea_ewczf_2:has(._textArea__input_ewczf_14:not(:disabled)):hover:not(:focus-within) ._textArea__wrapper_ewczf_7{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._textArea_ewczf_2:has(._textArea__input_ewczf_14:focus-visible) ._textArea__wrapper_ewczf_7{box-shadow:inset 0 0 0 1px var(--button-bg),0 0 0 1px var(--button-bg)}._textArea_ewczf_2:has(._textArea__input_ewczf_14:disabled) ._textArea__wrapper_ewczf_7{background-color:var(--center-channel-bg);opacity:.56}._textArea__label_ewczf_24{position:absolute;left:var(--spacing-xs);top:var(--spacing-s);padding:0 var(--spacing-xxxs);margin:0;font-family:Open Sans,sans-serif;font-size:var(--font-size-100);line-height:var(--line-height-100);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:font-size var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._textArea--label-floated_ewczf_43 ._textArea__label_ewczf_24{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._textArea__input_ewczf_14{display:block;width:100%;margin:0;border:0;background:transparent;resize:vertical;font-family:Open Sans,sans-serif;font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-regular);color:var(--center-channel-color);box-sizing:border-box}._textArea__input_ewczf_14:focus{outline:none}._textArea__input_ewczf_14::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._textArea__input_ewczf_14:disabled{cursor:not-allowed;resize:none}._textArea__counter_ewczf_74{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)}._textArea--size-small_ewczf_81 ._textArea__input_ewczf_14{padding:var(--spacing-xs) var(--spacing-m);font-size:var(--font-size-75);line-height:var(--line-height-75)}._textArea--size-small_ewczf_81 ._textArea__label_ewczf_24{top:var(--spacing-xs);font-size:var(--font-size-75);line-height:var(--line-height-25)}._textArea--size-small_ewczf_81._textArea--label-floated_ewczf_43 ._textArea__label_ewczf_24{top:0;font-size:var(--font-size-25);line-height:14px}._textArea--size-medium_ewczf_96 ._textArea__input_ewczf_14{padding:var(--spacing-s) var(--spacing-l);font-size:var(--font-size-100);line-height:var(--line-height-100)}._textArea--size-medium_ewczf_96 ._textArea__label_ewczf_24{top:var(--spacing-s);left:var(--spacing-m);font-size:var(--font-size-100)}._textArea--size-medium_ewczf_96._textArea--label-floated_ewczf_43 ._textArea__label_ewczf_24{top:0;font-size:var(--font-size-25);line-height:14px}._textArea--size-large_ewczf_111 ._textArea__input_ewczf_14{padding:var(--spacing-m) var(--spacing-l);font-size:var(--font-size-200);line-height:var(--line-height-200)}._textArea--size-large_ewczf_111 ._textArea__label_ewczf_24{top:var(--spacing-m);left:var(--spacing-m);font-size:var(--font-size-200);line-height:var(--line-height-200)}._textArea--size-large_ewczf_111._textArea--label-floated_ewczf_43 ._textArea__label_ewczf_24{top:0;font-size:var(--font-size-25);line-height:14px}._textArea_ewczf_2:has(._textArea__input_ewczf_14:focus-visible) ._textArea__label_ewczf_24{color:var(--button-bg)}._textArea_ewczf_2:has(._textArea__label_ewczf_24):not(._textArea--label-floated_ewczf_43) ._textArea__input_ewczf_14::placeholder{color:transparent}._textArea--invalid_ewczf_133 ._textArea__wrapper_ewczf_7{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._textArea--invalid_ewczf_133:has(._textArea__input_ewczf_14:focus-visible) ._textArea__wrapper_ewczf_7{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 1px var(--error-text, var(--color-danger))}._textArea--invalid_ewczf_133 ._textArea__label_ewczf_24{color:var(--error-text, var(--color-danger))}._textArea--invalid_ewczf_133:has(._textArea__input_ewczf_14:focus-visible) ._textArea__label_ewczf_24{color:var(--error-text, var(--color-danger))}
+._text-area_1qev1_2{display:flex;flex-direction:column;width:100%}._text-area__wrapper_1qev1_7{position:relative;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)}._text-area_1qev1_2:has(._text-area__input_1qev1_14:not(:disabled)):hover:not(:focus-within) ._text-area__wrapper_1qev1_7{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._text-area_1qev1_2:has(._text-area__input_1qev1_14:focus-visible) ._text-area__wrapper_1qev1_7{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._text-area_1qev1_2:has(._text-area__input_1qev1_14:disabled) ._text-area__wrapper_1qev1_7{background-color:var(--center-channel-bg);opacity:.56}._text-area__label_1qev1_24{position:absolute;left:var(--spacing-xs);top:var(--spacing-s);padding:0 var(--spacing-xxxs);margin:0;font-family:Open Sans,sans-serif;font-size:var(--font-size-100);line-height:var(--line-height-100);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:font-size var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._text-area--label-floated_1qev1_43 ._text-area__label_1qev1_24{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._text-area__input_1qev1_14{display:block;width:100%;margin:0;border:0;background:transparent;resize:vertical;font-family:Open Sans,sans-serif;font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-regular);color:var(--center-channel-color);box-sizing:border-box}._text-area__input_1qev1_14:focus{outline:none}._text-area__input_1qev1_14::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._text-area__input_1qev1_14:disabled{cursor:not-allowed;resize:none}._text-area__counter_1qev1_74{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-area--size-small_1qev1_81 ._text-area__input_1qev1_14{padding:var(--spacing-xs) var(--spacing-m);font-size:var(--font-size-75);line-height:var(--line-height-75)}._text-area--size-small_1qev1_81 ._text-area__label_1qev1_24{top:var(--spacing-xs);font-size:var(--font-size-75);line-height:var(--line-height-25)}._text-area--size-small_1qev1_81._text-area--label-floated_1qev1_43 ._text-area__label_1qev1_24{top:0;font-size:var(--font-size-25);line-height:14px}._text-area--size-medium_1qev1_96 ._text-area__input_1qev1_14{padding:var(--spacing-s) var(--spacing-l);font-size:var(--font-size-100);line-height:var(--line-height-100)}._text-area--size-medium_1qev1_96 ._text-area__label_1qev1_24{top:var(--spacing-s);left:var(--spacing-m);font-size:var(--font-size-100)}._text-area--size-medium_1qev1_96._text-area--label-floated_1qev1_43 ._text-area__label_1qev1_24{top:0;font-size:var(--font-size-25);line-height:14px}._text-area--size-large_1qev1_111 ._text-area__input_1qev1_14{padding:var(--spacing-m) var(--spacing-l);font-size:var(--font-size-200);line-height:var(--line-height-200)}._text-area--size-large_1qev1_111 ._text-area__label_1qev1_24{top:var(--spacing-m);left:var(--spacing-m);font-size:var(--font-size-200);line-height:var(--line-height-200)}._text-area--size-large_1qev1_111._text-area--label-floated_1qev1_43 ._text-area__label_1qev1_24{top:0;font-size:var(--font-size-25);line-height:14px}._text-area_1qev1_2:has(._text-area__input_1qev1_14:focus-visible) ._text-area__label_1qev1_24{color:var(--button-bg)}._text-area_1qev1_2:has(._text-area__label_1qev1_24):not(._text-area--label-floated_1qev1_43) ._text-area__input_1qev1_14::placeholder{color:transparent}._text-area--invalid_1qev1_133 ._text-area__wrapper_1qev1_7{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._text-area--invalid_1qev1_133:has(._text-area__input_1qev1_14:focus-visible) ._text-area__wrapper_1qev1_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-area--invalid_1qev1_133 ._text-area__label_1qev1_24{color:var(--error-text, var(--color-danger))}._text-area--invalid_1qev1_133:has(._text-area__input_1qev1_14:focus-visible) ._text-area__label_1qev1_24{color:var(--error-text, var(--color-danger))}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./TextArea.module.css');const e="_textArea_ewczf_2",t="_textArea__wrapper_ewczf_7",_="_textArea__input_ewczf_14",a="_textArea__label_ewczf_24",r="_textArea__counter_ewczf_74",x={textArea:e,textArea__wrapper:t,textArea__input:_,textArea__label:a,"textArea--label-floated":"_textArea--label-floated_ewczf_43",textArea__counter:r,"textArea--size-small":"_textArea--size-small_ewczf_81","textArea--size-medium":"_textArea--size-medium_ewczf_96","textArea--size-large":"_textArea--size-large_ewczf_111","textArea--invalid":"_textArea--invalid_ewczf_133"};exports.default=x;exports.textArea=e;exports.textArea__counter=r;exports.textArea__input=_;exports.textArea__label=a;exports.textArea__wrapper=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./TextArea.module.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.js

@@ -1,21 +1,16 @@
-import './TextArea.module.css';const e = "_textArea_ewczf_2", t = "_textArea__wrapper_ewczf_7", _ = "_textArea__input_ewczf_14", a = "_textArea__label_ewczf_24", r = "_textArea__counter_ewczf_74", x = {
-  textArea: e,
-  textArea__wrapper: t,
-  textArea__input: _,
-  textArea__label: a,
-  "textArea--label-floated": "_textArea--label-floated_ewczf_43",
-  textArea__counter: r,
-  "textArea--size-small": "_textArea--size-small_ewczf_81",
-  "textArea--size-medium": "_textArea--size-medium_ewczf_96",
-  "textArea--size-large": "_textArea--size-large_ewczf_111",
-  "textArea--invalid": "_textArea--invalid_ewczf_133"
+import './TextArea.module.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 {
-  x as default,
-  e as textArea,
-  r as textArea__counter,
-  _ as textArea__input,
-  a as textArea__label,
-  t as textArea__wrapper
+  e as default
 };
 //# sourceMappingURL=TextArea.module.scss.js.map

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

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

@@ -1 +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 { 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 (e.g. <Icon glyph={<SearchIcon />} size=\"16\" />). */\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. */\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      ...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[`textInput--size-${toKebab(size)}`];\n    const invalidClass = invalid ? styles['textInput--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['textInput--label-floated'] : '';\n    const hasLeadingClass =\n      leadingIcon != null ? styles['textInput--has-leading-icon'] : '';\n    const hasTrailingClass =\n      trailingIcon != null ? styles['textInput--has-trailing-icon'] : '';\n\n    const rootClass = [\n      styles.textInput,\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.textInput__wrapper}>\n          <label className={styles.textInput__inner}>\n            {label != null && (\n              <span className={styles.textInput__label}>{label}</span>\n            )}\n            {leadingIcon != null && (\n              <span className={styles.textInput__leadingIcon}>\n                {leadingIcon}\n              </span>\n            )}\n            <input\n              ref={setInputRef}\n              id={id}\n              className={styles.textInput__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={counterId}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              {...rest}\n            />\n            {trailingIcon != null && (\n              <span className={styles.textInput__trailingIcon}>\n                {trailingIcon}\n              </span>\n            )}\n          </label>\n        </div>\n        {showCharacterCount && maxLength != null && (\n          <div\n            id={counterId}\n            className={styles.textInput__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","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"],"mappings":"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"}
+{"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 { 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 (e.g. <Icon glyph={<SearchIcon />} size=\"16\" />). */\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. */\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                {leadingIcon}\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                {trailingIcon}\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"],"mappings":"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"}

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

@@ -1 +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;AAKf,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,qEAAqE;IACrE,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,qBAAqB;IACrB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED;;;GAGG;AACH,QAAA,MAAM,SAAS,6GAoJd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"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;AAKf,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,qEAAqE;IACrE,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,qBAAqB;IACrB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED;;;GAGG;AACH,QAAA,MAAM,SAAS,6GAuJd,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

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

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

@@ -1 +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 { 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 (e.g. <Icon glyph={<SearchIcon />} size=\"16\" />). */\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. */\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      ...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[`textInput--size-${toKebab(size)}`];\n    const invalidClass = invalid ? styles['textInput--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['textInput--label-floated'] : '';\n    const hasLeadingClass =\n      leadingIcon != null ? styles['textInput--has-leading-icon'] : '';\n    const hasTrailingClass =\n      trailingIcon != null ? styles['textInput--has-trailing-icon'] : '';\n\n    const rootClass = [\n      styles.textInput,\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.textInput__wrapper}>\n          <label className={styles.textInput__inner}>\n            {label != null && (\n              <span className={styles.textInput__label}>{label}</span>\n            )}\n            {leadingIcon != null && (\n              <span className={styles.textInput__leadingIcon}>\n                {leadingIcon}\n              </span>\n            )}\n            <input\n              ref={setInputRef}\n              id={id}\n              className={styles.textInput__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={counterId}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              {...rest}\n            />\n            {trailingIcon != null && (\n              <span className={styles.textInput__trailingIcon}>\n                {trailingIcon}\n              </span>\n            )}\n          </label>\n        </div>\n        {showCharacterCount && maxLength != null && (\n          <div\n            id={counterId}\n            className={styles.textInput__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","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"],"mappings":"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"}
+{"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 { 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 (e.g. <Icon glyph={<SearchIcon />} size=\"16\" />). */\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. */\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                {leadingIcon}\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                {trailingIcon}\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"],"mappings":";;;;AAsCA,MAAMA,KAAYC;AAAA,EAChB,SACE;AAAA,IACE,WAAAC,IAAY;AAAA,IACZ,MAAAC,IAAO;AAAA,IACP,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,WAAAC;AAAA,IACA,oBAAAC,IAAqB;AAAA,IACrB,IAAIC;AAAA,IACJ,OAAOC;AAAA,IACP,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAoBC;AAAA,IACpB,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAAcC,EAAA,GACdC,IAAKd,KAAUY,GACfG,IAAWC,EAAgC,IAAI,GAE/CC,IAAcC;AAAA,MAClB,CAACC,MAAkC;AAEjC,YADAJ,EAAS,UAAUI,GACf,OAAOR,KAAQ,YAAY;AAC7B,gBAAMS,IAAWT,EAAsCQ,CAAI;AAC3D,iBAAO,MAAM;AACX,YAAAJ,EAAS,UAAU,MACf,OAAOK,KAAY,cAAYA,EAAA;AAAA,UACrC;AAAA,QACF;AACA,QAAIT,QAAS,UAAUQ;AAAA,MACzB;AAAA,MACA,CAACR,CAAG;AAAA,IAAA,GAGAU,IAAepB,MAAc,QAC7B,CAACqB,GAAmBC,CAAoB,IAAIC;AAAA,MAChDtB,KAAgB;AAAA,IAAA,GAEZuB,IAAQJ,IAAgBpB,IAAuBqB,GAC/CI,IAAWD,KAAS,QAAQA,MAAU,IAEtC,CAACE,GAAWC,CAAY,IAAIJ,EAAS,EAAK,GAC1CK,IAAeF,KAAaD,GAE5BI,IAAcZ;AAAA,MAClB,CAAC,MAA0C;AACzC,QAAAU,EAAa,EAAI,GACjBxB,KAAA,QAAAA,EAAU;AAAA,MACZ;AAAA,MACA,CAACA,CAAO;AAAA,IAAA,GAEJ2B,IAAab;AAAA,MACjB,CAAC,MAA0C;AACzC,QAAAU,EAAa,EAAK,GAClBvB,KAAA,QAAAA,EAAS;AAAA,MACX;AAAA,MACA,CAACA,CAAM;AAAA,IAAA,GAEH2B,IAAed;AAAA,MACnB,CAAC,MAAqC;AACpC,QAAKG,KAAcE,EAAqB,EAAE,OAAO,KAAK,GACtDjB,KAAA,QAAAA,EAAW;AAAA,MACb;AAAA,MACA,CAACe,GAAcf,CAAQ;AAAA,IAAA,GAGnB2B,IAAYC,EAAO,oBAAoBC,EAAQ1C,CAAI,CAAC,EAAE,GACtD2C,IAAevC,IAAUqC,EAAO,qBAAqB,IAAI,IACzDG,IACJ3C,KAAS,QAAQmC,IAAeK,EAAO,2BAA2B,IAAI,IAClEI,IACJ3C,KAAe,OAAOuC,EAAO,8BAA8B,IAAI,IAC3DK,IACJ3C,KAAgB,OAAOsC,EAAO,+BAA+B,IAAI,IAE7DM,IAAY;AAAA,MAChBN,EAAO,YAAY;AAAA,MACnBD;AAAA,MACAG;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACA/C;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELiD,IAAgB,OAAOhB,KAAU,WAAWA,EAAM,SAAS,GAC3DiB,IACJ3C,KAAsBD,KAAa,OAAO,GAAGgB,CAAE,aAAa;AAE9D,WACE,gBAAA6B,EAAC,OAAA,EAAI,WAAWH,GACd,UAAA;AAAA,MAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWV,EAAO,qBAAqB,GAC1C,4BAAC,SAAA,EAAM,WAAWA,EAAO,mBAAmB,GACzC,UAAA;AAAA,QAAAxC,KAAS,QACR,gBAAAkD,EAAC,QAAA,EAAK,WAAWV,EAAO,mBAAmB,GAAI,UAAAxC,GAAM;AAAA,QAEtDC,KAAe,QACd,gBAAAiD,EAAC,QAAA,EAAK,WAAWV,EAAO,0BAA0B,GAC/C,UAAAvC,GACH;AAAA,QAEF,gBAAAiD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK3B;AAAA,YACL,IAAAH;AAAA,YACA,WAAWoB,EAAO,mBAAmB;AAAA,YACrC,OAAOb,IAAepB,IAAY;AAAA,YAClC,cAAcoB,IAAe,SAAYnB;AAAA,YACzC,aAAAC;AAAA,YACA,WAAAL;AAAA,YACA,UAAAS;AAAA,YACA,UAAAC;AAAA,YACA,gBAAcX,IAAU,KAAO;AAAA,YAC/B,oBACE,CAACY,GAAaiC,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAAA,YAExD,SAASZ;AAAA,YACT,QAAQC;AAAA,YACR,UAAUC;AAAA,YACT,GAAGtB;AAAA,UAAA;AAAA,QAAA;AAAA,QAELd,KAAgB,QACf,gBAAAgD,EAAC,QAAA,EAAK,WAAWV,EAAO,2BAA2B,GAChD,UAAAtC,EAAA,CACH;AAAA,MAAA,EAAA,CAEJ,EAAA,CACF;AAAA,MACCG,KAAsBD,KAAa,QAClC,gBAAA6C;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAID;AAAA,UACJ,WAAWR,EAAO,qBAAqB;AAAA,UACvC,aAAU;AAAA,UAET,UAAA;AAAA,YAAAO;AAAA,YAAc;AAAA,YAAI3C;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACrB,GAEJ;AAAA,EAEJ;AACF;"}