@mattermost/compass-ui 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/components/team-sidebar/TeamSidebar.js

@@ -0,0 +1,85 @@
+import { jsxs as o, jsx as i } from "react/jsx-runtime";
+import __N from "@mattermost/compass-icons/components/plus.js";const N=__N&&__N.default?__N.default:__N;
+import __y from "@mattermost/compass-icons/components/dialpad.js";const y=__y&&__y.default?__y.default:__y;
+import n from "../icon/Icon.js";
+import l from "../icon-button/IconButton.js";
+import g from "../team-avatar/TeamAvatar.js";
+import z from "../unread-badge/UnreadBadge.js";
+import s from "./TeamSidebar.module.scss.js";
+function U({
+  className: d = "",
+  teams: m,
+  activeTeamId: c,
+  showAddTeam: u = !0,
+  showDialPad: p = !1,
+  dialPadActive: b = !1,
+  onSelectTeam: e,
+  onAddTeam: f,
+  onDialPadClick: _
+}) {
+  const v = [s["team-sidebar"], d].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o("div", { className: v, children: [
+    /* @__PURE__ */ o("div", { className: s["team-sidebar__teams"], children: [
+      m.map((a) => {
+        const r = a.id === c, t = a.mentions != null && a.mentions > 0, h = a.unread && !r && !t;
+        return /* @__PURE__ */ o(
+          "button",
+          {
+            type: "button",
+            className: s["team-sidebar__team"],
+            "aria-label": a.name,
+            "aria-current": r ? "true" : void 0,
+            onClick: () => e == null ? void 0 : e(a.id),
+            children: [
+              /* @__PURE__ */ i(
+                g,
+                {
+                  src: a.src,
+                  alt: a.name,
+                  initials: a.initials,
+                  state: r ? "active" : "default",
+                  badge: t ? a.mentions : void 0
+                }
+              ),
+              h && /* @__PURE__ */ i(
+                z,
+                {
+                  className: s["team-sidebar__unread"],
+                  "aria-label": `${a.name} has unread messages`
+                }
+              )
+            ]
+          },
+          a.id
+        );
+      }),
+      u && /* @__PURE__ */ i(
+        l,
+        {
+          "aria-label": "Add team",
+          size: "medium",
+          style: "inverted",
+          icon: /* @__PURE__ */ i(n, { size: "20", glyph: /* @__PURE__ */ i(N, {}) }),
+          onClick: f,
+          className: s["team-sidebar__add"]
+        }
+      )
+    ] }),
+    p && /* @__PURE__ */ i("div", { className: s["team-sidebar__footer"], children: /* @__PURE__ */ i(
+      l,
+      {
+        "aria-label": "Dial pad",
+        size: "small",
+        style: "inverted",
+        active: b,
+        icon: /* @__PURE__ */ i(n, { size: "16", glyph: /* @__PURE__ */ i(y, {}) }),
+        onClick: _,
+        className: s["team-sidebar__dial-pad"]
+      }
+    ) })
+  ] });
+}
+export {
+  U as default
+};
+//# sourceMappingURL=TeamSidebar.js.map

