@mattermost/compass-ui 0.1.0-alpha.15 → 0.1.0-alpha.17

package/dist/components/switch/Switch.css

@@ -1 +1 @@
-._switch_3fpma_2{display:flex;align-items:flex-start;width:100%;gap:var(--spacing-m);font-family:var(--font-family-body);font-weight:var(--font-weight-regular);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._switch_3fpma_2:has(._switch__input_3fpma_13:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._switch_3fpma_2:has(._switch__input_3fpma_13:disabled) ._switch__secondary-label_3fpma_17{color:rgba(var(--center-channel-color-rgb),.56)}._switch__input_3fpma_13{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;opacity:0;width:100%;height:100%;border:0;cursor:inherit}._switch__input_3fpma_13:focus-visible{outline:none}._switch__labels_3fpma_34{display:flex;flex-direction:column;flex:1 1 0;justify-content:center;min-width:0}._switch__label_3fpma_34{line-height:1}._switch__secondary-label_3fpma_17{color:rgba(var(--center-channel-color-rgb),.72);margin-top:var(--spacing-xxxxs)}._switch__track_3fpma_48{position:relative;flex-shrink:0;display:block;box-sizing:border-box;background-color:rgba(var(--center-channel-color-rgb),.32);border-radius:var(--radius-pill);transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._switch__track_3fpma_48:has(._switch__input_3fpma_13:focus-visible){box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._switch_3fpma_2:has(._switch__input_3fpma_13:not(:disabled)):hover ._switch__track_3fpma_48{background-color:rgba(var(--center-channel-color-rgb),.4)}._switch__track_3fpma_48:has(._switch__input_3fpma_13:checked){background-color:var(--button-bg)}._switch_3fpma_2:has(._switch__input_3fpma_13:not(:disabled)):hover ._switch__track_3fpma_48:has(._switch__input_3fpma_13:checked){background-color:var(--button-bg)}._switch__track_3fpma_48:has(._switch__input_3fpma_13:focus-visible:checked){box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._switch__track_3fpma_48:has(._switch__input_3fpma_13:disabled){opacity:.32}._switch__track_3fpma_48:has(._switch__input_3fpma_13:disabled:checked){background-color:rgba(var(--center-channel-color-rgb),.32)}._switch__knob_3fpma_78{position:absolute;left:2px;top:50%;transform:translateY(-50%) translate(0);border-radius:var(--radius-pill);background-color:var(--button-color);box-shadow:var(--elevation-1);transition:transform var(--duration-quick) var(--ease-transition);pointer-events:none}._switch--size-small_3fpma_89 ._switch__track_3fpma_48{width:26px;height:16px}._switch--size-small_3fpma_89 ._switch__track_3fpma_48:has(._switch__input_3fpma_13:checked) ._switch__knob_3fpma_78{transform:translateY(-50%) translate(10px)}._switch--size-small_3fpma_89 ._switch__knob_3fpma_78{width:12px;height:12px}._switch--size-small_3fpma_89 ._switch__label_3fpma_34,._switch--size-small_3fpma_89 ._switch__secondary-label_3fpma_17{font-size:var(--font-size-75);line-height:var(--line-height-75)}._switch--size-medium_3fpma_108 ._switch__track_3fpma_48{width:32px;height:20px}._switch--size-medium_3fpma_108 ._switch__track_3fpma_48:has(._switch__input_3fpma_13:checked) ._switch__knob_3fpma_78{transform:translateY(-50%) translate(12px)}._switch--size-medium_3fpma_108 ._switch__knob_3fpma_78{width:16px;height:16px}._switch--size-medium_3fpma_108 ._switch__label_3fpma_34{font-size:var(--font-size-100);line-height:var(--line-height-100)}._switch--size-medium_3fpma_108 ._switch__secondary-label_3fpma_17{font-size:var(--font-size-75);line-height:var(--line-height-75)}._switch--size-large_3fpma_127 ._switch__track_3fpma_48{width:40px;height:24px}._switch--size-large_3fpma_127 ._switch__track_3fpma_48:has(._switch__input_3fpma_13:checked) ._switch__knob_3fpma_78{transform:translateY(-50%) translate(16px)}._switch--size-large_3fpma_127 ._switch__knob_3fpma_78{width:20px;height:20px}._switch--size-large_3fpma_127 ._switch__label_3fpma_34{font-size:var(--font-size-200);line-height:var(--line-height-200)}._switch--size-large_3fpma_127 ._switch__secondary-label_3fpma_17{font-size:var(--font-size-100);line-height:var(--line-height-100)}._switch--semi-bold_3fpma_146 ._switch__label_3fpma_34{font-weight:var(--font-weight-semibold)}._switch--with-secondary_3fpma_149{align-items:center}._switch--with-secondary_3fpma_149 ._switch__labels_3fpma_34{padding-top:0;padding-bottom:0}
+._switch_1y6ud_2{display:flex;align-items:flex-start;width:100%;gap:var(--spacing-m);font-family:var(--font-family-body);font-weight:var(--font-weight-regular);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._switch_1y6ud_2._switch_1y6ud_2{margin:0}._switch_1y6ud_2:has(._switch__input_1y6ud_16:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._switch_1y6ud_2:has(._switch__input_1y6ud_16:disabled) ._switch__secondary-label_1y6ud_20{color:rgba(var(--center-channel-color-rgb),.56)}._switch__input_1y6ud_16{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;opacity:0;width:100%;height:100%;border:0;cursor:inherit}._switch__input_1y6ud_16:focus-visible{outline:none}._switch__labels_1y6ud_37{display:flex;flex-direction:column;flex:1 1 0;justify-content:center;min-width:0}._switch__label_1y6ud_37{line-height:1}._switch__secondary-label_1y6ud_20{color:rgba(var(--center-channel-color-rgb),.72);margin-top:var(--spacing-xxxxs)}._switch__track_1y6ud_51{position:relative;flex-shrink:0;display:block;box-sizing:border-box;background-color:rgba(var(--center-channel-color-rgb),.32);border-radius:var(--radius-pill);transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._switch__track_1y6ud_51:has(._switch__input_1y6ud_16:focus-visible){box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._switch_1y6ud_2:has(._switch__input_1y6ud_16:not(:disabled)):hover ._switch__track_1y6ud_51{background-color:rgba(var(--center-channel-color-rgb),.4)}._switch__track_1y6ud_51:has(._switch__input_1y6ud_16:checked){background-color:var(--button-bg)}._switch_1y6ud_2:has(._switch__input_1y6ud_16:not(:disabled)):hover ._switch__track_1y6ud_51:has(._switch__input_1y6ud_16:checked){background-color:var(--button-bg)}._switch__track_1y6ud_51:has(._switch__input_1y6ud_16:focus-visible:checked){box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._switch__track_1y6ud_51:has(._switch__input_1y6ud_16:disabled){opacity:.32}._switch__track_1y6ud_51:has(._switch__input_1y6ud_16:disabled:checked){background-color:rgba(var(--center-channel-color-rgb),.32)}._switch__knob_1y6ud_81{position:absolute;left:2px;top:50%;transform:translateY(-50%) translate(0);border-radius:var(--radius-pill);background-color:var(--button-color);box-shadow:var(--elevation-1);transition:transform var(--duration-quick) var(--ease-transition);pointer-events:none}._switch--size-small_1y6ud_92 ._switch__track_1y6ud_51{width:26px;height:16px}._switch--size-small_1y6ud_92 ._switch__track_1y6ud_51:has(._switch__input_1y6ud_16:checked) ._switch__knob_1y6ud_81{transform:translateY(-50%) translate(10px)}._switch--size-small_1y6ud_92 ._switch__knob_1y6ud_81{width:12px;height:12px}._switch--size-small_1y6ud_92 ._switch__label_1y6ud_37,._switch--size-small_1y6ud_92 ._switch__secondary-label_1y6ud_20{font-size:var(--font-size-75);line-height:var(--line-height-75)}._switch--size-medium_1y6ud_111 ._switch__track_1y6ud_51{width:32px;height:20px}._switch--size-medium_1y6ud_111 ._switch__track_1y6ud_51:has(._switch__input_1y6ud_16:checked) ._switch__knob_1y6ud_81{transform:translateY(-50%) translate(12px)}._switch--size-medium_1y6ud_111 ._switch__knob_1y6ud_81{width:16px;height:16px}._switch--size-medium_1y6ud_111 ._switch__label_1y6ud_37{font-size:var(--font-size-100);line-height:var(--line-height-100)}._switch--size-medium_1y6ud_111 ._switch__secondary-label_1y6ud_20{font-size:var(--font-size-75);line-height:var(--line-height-75)}._switch--size-large_1y6ud_130 ._switch__track_1y6ud_51{width:40px;height:24px}._switch--size-large_1y6ud_130 ._switch__track_1y6ud_51:has(._switch__input_1y6ud_16:checked) ._switch__knob_1y6ud_81{transform:translateY(-50%) translate(16px)}._switch--size-large_1y6ud_130 ._switch__knob_1y6ud_81{width:20px;height:20px}._switch--size-large_1y6ud_130 ._switch__label_1y6ud_37{font-size:var(--font-size-200);line-height:var(--line-height-200)}._switch--size-large_1y6ud_130 ._switch__secondary-label_1y6ud_20{font-size:var(--font-size-100);line-height:var(--line-height-100)}._switch--semi-bold_1y6ud_149 ._switch__label_1y6ud_37{font-weight:var(--font-weight-semibold)}._switch--with-secondary_1y6ud_152{align-items:center}._switch--with-secondary_1y6ud_152 ._switch__labels_1y6ud_37{padding-top:0;padding-bottom:0}

package/dist/components/switch/Switch.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Switch.css');const _="_switch__input_3fpma_13",s="_switch__labels_3fpma_34",t="_switch__label_3fpma_34",i="_switch__track_3fpma_48",c="_switch__knob_3fpma_78",e={switch:"_switch_3fpma_2",switch__input:_,"switch__secondary-label":"_switch__secondary-label_3fpma_17",switch__labels:s,switch__label:t,switch__track:i,switch__knob:c,"switch--size-small":"_switch--size-small_3fpma_89","switch--size-medium":"_switch--size-medium_3fpma_108","switch--size-large":"_switch--size-large_3fpma_127","switch--semi-bold":"_switch--semi-bold_3fpma_146","switch--with-secondary":"_switch--with-secondary_3fpma_149"};exports.default=e;exports.switch__input=_;exports.switch__knob=c;exports.switch__label=t;exports.switch__labels=s;exports.switch__track=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Switch.css');const _="_switch__input_1y6ud_16",s="_switch__labels_1y6ud_37",t="_switch__label_1y6ud_37",i="_switch__track_1y6ud_51",c="_switch__knob_1y6ud_81",e={switch:"_switch_1y6ud_2",switch__input:_,"switch__secondary-label":"_switch__secondary-label_1y6ud_20",switch__labels:s,switch__label:t,switch__track:i,switch__knob:c,"switch--size-small":"_switch--size-small_1y6ud_92","switch--size-medium":"_switch--size-medium_1y6ud_111","switch--size-large":"_switch--size-large_1y6ud_130","switch--semi-bold":"_switch--semi-bold_1y6ud_149","switch--with-secondary":"_switch--with-secondary_1y6ud_152"};exports.default=e;exports.switch__input=_;exports.switch__knob=c;exports.switch__label=t;exports.switch__labels=s;exports.switch__track=i;
 //# sourceMappingURL=Switch.module.scss.cjs.map

package/dist/components/switch/Switch.module.scss.js

@@ -1,19 +1,19 @@
-import './Switch.css';const _ = "_switch__input_3fpma_13", s = "_switch__labels_3fpma_34", t = "_switch__label_3fpma_34", i = "_switch__track_3fpma_48", c = "_switch__knob_3fpma_78", a = {
-  switch: "_switch_3fpma_2",
+import './Switch.css';const _ = "_switch__input_1y6ud_16", s = "_switch__labels_1y6ud_37", t = "_switch__label_1y6ud_37", i = "_switch__track_1y6ud_51", c = "_switch__knob_1y6ud_81", h = {
+  switch: "_switch_1y6ud_2",
   switch__input: _,
-  "switch__secondary-label": "_switch__secondary-label_3fpma_17",
+  "switch__secondary-label": "_switch__secondary-label_1y6ud_20",
   switch__labels: s,
   switch__label: t,
   switch__track: i,
   switch__knob: c,
-  "switch--size-small": "_switch--size-small_3fpma_89",
-  "switch--size-medium": "_switch--size-medium_3fpma_108",
-  "switch--size-large": "_switch--size-large_3fpma_127",
-  "switch--semi-bold": "_switch--semi-bold_3fpma_146",
-  "switch--with-secondary": "_switch--with-secondary_3fpma_149"
+  "switch--size-small": "_switch--size-small_1y6ud_92",
+  "switch--size-medium": "_switch--size-medium_1y6ud_111",
+  "switch--size-large": "_switch--size-large_1y6ud_130",
+  "switch--semi-bold": "_switch--semi-bold_1y6ud_149",
+  "switch--with-secondary": "_switch--with-secondary_1y6ud_152"
 };
 export {
-  a as default,
+  h as default,
   _ as switch__input,
   c as switch__knob,
   t as switch__label,

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),t=require("react"),E=require("../../utils/string.cjs"),e=require("./TextArea.module.scss.cjs"),G=t.forwardRef(function({className:m="",size:N="medium",label:o,invalid:v=!1,maxLength:d,showCharacterCount:x=!1,id:p,value:n,defaultValue:b,placeholder:q,onFocus:i,onBlur:r,onChange:c,disabled:y,readOnly:I,rows:S=3,"aria-describedby":T,...h},k){const A=t.useId(),f=p??A,l=n!==void 0,[C,R]=t.useState(b??""),u=l?n:C,V=u!=null&&u!=="",[g,_]=t.useState(!1),z=g||V,F=t.useCallback(a=>{_(!0),i==null||i(a)},[i]),M=t.useCallback(a=>{_(!1),r==null||r(a)},[r]),$=t.useCallback(a=>{l||R(a.target.value),c==null||c(a)},[l,c]),w=e.default[`text-area--size-${E.toKebab(N)}`],K=v?e.default["text-area--invalid"]:"",O=o!=null&&z?e.default["text-area--label-floated"]:"",U=[e.default["text-area"],w,K,O,m].filter(Boolean).join(" "),D=typeof u=="string"?u.length:0,j=x&&d!=null?`${f}-counter`:void 0;return s.jsxs("div",{className:U,children:[s.jsxs("div",{className:e.default["text-area__wrapper"],children:[o!=null&&s.jsx("label",{className:e.default["text-area__label"],htmlFor:f,children:o}),s.jsx("textarea",{ref:k,id:f,className:e.default["text-area__input"],value:l?n:void 0,defaultValue:l?void 0:b,placeholder:q,maxLength:d,disabled:y,readOnly:I,rows:S,"aria-invalid":v?!0:void 0,"aria-describedby":[T,j].filter(Boolean).join(" ")||void 0,onFocus:F,onBlur:M,onChange:$,...h})]}),x&&d!=null&&s.jsxs("div",{id:j,className:e.default["text-area__counter"],"aria-live":"polite",children:[D," / ",d]})]})});exports.default=G;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),s=require("react"),_=require("../field/fieldDescribedBy.cjs"),X=require("../field-message/FieldMessage.cjs"),Y=require("../../utils/string.cjs"),e=require("./TextArea.module.scss.cjs"),Z=s.forwardRef(function({className:F="",size:g="medium",label:u,invalid:M=!1,maxLength:l,showCharacterCount:f=!1,message:v,messageTone:j,id:h,value:x,defaultValue:m,placeholder:p,onFocus:i,onBlur:r,onChange:c,disabled:S,readOnly:T,rows:k=3,"aria-describedby":A,...R},V){const $=s.useId(),o=h??$,d=x!==void 0,[w,z]=s.useState(m??""),n=d?x:w,D=n!=null&&n!=="",[C,I]=s.useState(!1),K=C||D,O=s.useCallback(a=>{I(!0),i==null||i(a)},[i]),U=s.useCallback(a=>{I(!1),r==null||r(a)},[r]),B=s.useCallback(a=>{d||z(a.target.value),c==null||c(a)},[d,c]),N=_.isFieldInvalid(M,v,j),b=_.hasFieldMessage(v),E=e.default[`text-area--size-${Y.toKebab(g)}`],G=N?e.default["text-area--invalid"]:"",H=u!=null&&K?e.default["text-area--label-floated"]:"",J=[e.default["text-area"],E,G,H,F].filter(Boolean).join(" "),Q=typeof n=="string"?n.length:0,q=f&&l!=null?`${o}-counter`:void 0,y=b?`${o}-message`:void 0,W=j??"error";return t.jsxs("div",{className:J,children:[t.jsxs("div",{className:e.default["text-area__wrapper"],children:[u!=null&&t.jsx("label",{className:e.default["text-area__label"],htmlFor:o,children:u}),t.jsx("textarea",{ref:V,id:o,className:e.default["text-area__input"],value:d?x:void 0,defaultValue:d?void 0:m,placeholder:p,maxLength:l,disabled:S,readOnly:T,rows:k,"aria-invalid":N?!0:void 0,"aria-describedby":_.mergeFieldDescribedBy(A,y,q),onFocus:O,onBlur:U,onChange:B,...R})]}),(b||f&&l!=null)&&t.jsxs("div",{className:e.default["text-area__footer"],children:[b&&t.jsx(X.default,{id:y,className:e.default["text-area__footer-message"],message:v,tone:W}),f&&l!=null&&t.jsxs("div",{id:q,className:e.default["text-area__counter"],"aria-live":"polite",children:[Q," / ",l]})]})]})});exports.default=Z;
 //# sourceMappingURL=TextArea.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.cjs","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":"gPA8BMA,EAAWC,EAAAA,WACf,SACE,CACE,UAAAC,EAAY,GACZ,KAAAC,EAAO,SACP,MAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EACA,mBAAAC,EAAqB,GACrB,GAAIC,EACJ,MAAOC,EACP,aAAAC,EACA,YAAAC,EACA,QAAAC,EACA,OAAAC,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,EACP,mBAAoBC,EACpB,GAAGC,CAAA,EAELC,EACA,CACA,MAAMC,EAAcC,EAAAA,MAAA,EACdC,EAAKf,GAAUa,EAEfG,EAAef,IAAc,OAC7B,CAACgB,EAAmBC,CAAoB,EAAIC,EAAAA,SAChDjB,GAAgB,EAAA,EAEZkB,EAAQJ,EAAgBf,EAAuBgB,EAC/CI,EAAWD,GAAS,MAAQA,IAAU,GAEtC,CAACE,EAAWC,CAAY,EAAIJ,EAAAA,SAAS,EAAK,EAC1CK,EAAeF,GAAaD,EAE5BI,EAAcC,EAAAA,YACjBC,GAA6C,CAC5CJ,EAAa,EAAI,EACjBnB,GAAA,MAAAA,EAAUuB,EACZ,EACA,CAACvB,CAAO,CAAA,EAEJwB,EAAaF,EAAAA,YAChBC,GAA6C,CAC5CJ,EAAa,EAAK,EAClBlB,GAAA,MAAAA,EAASsB,EACX,EACA,CAACtB,CAAM,CAAA,EAEHwB,EAAeH,EAAAA,YAClBC,GAAwC,CAClCX,GAAcE,EAAqBS,EAAE,OAAO,KAAK,EACtDrB,GAAA,MAAAA,EAAWqB,EACb,EACA,CAACX,EAAcV,CAAQ,CAAA,EAGnBwB,EAAYC,EAAAA,QAAO,mBAAmBC,EAAAA,QAAQrC,CAAI,CAAC,EAAE,EACrDsC,EAAepC,EAAUkC,UAAO,oBAAoB,EAAI,GACxDG,EACJtC,GAAS,MAAQ4B,EAAeO,EAAAA,QAAO,0BAA0B,EAAI,GAEjEI,EAAY,CAChBJ,EAAAA,QAAO,WAAW,EAClBD,EACAG,EACAC,EACAxC,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEL0C,EAAgB,OAAOhB,GAAU,SAAWA,EAAM,OAAS,EAC3DiB,EACJtC,GAAsBD,GAAa,KAAO,GAAGiB,CAAE,WAAa,OAE9D,OACEuB,EAAAA,KAAC,MAAA,CAAI,UAAWH,EACd,SAAA,CAAAG,EAAAA,KAAC,MAAA,CAAI,UAAWP,EAAAA,QAAO,oBAAoB,EACxC,SAAA,CAAAnC,GAAS,YACP,QAAA,CAAM,UAAWmC,EAAAA,QAAO,kBAAkB,EAAG,QAAShB,EACpD,SAAAnB,CAAA,CACH,EAEF2C,EAAAA,IAAC,WAAA,CACC,IAAA3B,EACA,GAAAG,EACA,UAAWgB,EAAAA,QAAO,kBAAkB,EACpC,MAAOf,EAAef,EAAY,OAClC,aAAce,EAAe,OAAYd,EACzC,YAAAC,EACA,UAAAL,EACA,SAAAS,EACA,SAAAC,EACA,KAAAC,EACA,eAAcZ,EAAU,GAAO,OAC/B,mBACE,CAACa,EAAa2B,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAK,OAExD,QAASZ,EACT,OAAQG,EACR,SAAUC,EACT,GAAGlB,CAAA,CAAA,CACN,EACF,EACCZ,GAAsBD,GAAa,MAClCwC,EAAAA,KAAC,MAAA,CACC,GAAID,EACJ,UAAWN,EAAAA,QAAO,oBAAoB,EACtC,YAAU,SAET,SAAA,CAAAK,EAAc,MAAItC,CAAA,CAAA,CAAA,CACrB,EAEJ,CAEJ,CACF"}
+{"version":3,"file":"TextArea.cjs","sources":["../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import type { TextareaHTMLAttributes, ReactNode, ChangeEvent } from 'react';\nimport { forwardRef, useId, useState, useCallback } from 'react';\nimport {\n  hasFieldMessage,\n  isFieldInvalid,\n  mergeFieldDescribedBy,\n} from '@/components/field/fieldDescribedBy';\nimport FieldMessage from '@/components/field-message/FieldMessage';\nimport type { FieldMessageTone } from '@/components/field-message/FieldMessage';\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   * Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).\n   * Defaults to error tone (invalid chrome) when set without `messageTone`.\n   */\n  message?: ReactNode;\n  /** Visual tone for `message`. Default: `error` when `message` is set. */\n  messageTone?: FieldMessageTone;\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      message,\n      messageTone,\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 showInvalid = isFieldInvalid(invalid, message, messageTone);\n    const showMessage = hasFieldMessage(message);\n    const sizeClass = styles[`text-area--size-${toKebab(size)}`];\n    const invalidClass = showInvalid ? 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    const messageId = showMessage ? `${id}-message` : undefined;\n    const resolvedTone = messageTone ?? 'error';\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={showInvalid ? true : undefined}\n            aria-describedby={mergeFieldDescribedBy(\n              describedBy,\n              messageId,\n              counterId,\n            )}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onChange={handleChange}\n            {...rest}\n          />\n        </div>\n        {(showMessage || (showCharacterCount && maxLength != null)) && (\n          <div className={styles['text-area__footer']}>\n            {showMessage && (\n              <FieldMessage\n                id={messageId}\n                className={styles['text-area__footer-message']}\n                message={message}\n                tone={resolvedTone}\n              />\n            )}\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      </div>\n    );\n  },\n);\n\nexport default TextArea;\n"],"names":["TextArea","forwardRef","className","size","label","invalid","maxLength","showCharacterCount","message","messageTone","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","showInvalid","isFieldInvalid","showMessage","hasFieldMessage","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","rootClass","currentLength","counterId","messageId","resolvedTone","jsxs","jsx","mergeFieldDescribedBy","FieldMessage"],"mappings":"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"}

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

@@ -1 +1 @@
-._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))}
+._text-area_r07x5_2{display:flex;flex-direction:column;gap:var(--spacing-xs);width:100%}._text-area__wrapper_r07x5_8{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_r07x5_2:has(._text-area__input_r07x5_15:not(:disabled)):hover:not(:focus-within) ._text-area__wrapper_r07x5_8{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._text-area_r07x5_2:has(._text-area__input_r07x5_15:focus-visible) ._text-area__wrapper_r07x5_8{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._text-area_r07x5_2:has(._text-area__input_r07x5_15:disabled) ._text-area__wrapper_r07x5_8{background-color:var(--center-channel-bg);opacity:.56}._text-area__label_r07x5_25{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_r07x5_44 ._text-area__label_r07x5_25{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_r07x5_15{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_r07x5_15:focus{outline:none}._text-area__input_r07x5_15::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._text-area__input_r07x5_15:disabled{cursor:not-allowed;resize:none}._text-area__footer_r07x5_75{display:flex;align-items:flex-start;gap:var(--spacing-xs);width:100%}._text-area__footer-message_r07x5_81{flex:1 1 0;min-width:0}._text-area__counter_r07x5_85{flex-shrink:0;margin-inline-start:auto;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.64)}._text-area--size-small_r07x5_94 ._text-area__input_r07x5_15{padding:var(--spacing-xs) var(--spacing-m);font-size:var(--font-size-75);line-height:var(--line-height-75)}._text-area--size-small_r07x5_94 ._text-area__label_r07x5_25{top:var(--spacing-xs);font-size:var(--font-size-75);line-height:var(--line-height-25)}._text-area--size-small_r07x5_94._text-area--label-floated_r07x5_44 ._text-area__label_r07x5_25{top:0;font-size:var(--font-size-25);line-height:14px}._text-area--size-medium_r07x5_109 ._text-area__input_r07x5_15{padding:var(--spacing-s) var(--spacing-l);font-size:var(--font-size-100);line-height:var(--line-height-100)}._text-area--size-medium_r07x5_109 ._text-area__label_r07x5_25{top:var(--spacing-s);left:var(--spacing-m);font-size:var(--font-size-100)}._text-area--size-medium_r07x5_109._text-area--label-floated_r07x5_44 ._text-area__label_r07x5_25{top:0;font-size:var(--font-size-25);line-height:14px}._text-area--size-large_r07x5_124 ._text-area__input_r07x5_15{padding:var(--spacing-m) var(--spacing-l);font-size:var(--font-size-200);line-height:var(--line-height-200)}._text-area--size-large_r07x5_124 ._text-area__label_r07x5_25{top:var(--spacing-m);left:var(--spacing-m);font-size:var(--font-size-200);line-height:var(--line-height-200)}._text-area--size-large_r07x5_124._text-area--label-floated_r07x5_44 ._text-area__label_r07x5_25{top:0;font-size:var(--font-size-25);line-height:14px}._text-area_r07x5_2:has(._text-area__input_r07x5_15:focus-visible) ._text-area__label_r07x5_25{color:var(--button-bg)}._text-area_r07x5_2:has(._text-area__label_r07x5_25):not(._text-area--label-floated_r07x5_44) ._text-area__input_r07x5_15::placeholder{color:transparent}._text-area--invalid_r07x5_146 ._text-area__wrapper_r07x5_8{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._text-area--invalid_r07x5_146:has(._text-area__input_r07x5_15:focus-visible) ._text-area__wrapper_r07x5_8{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_r07x5_146 ._text-area__label_r07x5_25{color:var(--error-text, var(--color-danger))}._text-area--invalid_r07x5_146:has(._text-area__input_r07x5_15:focus-visible) ._text-area__label_r07x5_25{color:var(--error-text, var(--color-danger))}

package/dist/components/text-area/TextArea.d.ts

@@ -1,4 +1,5 @@
 import { TextareaHTMLAttributes, ReactNode } from 'react';
+import { FieldMessageTone } from '../field-message/FieldMessage';
 export type TextAreaSize = 'small' | 'medium' | 'large';
 export interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
     /** Optional CSS class name. */
@@ -13,6 +14,13 @@ export interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaE
     showCharacterCount?: boolean;
     /** Size variant. Default: Medium. */
     size?: TextAreaSize;
+    /**
+     * Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).
+     * Defaults to error tone (invalid chrome) when set without `messageTone`.
+     */
+    message?: ReactNode;
+    /** Visual tone for `message`. Default: `error` when `message` is set. */
+    messageTone?: FieldMessageTone;
 }
 /**
  * Text Areas let people write long-form text that spans multiple lines — descriptions,

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/text-area/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAK5E,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,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,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,qCAAqC;IACrC,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED;;;;GAIG;AACH,QAAA,MAAM,QAAQ,+GAuHb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/text-area/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAQ5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAI/E,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,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,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,qCAAqC;IACrC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yEAAyE;IACzE,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAChC;AAED;;;;GAIG;AACH,QAAA,MAAM,QAAQ,+GA2Ib,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -1,94 +1,113 @@
-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 { jsxs as c, jsx as x } from "react/jsx-runtime";
+import { forwardRef as B, useId as C, useState as h, useCallback as _ } from "react";
+import { mergeFieldDescribedBy as P, hasFieldMessage as L, isFieldInvalid as ee } from "../field/fieldDescribedBy.js";
+import te from "../field-message/FieldMessage.js";
+import { toKebab as ae } from "../../utils/string.js";
 import e from "./TextArea.module.scss.js";
-const L = O(
+const ne = B(
   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,
+    size: M = "medium",
+    label: n,
+    invalid: V = !1,
+    maxLength: a,
+    showCharacterCount: f = !1,
+    message: u,
+    messageTone: b,
+    id: $,
+    value: m,
+    defaultValue: p,
+    placeholder: g,
+    onFocus: l,
+    onBlur: i,
+    onChange: r,
+    disabled: w,
     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(
+    "aria-describedby": T,
+    ...k
+  }, D) {
+    const K = C(), o = $ ?? K, s = m !== void 0, [R, S] = h(
+      p ?? ""
+    ), d = s ? m : R, U = d != null && d !== "", [q, I] = h(!1), E = q || U, G = _(
       (t) => {
-        b(!0), s == null || s(t);
+        I(!0), l == null || l(t);
       },
-      [s]
-    ), q = f(
+      [l]
+    ), H = _(
       (t) => {
-        b(!1), r == null || r(t);
+        I(!1), i == null || i(t);
       },
-      [r]
-    ), D = f(
+      [i]
+    ), J = _(
       (t) => {
-        a || C(t.target.value), i == null || i(t);
+        s || S(t.target.value), r == null || r(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 = [
+      [s, r]
+    ), N = ee(V, u, b), v = L(u), O = e[`text-area--size-${ae(M)}`], Q = N ? e["text-area--invalid"] : "", W = n != null && E ? e["text-area--label-floated"] : "", X = [
       e["text-area"],
-      E,
-      G,
-      H,
+      O,
+      Q,
+      W,
       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__ */ _(
+    ].filter(Boolean).join(" "), Y = typeof d == "string" ? d.length : 0, F = f && a != null ? `${o}-counter` : void 0, y = v ? `${o}-message` : void 0, Z = b ?? "error";
+    return /* @__PURE__ */ c("div", { className: X, children: [
+      /* @__PURE__ */ c("div", { className: e["text-area__wrapper"], children: [
+        n != null && /* @__PURE__ */ x("label", { className: e["text-area__label"], htmlFor: o, children: n }),
+        /* @__PURE__ */ x(
           "textarea",
           {
-            ref: $,
-            id: n,
+            ref: D,
+            id: o,
             className: e["text-area__input"],
-            value: a ? c : void 0,
-            defaultValue: a ? void 0 : x,
-            placeholder: h,
-            maxLength: l,
-            disabled: V,
+            value: s ? m : void 0,
+            defaultValue: s ? void 0 : p,
+            placeholder: g,
+            maxLength: a,
+            disabled: w,
             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
+            "aria-invalid": N ? !0 : void 0,
+            "aria-describedby": P(
+              T,
+              y,
+              F
+            ),
+            onFocus: G,
+            onBlur: H,
+            onChange: J,
+            ...k
           }
         )
       ] }),
-      m && l != null && /* @__PURE__ */ u(
-        "div",
-        {
-          id: p,
-          className: e["text-area__counter"],
-          "aria-live": "polite",
-          children: [
-            M,
-            " / ",
-            l
-          ]
-        }
-      )
+      (v || f && a != null) && /* @__PURE__ */ c("div", { className: e["text-area__footer"], children: [
+        v && /* @__PURE__ */ x(
+          te,
+          {
+            id: y,
+            className: e["text-area__footer-message"],
+            message: u,
+            tone: Z
+          }
+        ),
+        f && a != null && /* @__PURE__ */ c(
+          "div",
+          {
+            id: F,
+            className: e["text-area__counter"],
+            "aria-live": "polite",
+            children: [
+              Y,
+              " / ",
+              a
+            ]
+          }
+        )
+      ] })
     ] });
   }
 );
 export {
-  L as default
+  ne 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      '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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"}
+{"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 {\n  hasFieldMessage,\n  isFieldInvalid,\n  mergeFieldDescribedBy,\n} from '@/components/field/fieldDescribedBy';\nimport FieldMessage from '@/components/field-message/FieldMessage';\nimport type { FieldMessageTone } from '@/components/field-message/FieldMessage';\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   * Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).\n   * Defaults to error tone (invalid chrome) when set without `messageTone`.\n   */\n  message?: ReactNode;\n  /** Visual tone for `message`. Default: `error` when `message` is set. */\n  messageTone?: FieldMessageTone;\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      message,\n      messageTone,\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 showInvalid = isFieldInvalid(invalid, message, messageTone);\n    const showMessage = hasFieldMessage(message);\n    const sizeClass = styles[`text-area--size-${toKebab(size)}`];\n    const invalidClass = showInvalid ? 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    const messageId = showMessage ? `${id}-message` : undefined;\n    const resolvedTone = messageTone ?? 'error';\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={showInvalid ? true : undefined}\n            aria-describedby={mergeFieldDescribedBy(\n              describedBy,\n              messageId,\n              counterId,\n            )}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onChange={handleChange}\n            {...rest}\n          />\n        </div>\n        {(showMessage || (showCharacterCount && maxLength != null)) && (\n          <div className={styles['text-area__footer']}>\n            {showMessage && (\n              <FieldMessage\n                id={messageId}\n                className={styles['text-area__footer-message']}\n                message={message}\n                tone={resolvedTone}\n              />\n            )}\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      </div>\n    );\n  },\n);\n\nexport default TextArea;\n"],"names":["TextArea","forwardRef","className","size","label","invalid","maxLength","showCharacterCount","message","messageTone","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","showInvalid","isFieldInvalid","showMessage","hasFieldMessage","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","rootClass","currentLength","counterId","messageId","resolvedTone","jsxs","jsx","mergeFieldDescribedBy","FieldMessage"],"mappings":"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"}

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.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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./TextArea.css');const e={"text-area":"_text-area_r07x5_2","text-area__wrapper":"_text-area__wrapper_r07x5_8","text-area__input":"_text-area__input_r07x5_15","text-area__label":"_text-area__label_r07x5_25","text-area--label-floated":"_text-area--label-floated_r07x5_44","text-area__footer":"_text-area__footer_r07x5_75","text-area__footer-message":"_text-area__footer-message_r07x5_81","text-area__counter":"_text-area__counter_r07x5_85","text-area--size-small":"_text-area--size-small_r07x5_94","text-area--size-medium":"_text-area--size-medium_r07x5_109","text-area--size-large":"_text-area--size-large_r07x5_124","text-area--invalid":"_text-area--invalid_r07x5_146"};exports.default=e;
 //# sourceMappingURL=TextArea.module.scss.cjs.map

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

@@ -1,14 +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"
+  "text-area": "_text-area_r07x5_2",
+  "text-area__wrapper": "_text-area__wrapper_r07x5_8",
+  "text-area__input": "_text-area__input_r07x5_15",
+  "text-area__label": "_text-area__label_r07x5_25",
+  "text-area--label-floated": "_text-area--label-floated_r07x5_44",
+  "text-area__footer": "_text-area__footer_r07x5_75",
+  "text-area__footer-message": "_text-area__footer-message_r07x5_81",
+  "text-area__counter": "_text-area__counter_r07x5_85",
+  "text-area--size-small": "_text-area--size-small_r07x5_94",
+  "text-area--size-medium": "_text-area--size-medium_r07x5_109",
+  "text-area--size-large": "_text-area--size-large_r07x5_124",
+  "text-area--invalid": "_text-area--invalid_r07x5_146"
 };
 export {
   e as default

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

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

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

@@ -1,2 +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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),s=require("react"),V=require("../icon/Icon.cjs"),xe=require("../field/FieldClearButton.cjs"),C=require("../field/fieldDescribedBy.cjs"),pe=require("../field/useFieldClear.cjs"),_e=require("../field-message/FieldMessage.cjs"),ve=require("../../utils/string.cjs"),t=require("./TextInput.module.scss.cjs"),he={small:"12",medium:"16",large:"16"},je=s.forwardRef(function({className:$="",size:f="medium",label:x,leadingIcon:p,trailingIcon:_,invalid:E=!1,maxLength:i,showCharacterCount:v=!1,message:h,messageTone:N,clearable:P=!1,onClear:O,clearLabel:U="Clear",clearButtonProps:Z,trailingAction:I,id:A,value:j,defaultValue:g,placeholder:G,onFocus:u,onBlur:d,onChange:c,onKeyDown:H,disabled:y,readOnly:F,"aria-describedby":J,...Q},a){const W=s.useId(),o=A??W,m=s.useRef(null),X=s.useCallback(l=>{if(m.current=l,typeof a=="function"){const K=a(l);return()=>{m.current=null,typeof K=="function"&&K()}}a&&(a.current=l)},[a]),n=j!==void 0,[Y,q]=s.useState(g??""),r=n?j:Y,S=r!=null&&r!=="",[L,w]=s.useState(!1),ee=L||S,te=s.useCallback(l=>{w(!0),u==null||u(l)},[u]),le=s.useCallback(l=>{w(!1),d==null||d(l)},[d]),M=s.useCallback(l=>{n||q(l.target.value),c==null||c(l)},[n,c]),{showClearButton:R,handleClear:se,handleKeyDown:ne}=pe.useFieldClear({disabled:!!(y||F),hasValue:S,clearEnabled:P,isControlled:n,onClear:O,onChange:M,onKeyDown:H,inputRef:m,setUncontrolledValue:q}),k=C.isFieldInvalid(E,h,N),b=C.hasFieldMessage(h),ie=t.default[`text-input--size-${ve.toKebab(f)}`],ae=k?t.default["text-input--invalid"]:"",ue=x!=null&&ee?t.default["text-input--label-floated"]:"",de=p!=null?t.default["text-input--has-leading-icon"]:"",ce=_!=null||R?t.default["text-input--has-trailing-icon"]:"",T=he[f],oe=[t.default["text-input"],ie,ae,ue,de,ce,$].filter(Boolean).join(" "),re=typeof r=="string"?r.length:0,B=v&&i!=null?`${o}-counter`:void 0,D=b?`${o}-message`:void 0,fe=N??"error",z=e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:t.default["text-input__wrapper"],children:[x!=null&&e.jsx("label",{className:t.default["text-input__label"],htmlFor:o,children:x}),e.jsxs("div",{className:t.default["text-input__inner"],children:[p!=null&&e.jsx("span",{className:t.default["text-input__leading-icon"],children:e.jsx(V.IconSlotContext.Provider,{value:{size:T},children:p})}),e.jsx("input",{ref:X,id:o,className:t.default["text-input__input"],value:n?j:void 0,defaultValue:n?void 0:g,placeholder:G,maxLength:i,disabled:y,readOnly:F,"aria-invalid":k?!0:void 0,"aria-describedby":C.mergeFieldDescribedBy(J,D,B),onFocus:te,onBlur:le,onChange:M,onKeyDown:ne,...Q}),_!=null&&e.jsx("span",{className:t.default["text-input__trailing-icon"],children:e.jsx(V.IconSlotContext.Provider,{value:{size:T},children:_})}),R&&e.jsx("span",{className:t.default["text-input__trailing-icon"],children:e.jsx(xe.default,{size:f,clearLabel:U,clearButtonProps:Z,onClick:se})})]})]}),(b||v&&i!=null)&&e.jsxs("div",{className:t.default["text-input__footer"],children:[b&&e.jsx(_e.default,{id:D,className:t.default["text-input__footer-message"],message:h,tone:fe}),v&&i!=null&&e.jsxs("div",{id:B,className:t.default["text-input__counter"],"aria-live":"polite",children:[re," / ",i]})]})]});return e.jsx("div",{className:oe,children:I!=null?e.jsxs("div",{className:t.default["text-input__row"],children:[e.jsx("div",{className:t.default["text-input__field"],children:z}),e.jsx("div",{className:t.default["text-input__trailing-action"],children:I})]}):z})});exports.default=je;
 //# 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 { 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":"+QAuCMA,EAAYC,EAAAA,WAChB,SACE,CACE,UAAAC,EAAY,GACZ,KAAAC,EAAO,SACP,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EACA,mBAAAC,EAAqB,GACrB,GAAIC,EACJ,MAAOC,EACP,aAAAC,EACA,YAAAC,EACA,QAAAC,EACA,OAAAC,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,mBAAoBC,EACpB,GAAGC,CAAA,EAELC,EACA,CACA,MAAMC,EAAcC,EAAAA,MAAA,EACdC,EAAKd,GAAUY,EACfG,EAAWC,EAAAA,OAAgC,IAAI,EAE/CC,EAAcC,EAAAA,YACjBC,GAAkC,CAEjC,GADAJ,EAAS,QAAUI,EACf,OAAOR,GAAQ,WAAY,CAC7B,MAAMS,EAAWT,EAAsCQ,CAAI,EAC3D,MAAO,IAAM,CACXJ,EAAS,QAAU,KACf,OAAOK,GAAY,YAAYA,EAAA,CACrC,CACF,CACIT,MAAS,QAAUQ,EACzB,EACA,CAACR,CAAG,CAAA,EAGAU,EAAepB,IAAc,OAC7B,CAACqB,EAAmBC,CAAoB,EAAIC,EAAAA,SAChDtB,GAAgB,EAAA,EAEZuB,EAAQJ,EAAgBpB,EAAuBqB,EAC/CI,EAAWD,GAAS,MAAQA,IAAU,GAEtC,CAACE,EAAWC,CAAY,EAAIJ,EAAAA,SAAS,EAAK,EAC1CK,EAAeF,GAAaD,EAE5BI,EAAcZ,EAAAA,YACjBa,GAA0C,CACzCH,EAAa,EAAI,EACjBxB,GAAA,MAAAA,EAAU2B,EACZ,EACA,CAAC3B,CAAO,CAAA,EAEJ4B,EAAad,EAAAA,YAChBa,GAA0C,CACzCH,EAAa,EAAK,EAClBvB,GAAA,MAAAA,EAAS0B,EACX,EACA,CAAC1B,CAAM,CAAA,EAEH4B,EAAef,EAAAA,YAClBa,GAAqC,CAC/BV,GAAcE,EAAqBQ,EAAE,OAAO,KAAK,EACtDzB,GAAA,MAAAA,EAAWyB,EACb,EACA,CAACV,EAAcf,CAAQ,CAAA,EAGnB4B,EAAYC,EAAAA,QAAO,oBAAoBC,EAAAA,QAAQ3C,CAAI,CAAC,EAAE,EACtD4C,EAAexC,EAAUsC,UAAO,qBAAqB,EAAI,GACzDG,EACJ5C,GAAS,MAAQmC,EAAeM,EAAAA,QAAO,2BAA2B,EAAI,GAClEI,EACJ5C,GAAe,KAAOwC,EAAAA,QAAO,8BAA8B,EAAI,GAC3DK,EACJ5C,GAAgB,KAAOuC,EAAAA,QAAO,+BAA+B,EAAI,GAE7DM,EAAY,CAChBN,EAAAA,QAAO,YAAY,EACnBD,EACAG,EACAC,EACAC,EACAC,EACAhD,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELkD,EAAgB,OAAOjB,GAAU,SAAWA,EAAM,OAAS,EAC3DkB,EACJ5C,GAAsBD,GAAa,KAAO,GAAGgB,CAAE,WAAa,OAE9D,OACE8B,EAAAA,KAAC,MAAA,CAAI,UAAWH,EACd,SAAA,CAAAI,EAAAA,IAAC,MAAA,CAAI,UAAWV,EAAAA,QAAO,qBAAqB,EAC1C,gBAAC,QAAA,CAAM,UAAWA,EAAAA,QAAO,mBAAmB,EACzC,SAAA,CAAAzC,GAAS,MACRmD,MAAC,OAAA,CAAK,UAAWV,EAAAA,QAAO,mBAAmB,EAAI,SAAAzC,EAAM,EAEtDC,GAAe,MACdkD,EAAAA,IAAC,QAAK,UAAWV,EAAAA,QAAO,0BAA0B,EAChD,SAAAU,EAAAA,IAACC,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,WACH,EACF,EAEFD,EAAAA,IAAC,QAAA,CACC,IAAK5B,EACL,GAAAH,EACA,UAAWqB,EAAAA,QAAO,mBAAmB,EACrC,MAAOd,EAAepB,EAAY,OAClC,aAAcoB,EAAe,OAAYnB,EACzC,YAAAC,EACA,UAAAL,EACA,SAAAS,EACA,SAAAC,EACA,eAAcX,EAAU,GAAO,OAC/B,mBACE,CAACY,EAAakC,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAK,OAExD,QAASb,EACT,OAAQE,EACR,SAAUC,EACT,GAAGvB,CAAA,CAAA,EAELd,GAAgB,MACfiD,EAAAA,IAAC,QAAK,UAAWV,EAAAA,QAAO,2BAA2B,EACjD,SAAAU,EAAAA,IAACC,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,MACtC,WACH,CAAA,CACF,CAAA,CAAA,CAEJ,CAAA,CACF,EACC/C,GAAsBD,GAAa,MAClC8C,EAAAA,KAAC,MAAA,CACC,GAAID,EACJ,UAAWR,EAAAA,QAAO,qBAAqB,EACvC,YAAU,SAET,SAAA,CAAAO,EAAc,MAAI5C,CAAA,CAAA,CAAA,CACrB,EAEJ,CAEJ,CACF"}
+{"version":3,"file":"TextInput.cjs","sources":["../../../src/components/text-input/TextInput.tsx"],"sourcesContent":["import type {\n  InputHTMLAttributes,\n  ReactNode,\n  ChangeEvent,\n  RefCallback,\n  KeyboardEvent,\n} from 'react';\nimport { forwardRef, useId, useState, useCallback, useRef } from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport FieldClearButton from '@/components/field/FieldClearButton';\nimport {\n  hasFieldMessage,\n  isFieldInvalid,\n  mergeFieldDescribedBy,\n} from '@/components/field/fieldDescribedBy';\nimport { useFieldClear } from '@/components/field/useFieldClear';\nimport FieldMessage from '@/components/field-message/FieldMessage';\nimport type { FieldMessageTone } from '@/components/field-message/FieldMessage';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './TextInput.module.scss';\n\nexport type TextInputSize = 'small' | 'medium' | 'large';\n\n/** Matches FieldClearButton / in-field chrome for each Text Input size. */\nconst ICON_SIZE_MAP: Record<TextInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '16',\n};\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  /**\n   * Native input `type`. For passwords with show/hide, prefer `PasswordInput`\n   * over composing `type=\"password\"` here.\n   */\n  type?: InputHTMLAttributes<HTMLInputElement>['type'];\n  /**\n   * Trailing icon inside the field — pass `<Icon glyph={<GlobeIcon />} />`. Sized via\n   * context from `size`. When `clearable` is also set, clear renders after this icon.\n   * For password show/hide, use `PasswordInput` instead (don’t combine clear with\n   * password reveal). Combobox owns its own clear/chevron.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).\n   * Defaults to error tone (invalid chrome) when set without `messageTone`.\n   */\n  message?: ReactNode;\n  /** Visual tone for `message`. Default: `error` when `message` is set. */\n  messageTone?: FieldMessageTone;\n  /**\n   * When true, shows a clear button while the field has a non-empty value and is not disabled.\n   * Default: false.\n   */\n  clearable?: boolean;\n  /** Called when the clear button is pressed. Omit to use built-in clearing. */\n  onClear?: () => void;\n  /** Accessible name for the clear button. Default: \"Clear\". */\n  clearLabel?: string;\n  /** Extra attributes for the clear button (e.g. `data-testid`). */\n  clearButtonProps?: BuiltInButtonProps;\n  /**\n   * Rendered outside the border, beside the control (same height as the field). Use for\n   * labeled actions like Copy (`Button`, primary by default). Password show/hide belongs\n   * on `PasswordInput`. Message and counter stay as wide as the field column, not under\n   * the action.\n   */\n  trailingAction?: 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      message,\n      messageTone,\n      clearable = false,\n      onClear,\n      clearLabel = 'Clear',\n      clearButtonProps,\n      trailingAction,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      onKeyDown,\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 { showClearButton, handleClear, handleKeyDown } = useFieldClear({\n      disabled: Boolean(disabled || readOnly),\n      hasValue,\n      clearEnabled: clearable,\n      isControlled,\n      onClear,\n      onChange: handleChange as (e: ChangeEvent<HTMLInputElement>) => void,\n      onKeyDown: onKeyDown as\n        | ((e: KeyboardEvent<HTMLInputElement>) => void)\n        | undefined,\n      inputRef,\n      setUncontrolledValue,\n    });\n\n    const showInvalid = isFieldInvalid(invalid, message, messageTone);\n    const showMessage = hasFieldMessage(message);\n    const sizeClass = styles[`text-input--size-${toKebab(size)}`];\n    const invalidClass = showInvalid ? 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 || showClearButton\n        ? styles['text-input--has-trailing-icon']\n        : '';\n    const iconSize = ICON_SIZE_MAP[size];\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    const messageId = showMessage ? `${id}-message` : undefined;\n    const resolvedTone = messageTone ?? 'error';\n\n    const fieldBody = (\n      <>\n        <div className={styles['text-input__wrapper']}>\n          {label != null && (\n            <label className={styles['text-input__label']} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <div className={styles['text-input__inner']}>\n            {leadingIcon != null && (\n              <span className={styles['text-input__leading-icon']}>\n                <IconSlotContext.Provider value={{ size: iconSize }}>\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={showInvalid ? true : undefined}\n              aria-describedby={mergeFieldDescribedBy(\n                describedBy,\n                messageId,\n                counterId,\n              )}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              {...rest}\n            />\n            {trailingIcon != null && (\n              <span className={styles['text-input__trailing-icon']}>\n                <IconSlotContext.Provider value={{ size: iconSize }}>\n                  {trailingIcon}\n                </IconSlotContext.Provider>\n              </span>\n            )}\n            {showClearButton && (\n              <span className={styles['text-input__trailing-icon']}>\n                <FieldClearButton\n                  size={size}\n                  clearLabel={clearLabel}\n                  clearButtonProps={clearButtonProps}\n                  onClick={handleClear}\n                />\n              </span>\n            )}\n          </div>\n        </div>\n        {(showMessage || (showCharacterCount && maxLength != null)) && (\n          <div className={styles['text-input__footer']}>\n            {showMessage && (\n              <FieldMessage\n                id={messageId}\n                className={styles['text-input__footer-message']}\n                message={message}\n                tone={resolvedTone}\n              />\n            )}\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\n    return (\n      <div className={rootClass}>\n        {trailingAction != null ? (\n          <div className={styles['text-input__row']}>\n            <div className={styles['text-input__field']}>{fieldBody}</div>\n            <div className={styles['text-input__trailing-action']}>\n              {trailingAction}\n            </div>\n          </div>\n        ) : (\n          fieldBody\n        )}\n      </div>\n    );\n  },\n);\n\nexport default TextInput;\n"],"names":["ICON_SIZE_MAP","TextInput","forwardRef","className","size","label","leadingIcon","trailingIcon","invalid","maxLength","showCharacterCount","message","messageTone","clearable","onClear","clearLabel","clearButtonProps","trailingAction","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","onKeyDown","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","showClearButton","handleClear","handleKeyDown","useFieldClear","showInvalid","isFieldInvalid","showMessage","hasFieldMessage","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","hasLeadingClass","hasTrailingClass","iconSize","rootClass","currentLength","counterId","messageId","resolvedTone","fieldBody","jsxs","Fragment","jsx","IconSlotContext","mergeFieldDescribedBy","FieldClearButton","FieldMessage"],"mappings":"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"}