package/dist/components/team-sidebar/TeamSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TeamSidebar.js","sources":["../../../src/components/team-sidebar/TeamSidebar.tsx"],"sourcesContent":["import PlusIcon from '@mattermost/compass-icons/components/plus';\nimport DialpadIcon from '@mattermost/compass-icons/components/dialpad';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport TeamAvatar from '@/components/team-avatar/TeamAvatar';\nimport UnreadBadge from '@/components/unread-badge/UnreadBadge';\nimport styles from './TeamSidebar.module.scss';\n\nexport interface TeamSidebarItem {\n  id: string;\n  name: string;\n  src?: string;\n  initials?: string;\n  unread?: boolean;\n  mentions?: number;\n}\n\nexport interface TeamSidebarProps {\n  className?: string;\n  teams: TeamSidebarItem[];\n  activeTeamId?: string;\n  showAddTeam?: boolean;\n  showDialPad?: boolean;\n  dialPadActive?: boolean;\n  onSelectTeam?: (id: string) => void;\n  onAddTeam?: () => void;\n  onDialPadClick?: () => void;\n}\n\nexport default function TeamSidebar({\n  className = '',\n  teams,\n  activeTeamId,\n  showAddTeam = true,\n  showDialPad = false,\n  dialPadActive = false,\n  onSelectTeam,\n  onAddTeam,\n  onDialPadClick,\n}: TeamSidebarProps) {\n  const rootClass = [styles['team-sidebar'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['team-sidebar__teams']}>\n        {teams.map((team) => {\n          const active = team.id === activeTeamId;\n          const hasMentions = team.mentions != null && team.mentions > 0;\n          const showUnreadDot = team.unread && !active && !hasMentions;\n          return (\n            <button\n              key={team.id}\n              type=\"button\"\n              className={styles['team-sidebar__team']}\n              aria-label={team.name}\n              aria-current={active ? 'true' : undefined}\n              onClick={() => onSelectTeam?.(team.id)}\n            >\n              <TeamAvatar\n                src={team.src}\n                alt={team.name}\n                initials={team.initials}\n                state={active ? 'active' : 'default'}\n                badge={hasMentions ? team.mentions : undefined}\n              />\n              {showUnreadDot && (\n                <UnreadBadge\n                  className={styles['team-sidebar__unread']}\n                  aria-label={`${team.name} has unread messages`}\n                />\n              )}\n            </button>\n          );\n        })}\n        {showAddTeam && (\n          <IconButton\n            aria-label=\"Add team\"\n            size=\"medium\"\n            style=\"inverted\"\n            icon={<Icon size=\"20\" glyph={<PlusIcon />} />}\n            onClick={onAddTeam}\n            className={styles['team-sidebar__add']}\n          />\n        )}\n      </div>\n      {showDialPad && (\n        <div className={styles['team-sidebar__footer']}>\n          <IconButton\n            aria-label=\"Dial pad\"\n            size=\"small\"\n            style=\"inverted\"\n            active={dialPadActive}\n            icon={<Icon size=\"16\" glyph={<DialpadIcon />} />}\n            onClick={onDialPadClick}\n            className={styles['team-sidebar__dial-pad']}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["TeamSidebar","className","teams","activeTeamId","showAddTeam","showDialPad","dialPadActive","onSelectTeam","onAddTeam","onDialPadClick","rootClass","styles","jsxs","team","active","hasMentions","showUnreadDot","jsx","TeamAvatar","UnreadBadge","IconButton","Icon","PlusIcon","DialpadIcon"],"mappings":";;;;;;;;AA6BA,SAAwBA,EAAY;AAAA,EAClC,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,aAAAC,IAAc;AAAA,EACd,eAAAC,IAAgB;AAAA,EAChB,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AACF,GAAqB;AACnB,QAAMC,IAAY,CAACC,EAAO,cAAc,GAAGV,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAW,EAAC,OAAA,EAAI,WAAWF,GACd,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWD,EAAO,qBAAqB,GACzC,UAAA;AAAA,MAAAT,EAAM,IAAI,CAACW,MAAS;AACnB,cAAMC,IAASD,EAAK,OAAOV,GACrBY,IAAcF,EAAK,YAAY,QAAQA,EAAK,WAAW,GACvDG,IAAgBH,EAAK,UAAU,CAACC,KAAU,CAACC;AACjD,eACE,gBAAAH;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,WAAWD,EAAO,oBAAoB;AAAA,YACtC,cAAYE,EAAK;AAAA,YACjB,gBAAcC,IAAS,SAAS;AAAA,YAChC,SAAS,MAAMP,KAAA,gBAAAA,EAAeM,EAAK;AAAA,YAEnC,UAAA;AAAA,cAAA,gBAAAI;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBACC,KAAKL,EAAK;AAAA,kBACV,KAAKA,EAAK;AAAA,kBACV,UAAUA,EAAK;AAAA,kBACf,OAAOC,IAAS,WAAW;AAAA,kBAC3B,OAAOC,IAAcF,EAAK,WAAW;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEtCG,KACC,gBAAAC;AAAA,gBAACE;AAAA,gBAAA;AAAA,kBACC,WAAWR,EAAO,sBAAsB;AAAA,kBACxC,cAAY,GAAGE,EAAK,IAAI;AAAA,gBAAA;AAAA,cAAA;AAAA,YAC1B;AAAA,UAAA;AAAA,UAlBGA,EAAK;AAAA,QAAA;AAAA,MAsBhB,CAAC;AAAA,MACAT,KACC,gBAAAa;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,cAAW;AAAA,UACX,MAAK;AAAA,UACL,OAAM;AAAA,UACN,wBAAOC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAJ,EAACK,KAAS,GAAI;AAAA,UAC3C,SAASd;AAAA,UACT,WAAWG,EAAO,mBAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,IACvC,GAEJ;AAAA,IACCN,KACC,gBAAAY,EAAC,OAAA,EAAI,WAAWN,EAAO,sBAAsB,GAC3C,UAAA,gBAAAM;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,cAAW;AAAA,QACX,MAAK;AAAA,QACL,OAAM;AAAA,QACN,QAAQd;AAAA,QACR,wBAAOe,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAJ,EAACM,KAAY,GAAI;AAAA,QAC9C,SAASd;AAAA,QACT,WAAWE,EAAO,wBAAwB;AAAA,MAAA;AAAA,IAAA,EAC5C,CACF;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/team-sidebar/TeamSidebar.module.css

@@ -0,0 +1 @@
+._team-sidebar_5rhbh_2{display:flex;flex-direction:column;align-items:stretch;padding:var(--spacing-m);background-color:var(--sidebar-header-bg);height:100%}._team-sidebar__teams_5rhbh_10{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-m)}._team-sidebar__footer_5rhbh_16{margin-top:auto;display:flex;justify-content:center;padding-top:var(--spacing-m)}._team-sidebar__dial-pad_5rhbh_22{border-radius:var(--radius-m)}._team-sidebar__team_5rhbh_10{position:relative;display:inline-flex;padding:0;border:0;background:transparent;cursor:pointer;border-radius:var(--radius-m)}._team-sidebar__team_5rhbh_10:focus-visible{outline:2px solid var(--sidebar-text-active-border);outline-offset:2px}._team-sidebar__unread_5rhbh_38{position:absolute;top:-2px;right:-2px;z-index:2;box-shadow:0 0 0 2px var(--sidebar-header-bg, #192a4d)}._team-sidebar__add_5rhbh_45{border-radius:var(--radius-m)}

package/dist/components/team-sidebar/TeamSidebar.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./TeamSidebar.module.css');const e={"team-sidebar":"_team-sidebar_5rhbh_2","team-sidebar__teams":"_team-sidebar__teams_5rhbh_10","team-sidebar__footer":"_team-sidebar__footer_5rhbh_16","team-sidebar__dial-pad":"_team-sidebar__dial-pad_5rhbh_22","team-sidebar__team":"_team-sidebar__team_5rhbh_10","team-sidebar__unread":"_team-sidebar__unread_5rhbh_38","team-sidebar__add":"_team-sidebar__add_5rhbh_45"};exports.default=e;
+//# sourceMappingURL=TeamSidebar.module.scss.cjs.map

package/dist/components/team-sidebar/TeamSidebar.module.scss.cjs.map

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

package/dist/components/team-sidebar/TeamSidebar.module.scss.js

@@ -0,0 +1,13 @@
+import './TeamSidebar.module.css';const _ = {
+  "team-sidebar": "_team-sidebar_5rhbh_2",
+  "team-sidebar__teams": "_team-sidebar__teams_5rhbh_10",
+  "team-sidebar__footer": "_team-sidebar__footer_5rhbh_16",
+  "team-sidebar__dial-pad": "_team-sidebar__dial-pad_5rhbh_22",
+  "team-sidebar__team": "_team-sidebar__team_5rhbh_10",
+  "team-sidebar__unread": "_team-sidebar__unread_5rhbh_38",
+  "team-sidebar__add": "_team-sidebar__add_5rhbh_45"
+};
+export {
+  _ as default
+};
+//# sourceMappingURL=TeamSidebar.module.scss.js.map

package/dist/components/team-sidebar/TeamSidebar.module.scss.js.map

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

package/dist/components/team-sidebar/index.cjs

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

package/dist/components/team-sidebar/index.cjs.map

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

package/dist/components/team-sidebar/index.d.ts.map

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

package/dist/components/team-sidebar/index.js

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

package/dist/components/team-sidebar/index.js.map

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

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

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

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

@@ -0,0 +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      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n\n    const isControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\n\n    const [isFocused, setIsFocused] = useState(false);\n    const labelFloated = isFocused || hasValue;\n\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        if (!isControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isControlled, onChange],\n    );\n\n    const sizeClass = styles[`textArea--size-${toKebab(size)}`];\n    const invalidClass = invalid ? styles['textArea--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['textArea--label-floated'] : '';\n\n    const rootClass = [\n      styles.textArea,\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const currentLength = typeof value === 'string' ? value.length : 0;\n    const counterId =\n      showCharacterCount && maxLength != null ? `${id}-counter` : undefined;\n\n    return (\n      <div className={rootClass}>\n        <div className={styles.textArea__wrapper}>\n          {label != null && (\n            <label className={styles.textArea__label} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <textarea\n            ref={ref}\n            id={id}\n            className={styles.textArea__input}\n            value={isControlled ? valueProp : undefined}\n            defaultValue={isControlled ? undefined : defaultValue}\n            placeholder={placeholder}\n            maxLength={maxLength}\n            disabled={disabled}\n            readOnly={readOnly}\n            rows={rows}\n            aria-invalid={invalid ? true : undefined}\n            aria-describedby={counterId}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onChange={handleChange}\n            {...rest}\n          />\n        </div>\n        {showCharacterCount && maxLength != null && (\n          <div\n            id={counterId}\n            className={styles.textArea__counter}\n            aria-live=\"polite\"\n          >\n            {currentLength} / {maxLength}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nexport default TextArea;\n"],"names":["TextArea","forwardRef","className","size","label","invalid","maxLength","showCharacterCount","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","readOnly","rows","rest","ref","generatedId","useId","id","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","e","handleBlur","handleChange","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","rootClass","currentLength","counterId","jsxs","jsx"],"mappings":"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,GAAGC,CAAA,EAELC,EACA,CACA,MAAMC,EAAcC,EAAAA,MAAA,EACdC,EAAKd,GAAUY,EAEfG,EAAed,IAAc,OAC7B,CAACe,EAAmBC,CAAoB,EAAIC,EAAAA,SAChDhB,GAAgB,EAAA,EAEZiB,EAAQJ,EAAgBd,EAAuBe,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,EACjBlB,GAAA,MAAAA,EAAUsB,EACZ,EACA,CAACtB,CAAO,CAAA,EAEJuB,EAAaF,EAAAA,YAChBC,GAA6C,CAC5CJ,EAAa,EAAK,EAClBjB,GAAA,MAAAA,EAASqB,EACX,EACA,CAACrB,CAAM,CAAA,EAEHuB,EAAeH,EAAAA,YAClBC,GAAwC,CAClCX,GAAcE,EAAqBS,EAAE,OAAO,KAAK,EACtDpB,GAAA,MAAAA,EAAWoB,EACb,EACA,CAACX,EAAcT,CAAQ,CAAA,EAGnBuB,EAAYC,EAAAA,QAAO,kBAAkBC,EAAAA,QAAQpC,CAAI,CAAC,EAAE,EACpDqC,EAAenC,EAAUiC,UAAO,mBAAmB,EAAI,GACvDG,EACJrC,GAAS,MAAQ2B,EAAeO,EAAAA,QAAO,yBAAyB,EAAI,GAEhEI,EAAY,CAChBJ,EAAAA,QAAO,SACPD,EACAG,EACAC,EACAvC,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELyC,EAAgB,OAAOhB,GAAU,SAAWA,EAAM,OAAS,EAC3DiB,EACJrC,GAAsBD,GAAa,KAAO,GAAGgB,CAAE,WAAa,OAE9D,OACEuB,EAAAA,KAAC,MAAA,CAAI,UAAWH,EACd,SAAA,CAAAG,EAAAA,KAAC,MAAA,CAAI,UAAWP,EAAAA,QAAO,kBACpB,SAAA,CAAAlC,GAAS,YACP,QAAA,CAAM,UAAWkC,UAAO,gBAAiB,QAAShB,EAChD,SAAAlB,CAAA,CACH,EAEF0C,EAAAA,IAAC,WAAA,CACC,IAAA3B,EACA,GAAAG,EACA,UAAWgB,EAAAA,QAAO,gBAClB,MAAOf,EAAed,EAAY,OAClC,aAAcc,EAAe,OAAYb,EACzC,YAAAC,EACA,UAAAL,EACA,SAAAS,EACA,SAAAC,EACA,KAAAC,EACA,eAAcZ,EAAU,GAAO,OAC/B,mBAAkBuC,EAClB,QAASZ,EACT,OAAQG,EACR,SAAUC,EACT,GAAGlB,CAAA,CAAA,CACN,EACF,EACCX,GAAsBD,GAAa,MAClCuC,EAAAA,KAAC,MAAA,CACC,GAAID,EACJ,UAAWN,EAAAA,QAAO,kBAClB,YAAU,SAET,SAAA,CAAAK,EAAc,MAAIrC,CAAA,CAAA,CAAA,CACrB,EAEJ,CAEJ,CACF"}

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

@@ -0,0 +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,+GAoHb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

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

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

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

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

@@ -0,0 +1 @@
+._textArea_ewczf_2{display:flex;flex-direction:column;width:100%}._textArea__wrapper_ewczf_7{position:relative;background-color:var(--center-channel-bg);border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.16);transition:box-shadow var(--duration-quick) var(--ease-transition)}._textArea_ewczf_2:has(._textArea__input_ewczf_14:not(:disabled)):hover:not(:focus-within) ._textArea__wrapper_ewczf_7{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._textArea_ewczf_2:has(._textArea__input_ewczf_14:focus-visible) ._textArea__wrapper_ewczf_7{box-shadow:inset 0 0 0 1px var(--button-bg),0 0 0 1px var(--button-bg)}._textArea_ewczf_2:has(._textArea__input_ewczf_14:disabled) ._textArea__wrapper_ewczf_7{background-color:var(--center-channel-bg);opacity:.56}._textArea__label_ewczf_24{position:absolute;left:var(--spacing-xs);top:var(--spacing-s);padding:0 var(--spacing-xxxs);margin:0;font-family:Open Sans,sans-serif;font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.64);background-color:var(--center-channel-bg);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);transition:font-size var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._textArea--label-floated_ewczf_43 ._textArea__label_ewczf_24{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._textArea__input_ewczf_14{display:block;width:100%;margin:0;border:0;background:transparent;resize:vertical;font-family:Open Sans,sans-serif;font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-regular);color:var(--center-channel-color);box-sizing:border-box}._textArea__input_ewczf_14:focus{outline:none}._textArea__input_ewczf_14::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._textArea__input_ewczf_14:disabled{cursor:not-allowed;resize:none}._textArea__counter_ewczf_74{margin-top:var(--spacing-xxxs);font-family:Open Sans,sans-serif;font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._textArea--size-small_ewczf_81 ._textArea__input_ewczf_14{padding:var(--spacing-xs) var(--spacing-m);font-size:var(--font-size-75);line-height:var(--line-height-75)}._textArea--size-small_ewczf_81 ._textArea__label_ewczf_24{top:var(--spacing-xs);font-size:var(--font-size-75);line-height:var(--line-height-25)}._textArea--size-small_ewczf_81._textArea--label-floated_ewczf_43 ._textArea__label_ewczf_24{top:0;font-size:var(--font-size-25);line-height:14px}._textArea--size-medium_ewczf_96 ._textArea__input_ewczf_14{padding:var(--spacing-s) var(--spacing-l);font-size:var(--font-size-100);line-height:var(--line-height-100)}._textArea--size-medium_ewczf_96 ._textArea__label_ewczf_24{top:var(--spacing-s);left:var(--spacing-m);font-size:var(--font-size-100)}._textArea--size-medium_ewczf_96._textArea--label-floated_ewczf_43 ._textArea__label_ewczf_24{top:0;font-size:var(--font-size-25);line-height:14px}._textArea--size-large_ewczf_111 ._textArea__input_ewczf_14{padding:var(--spacing-m) var(--spacing-l);font-size:var(--font-size-200);line-height:var(--line-height-200)}._textArea--size-large_ewczf_111 ._textArea__label_ewczf_24{top:var(--spacing-m);left:var(--spacing-m);font-size:var(--font-size-200);line-height:var(--line-height-200)}._textArea--size-large_ewczf_111._textArea--label-floated_ewczf_43 ._textArea__label_ewczf_24{top:0;font-size:var(--font-size-25);line-height:14px}._textArea_ewczf_2:has(._textArea__input_ewczf_14:focus-visible) ._textArea__label_ewczf_24{color:var(--button-bg)}._textArea_ewczf_2:has(._textArea__label_ewczf_24):not(._textArea--label-floated_ewczf_43) ._textArea__input_ewczf_14::placeholder{color:transparent}._textArea--invalid_ewczf_133 ._textArea__wrapper_ewczf_7{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._textArea--invalid_ewczf_133:has(._textArea__input_ewczf_14:focus-visible) ._textArea__wrapper_ewczf_7{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 1px var(--error-text, var(--color-danger))}._textArea--invalid_ewczf_133 ._textArea__label_ewczf_24{color:var(--error-text, var(--color-danger))}._textArea--invalid_ewczf_133:has(._textArea__input_ewczf_14:focus-visible) ._textArea__label_ewczf_24{color:var(--error-text, var(--color-danger))}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+._textInput_14l3m_2{display:flex;flex-direction:column;width:100%}._textInput__wrapper_14l3m_7{position:relative;display:flex;flex-direction:column;min-height:0;background-color:var(--center-channel-bg);border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.16);transition:box-shadow var(--duration-quick) var(--ease-transition);cursor:text}._textInput_14l3m_2:has(._textInput__input_14l3m_18:not(:disabled)):hover:not(:focus-within) ._textInput__wrapper_14l3m_7{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._textInput_14l3m_2:has(._textInput__input_14l3m_18:focus-visible) ._textInput__wrapper_14l3m_7{box-shadow:inset 0 0 0 1px var(--button-bg),0 0 0 1px var(--button-bg)}._textInput_14l3m_2:has(._textInput__input_14l3m_18:disabled) ._textInput__wrapper_14l3m_7{background-color:var(--center-channel-bg);opacity:.56;cursor:not-allowed}._textInput__label_14l3m_29{position:absolute;left:var(--spacing-xs);top:50%;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.64);background-color:var(--center-channel-bg);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);transition:transform var(--duration-quick) var(--ease-transition),font-size var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),left var(--duration-quick) var(--ease-transition)}._textInput--label-floated_14l3m_49 ._textInput__label_14l3m_29{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._textInput__inner_14l3m_56{display:flex;align-items:center;flex:1;width:100%;min-width:0;box-sizing:border-box;margin:0;cursor:text}._textInput__input_14l3m_18{flex:1 1 0;width:100%;min-width:0;min-height:100%;margin:0;padding:0;border:0;background:transparent;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:var(--center-channel-color)}._textInput__input_14l3m_18:focus{outline:none}._textInput__input_14l3m_18::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._textInput__leadingIcon_14l3m_87,._textInput__trailingIcon_14l3m_87{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._textInput__leadingIcon_14l3m_87{margin-right:var(--spacing-xs)}._textInput__trailingIcon_14l3m_87{margin-left:var(--spacing-xs)}._textInput__counter_14l3m_100{margin-top:var(--spacing-xxxs);font-family:Open Sans,sans-serif;font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._textInput--size-small_14l3m_107 ._textInput__wrapper_14l3m_7{min-height:32px}._textInput--size-small_14l3m_107 ._textInput__inner_14l3m_56{padding:var(--spacing-xs) var(--spacing-m)}._textInput--size-small_14l3m_107 ._textInput__input_14l3m_18{font-size:var(--font-size-75);line-height:var(--line-height-25)}._textInput--size-small_14l3m_107._textInput--label-floated_14l3m_49 ._textInput__label_14l3m_29{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._textInput--size-medium_14l3m_123 ._textInput__wrapper_14l3m_7{min-height:40px}._textInput--size-medium_14l3m_123 ._textInput__inner_14l3m_56{padding:var(--spacing-s) var(--spacing-l)}._textInput--size-medium_14l3m_123 ._textInput__input_14l3m_18{font-size:var(--font-size-100);line-height:var(--line-height-100)}._textInput--size-medium_14l3m_123 ._textInput__label_14l3m_29{font-size:var(--font-size-100);left:var(--spacing-m)}._textInput--size-medium_14l3m_123._textInput--label-floated_14l3m_49 ._textInput__label_14l3m_29{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._textInput--size-large_14l3m_143 ._textInput__wrapper_14l3m_7{min-height:48px}._textInput--size-large_14l3m_143 ._textInput__inner_14l3m_56{padding:var(--spacing-m) var(--spacing-l)}._textInput--size-large_14l3m_143 ._textInput__input_14l3m_18{font-size:var(--font-size-200);line-height:var(--line-height-200)}._textInput--size-large_14l3m_143 ._textInput__label_14l3m_29{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._textInput--size-large_14l3m_143._textInput--label-floated_14l3m_49 ._textInput__label_14l3m_29{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._textInput--has-leading-icon_14l3m_164 ._textInput__label_14l3m_29{left:var(--spacing-xxxl)}._textInput--has-leading-icon_14l3m_164._textInput--label-floated_14l3m_49 ._textInput__label_14l3m_29{left:var(--spacing-xs)}._textInput--has-leading-icon_14l3m_164._textInput--size-medium_14l3m_123 ._textInput__label_14l3m_29,._textInput--has-leading-icon_14l3m_164._textInput--size-large_14l3m_143 ._textInput__label_14l3m_29{left:36px}._textInput--has-leading-icon_14l3m_164._textInput--size-medium_14l3m_123._textInput--label-floated_14l3m_49 ._textInput__label_14l3m_29,._textInput--has-leading-icon_14l3m_164._textInput--size-large_14l3m_143._textInput--label-floated_14l3m_49 ._textInput__label_14l3m_29{left:var(--spacing-m)}._textInput_14l3m_2:has(._textInput__input_14l3m_18:focus-visible) ._textInput__label_14l3m_29{color:var(--button-bg)}._textInput_14l3m_2:has(._textInput__label_14l3m_29):not(._textInput--label-floated_14l3m_49) ._textInput__input_14l3m_18::placeholder{color:transparent}._textInput--invalid_14l3m_182 ._textInput__wrapper_14l3m_7{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._textInput--invalid_14l3m_182:has(._textInput__input_14l3m_18:focus-visible) ._textInput__wrapper_14l3m_7{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 1px var(--error-text, var(--color-danger))}._textInput--invalid_14l3m_182 ._textInput__label_14l3m_29{color:var(--error-text, var(--color-danger))}._textInput--invalid_14l3m_182:has(._textInput__input_14l3m_18:focus-visible) ._textInput__label_14l3m_29{color:var(--error-text, var(--color-danger))}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./TextInput.module.css');const t="_textInput_14l3m_2",_="_textInput__wrapper_14l3m_7",e="_textInput__input_14l3m_18",n="_textInput__label_14l3m_29",u="_textInput__inner_14l3m_56",p="_textInput__leadingIcon_14l3m_87",l="_textInput__trailingIcon_14l3m_87",I="_textInput__counter_14l3m_100",x={textInput:t,textInput__wrapper:_,textInput__input:e,textInput__label:n,"textInput--label-floated":"_textInput--label-floated_14l3m_49",textInput__inner:u,textInput__leadingIcon:p,textInput__trailingIcon:l,textInput__counter:I,"textInput--size-small":"_textInput--size-small_14l3m_107","textInput--size-medium":"_textInput--size-medium_14l3m_123","textInput--size-large":"_textInput--size-large_14l3m_143","textInput--has-leading-icon":"_textInput--has-leading-icon_14l3m_164","textInput--invalid":"_textInput--invalid_14l3m_182"};exports.default=x;exports.textInput=t;exports.textInput__counter=I;exports.textInput__inner=u;exports.textInput__input=e;exports.textInput__label=n;exports.textInput__leadingIcon=p;exports.textInput__trailingIcon=l;exports.textInput__wrapper=_;
+//# sourceMappingURL=TextInput.module.scss.cjs.map

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

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

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

@@ -0,0 +1,28 @@
+import './TextInput.module.css';const t = "_textInput_14l3m_2", _ = "_textInput__wrapper_14l3m_7", n = "_textInput__input_14l3m_18", e = "_textInput__label_14l3m_29", p = "_textInput__inner_14l3m_56", u = "_textInput__leadingIcon_14l3m_87", l = "_textInput__trailingIcon_14l3m_87", I = "_textInput__counter_14l3m_100", x = {
+  textInput: t,
+  textInput__wrapper: _,
+  textInput__input: n,
+  textInput__label: e,
+  "textInput--label-floated": "_textInput--label-floated_14l3m_49",
+  textInput__inner: p,
+  textInput__leadingIcon: u,
+  textInput__trailingIcon: l,
+  textInput__counter: I,
+  "textInput--size-small": "_textInput--size-small_14l3m_107",
+  "textInput--size-medium": "_textInput--size-medium_14l3m_123",
+  "textInput--size-large": "_textInput--size-large_14l3m_143",
+  "textInput--has-leading-icon": "_textInput--has-leading-icon_14l3m_164",
+  "textInput--invalid": "_textInput--invalid_14l3m_182"
+};
+export {
+  x as default,
+  t as textInput,
+  I as textInput__counter,
+  p as textInput__inner,
+  n as textInput__input,
+  e as textInput__label,
+  u as textInput__leadingIcon,
+  l as textInput__trailingIcon,
+  _ as textInput__wrapper
+};
+//# sourceMappingURL=TextInput.module.scss.js.map

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

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

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

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

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

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

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

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

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

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