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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (226) hide show
  1. package/dist/compass-ui-standalone.css +10 -0
  2. package/dist/compass-ui.css +2 -0
  3. package/dist/components/action-button/ActionButton.cjs +1 -1
  4. package/dist/components/action-button/ActionButton.cjs.map +1 -1
  5. package/dist/components/action-button/ActionButton.d.ts +2 -1
  6. package/dist/components/action-button/ActionButton.d.ts.map +1 -1
  7. package/dist/components/action-button/ActionButton.js +22 -12
  8. package/dist/components/action-button/ActionButton.js.map +1 -1
  9. package/dist/components/action-button/ActionButton.module.css +1 -1
  10. package/dist/components/action-button/ActionButton.module.scss.cjs +1 -1
  11. package/dist/components/action-button/ActionButton.module.scss.js +5 -5
  12. package/dist/components/attachment-card/AttachmentCard.cjs +1 -1
  13. package/dist/components/attachment-card/AttachmentCard.cjs.map +1 -1
  14. package/dist/components/attachment-card/AttachmentCard.d.ts +3 -1
  15. package/dist/components/attachment-card/AttachmentCard.d.ts.map +1 -1
  16. package/dist/components/attachment-card/AttachmentCard.js +92 -82
  17. package/dist/components/attachment-card/AttachmentCard.js.map +1 -1
  18. package/dist/components/attachment-card/AttachmentCard.module.css +1 -1
  19. package/dist/components/attachment-card/AttachmentCard.module.scss.cjs +1 -1
  20. package/dist/components/attachment-card/AttachmentCard.module.scss.js +19 -18
  21. package/dist/components/attachment-card/AttachmentCard.module.scss.js.map +1 -1
  22. package/dist/components/button/Button.module.css +1 -1
  23. package/dist/components/button/Button.module.scss.cjs +1 -1
  24. package/dist/components/button/Button.module.scss.js +15 -15
  25. package/dist/components/channel-sidebar-item/ChannelSidebarItem.cjs +1 -1
  26. package/dist/components/channel-sidebar-item/ChannelSidebarItem.cjs.map +1 -1
  27. package/dist/components/channel-sidebar-item/ChannelSidebarItem.d.ts +4 -1
  28. package/dist/components/channel-sidebar-item/ChannelSidebarItem.d.ts.map +1 -1
  29. package/dist/components/channel-sidebar-item/ChannelSidebarItem.js +112 -92
  30. package/dist/components/channel-sidebar-item/ChannelSidebarItem.js.map +1 -1
  31. package/dist/components/channel-sidebar-item/ChannelSidebarItem.module.css +1 -1
  32. package/dist/components/channel-sidebar-item/ChannelSidebarItem.module.scss.cjs +1 -1
  33. package/dist/components/channel-sidebar-item/ChannelSidebarItem.module.scss.js +22 -20
  34. package/dist/components/channel-sidebar-item/ChannelSidebarItem.module.scss.js.map +1 -1
  35. package/dist/components/checkbox/Checkbox.cjs +1 -1
  36. package/dist/components/checkbox/Checkbox.cjs.map +1 -1
  37. package/dist/components/checkbox/Checkbox.d.ts +3 -3
  38. package/dist/components/checkbox/Checkbox.d.ts.map +1 -1
  39. package/dist/components/checkbox/Checkbox.js +21 -20
  40. package/dist/components/checkbox/Checkbox.js.map +1 -1
  41. package/dist/components/checkbox/Checkbox.module.css +1 -1
  42. package/dist/components/checkbox/Checkbox.module.scss.cjs +1 -1
  43. package/dist/components/checkbox/Checkbox.module.scss.js +7 -7
  44. package/dist/components/chip/Chip.cjs +1 -1
  45. package/dist/components/chip/Chip.cjs.map +1 -1
  46. package/dist/components/chip/Chip.d.ts +3 -5
  47. package/dist/components/chip/Chip.d.ts.map +1 -1
  48. package/dist/components/chip/Chip.js +90 -48
  49. package/dist/components/chip/Chip.js.map +1 -1
  50. package/dist/components/chip/Chip.module.css +1 -1
  51. package/dist/components/chip/Chip.module.scss.cjs +1 -1
  52. package/dist/components/chip/Chip.module.scss.js +9 -9
  53. package/dist/components/chip/ChipGroup.cjs +2 -0
  54. package/dist/components/chip/ChipGroup.cjs.map +1 -0
  55. package/dist/components/chip/ChipGroup.d.ts +16 -0
  56. package/dist/components/chip/ChipGroup.d.ts.map +1 -0
  57. package/dist/components/chip/ChipGroup.js +112 -0
  58. package/dist/components/chip/ChipGroup.js.map +1 -0
  59. package/dist/components/chip/ChipGroup.module.css +1 -0
  60. package/dist/components/chip/ChipGroup.module.scss.cjs +2 -0
  61. package/dist/components/chip/ChipGroup.module.scss.cjs.map +1 -0
  62. package/dist/components/chip/ChipGroup.module.scss.js +7 -0
  63. package/dist/components/chip/ChipGroup.module.scss.js.map +1 -0
  64. package/dist/components/chip/index.cjs +1 -1
  65. package/dist/components/chip/index.d.ts +2 -0
  66. package/dist/components/chip/index.d.ts.map +1 -1
  67. package/dist/components/chip/index.js +4 -2
  68. package/dist/components/chip/index.js.map +1 -1
  69. package/dist/components/combobox/Combobox.cjs +1 -1
  70. package/dist/components/combobox/Combobox.cjs.map +1 -1
  71. package/dist/components/combobox/Combobox.d.ts.map +1 -1
  72. package/dist/components/combobox/Combobox.js +115 -109
  73. package/dist/components/combobox/Combobox.js.map +1 -1
  74. package/dist/components/combobox/Combobox.module.css +1 -1
  75. package/dist/components/combobox/Combobox.module.scss.cjs +1 -1
  76. package/dist/components/combobox/Combobox.module.scss.js +27 -29
  77. package/dist/components/date-range-picker/DateRangePicker.cjs +1 -1
  78. package/dist/components/date-range-picker/DateRangePicker.cjs.map +1 -1
  79. package/dist/components/date-range-picker/DateRangePicker.js +154 -154
  80. package/dist/components/date-range-picker/DateRangePicker.js.map +1 -1
  81. package/dist/components/date-range-picker/DateRangePicker.module.css +1 -1
  82. package/dist/components/date-range-picker/DateRangePicker.module.scss.cjs +1 -1
  83. package/dist/components/date-range-picker/DateRangePicker.module.scss.js +28 -45
  84. package/dist/components/dropdown/Dropdown.cjs +1 -1
  85. package/dist/components/dropdown/Dropdown.cjs.map +1 -1
  86. package/dist/components/dropdown/Dropdown.js +1 -1
  87. package/dist/components/dropdown/Dropdown.js.map +1 -1
  88. package/dist/components/dropdown/Dropdown.module.css +1 -1
  89. package/dist/components/dropdown/Dropdown.module.scss.cjs +1 -1
  90. package/dist/components/dropdown/Dropdown.module.scss.js +15 -16
  91. package/dist/components/global-banner/GlobalBanner.module.css +1 -1
  92. package/dist/components/global-banner/GlobalBanner.module.scss.cjs +1 -1
  93. package/dist/components/global-banner/GlobalBanner.module.scss.js +10 -10
  94. package/dist/components/icon-button/IconButton.cjs +1 -1
  95. package/dist/components/icon-button/IconButton.cjs.map +1 -1
  96. package/dist/components/icon-button/IconButton.d.ts +1 -1
  97. package/dist/components/icon-button/IconButton.d.ts.map +1 -1
  98. package/dist/components/icon-button/IconButton.js +14 -14
  99. package/dist/components/icon-button/IconButton.js.map +1 -1
  100. package/dist/components/icon-button/IconButton.module.css +1 -1
  101. package/dist/components/icon-button/IconButton.module.scss.cjs +1 -1
  102. package/dist/components/icon-button/IconButton.module.scss.js +15 -15
  103. package/dist/components/image-preview/ImagePreview.cjs +1 -1
  104. package/dist/components/image-preview/ImagePreview.cjs.map +1 -1
  105. package/dist/components/image-preview/ImagePreview.d.ts +2 -1
  106. package/dist/components/image-preview/ImagePreview.d.ts.map +1 -1
  107. package/dist/components/image-preview/ImagePreview.js +70 -52
  108. package/dist/components/image-preview/ImagePreview.js.map +1 -1
  109. package/dist/components/image-preview/ImagePreview.module.css +1 -1
  110. package/dist/components/image-preview/ImagePreview.module.scss.cjs +1 -1
  111. package/dist/components/image-preview/ImagePreview.module.scss.js +15 -15
  112. package/dist/components/menu-item/MenuItem.cjs +1 -1
  113. package/dist/components/menu-item/MenuItem.cjs.map +1 -1
  114. package/dist/components/menu-item/MenuItem.js +11 -11
  115. package/dist/components/menu-item/MenuItem.js.map +1 -1
  116. package/dist/components/menu-item/MenuItem.module.css +1 -1
  117. package/dist/components/menu-item/MenuItem.module.scss.cjs +1 -1
  118. package/dist/components/menu-item/MenuItem.module.scss.js +16 -16
  119. package/dist/components/message/Message.module.css +1 -1
  120. package/dist/components/message/Message.module.scss.cjs +1 -1
  121. package/dist/components/message/Message.module.scss.js +20 -20
  122. package/dist/components/message-reactions/MessageReactions.module.css +1 -1
  123. package/dist/components/message-reactions/MessageReactions.module.scss.cjs +1 -1
  124. package/dist/components/message-reactions/MessageReactions.module.scss.js +12 -12
  125. package/dist/components/more-unreads-banner/MoreUnreadsBanner.module.css +1 -1
  126. package/dist/components/more-unreads-banner/MoreUnreadsBanner.module.scss.cjs +1 -1
  127. package/dist/components/more-unreads-banner/MoreUnreadsBanner.module.scss.js +5 -5
  128. package/dist/components/pagination-dots/PaginationDots.module.css +1 -1
  129. package/dist/components/pagination-dots/PaginationDots.module.scss.cjs +1 -1
  130. package/dist/components/pagination-dots/PaginationDots.module.scss.js +8 -8
  131. package/dist/components/radio/Radio.cjs +1 -1
  132. package/dist/components/radio/Radio.cjs.map +1 -1
  133. package/dist/components/radio/Radio.d.ts +3 -3
  134. package/dist/components/radio/Radio.d.ts.map +1 -1
  135. package/dist/components/radio/Radio.js +11 -11
  136. package/dist/components/radio/Radio.js.map +1 -1
  137. package/dist/components/radio/Radio.module.css +1 -1
  138. package/dist/components/radio/Radio.module.scss.cjs +1 -1
  139. package/dist/components/radio/Radio.module.scss.js +11 -11
  140. package/dist/components/search-input/SearchInput.cjs +1 -1
  141. package/dist/components/search-input/SearchInput.cjs.map +1 -1
  142. package/dist/components/search-input/SearchInput.d.ts +2 -0
  143. package/dist/components/search-input/SearchInput.d.ts.map +1 -1
  144. package/dist/components/search-input/SearchInput.js +78 -64
  145. package/dist/components/search-input/SearchInput.js.map +1 -1
  146. package/dist/components/search-input/SearchInput.module.css +1 -1
  147. package/dist/components/search-input/SearchInput.module.scss.cjs +1 -1
  148. package/dist/components/search-input/SearchInput.module.scss.js +16 -23
  149. package/dist/components/search-input/SearchInput.module.scss.js.map +1 -1
  150. package/dist/components/select/Select.cjs +1 -1
  151. package/dist/components/select/Select.cjs.map +1 -1
  152. package/dist/components/select/Select.d.ts.map +1 -1
  153. package/dist/components/select/Select.js +64 -64
  154. package/dist/components/select/Select.js.map +1 -1
  155. package/dist/components/select/Select.module.css +1 -1
  156. package/dist/components/select/Select.module.scss.cjs +1 -1
  157. package/dist/components/select/Select.module.scss.js +24 -26
  158. package/dist/components/switch/Switch.cjs +1 -1
  159. package/dist/components/switch/Switch.cjs.map +1 -1
  160. package/dist/components/switch/Switch.d.ts.map +1 -1
  161. package/dist/components/switch/Switch.js +2 -2
  162. package/dist/components/switch/Switch.js.map +1 -1
  163. package/dist/components/switch/Switch.module.css +1 -1
  164. package/dist/components/switch/Switch.module.scss.cjs +1 -1
  165. package/dist/components/switch/Switch.module.scss.js +15 -15
  166. package/dist/components/tabs/Tabs.cjs +1 -1
  167. package/dist/components/tabs/Tabs.cjs.map +1 -1
  168. package/dist/components/tabs/Tabs.d.ts +4 -0
  169. package/dist/components/tabs/Tabs.d.ts.map +1 -1
  170. package/dist/components/tabs/Tabs.js +47 -31
  171. package/dist/components/tabs/Tabs.js.map +1 -1
  172. package/dist/components/tabs/Tabs.module.css +1 -1
  173. package/dist/components/tabs/Tabs.module.scss.cjs +1 -1
  174. package/dist/components/tabs/Tabs.module.scss.js +8 -7
  175. package/dist/components/tabs/Tabs.module.scss.js.map +1 -1
  176. package/dist/components/tag/Tag.module.css +1 -1
  177. package/dist/components/tag/Tag.module.scss.cjs +1 -1
  178. package/dist/components/tag/Tag.module.scss.js +15 -15
  179. package/dist/components/text-area/TextArea.cjs +1 -1
  180. package/dist/components/text-area/TextArea.cjs.map +1 -1
  181. package/dist/components/text-area/TextArea.d.ts.map +1 -1
  182. package/dist/components/text-area/TextArea.js +57 -56
  183. package/dist/components/text-area/TextArea.js.map +1 -1
  184. package/dist/components/text-area/TextArea.module.css +1 -1
  185. package/dist/components/text-area/TextArea.module.scss.cjs +1 -1
  186. package/dist/components/text-area/TextArea.module.scss.js +12 -17
  187. package/dist/components/text-input/TextInput.cjs +1 -1
  188. package/dist/components/text-input/TextInput.cjs.map +1 -1
  189. package/dist/components/text-input/TextInput.d.ts.map +1 -1
  190. package/dist/components/text-input/TextInput.js +59 -58
  191. package/dist/components/text-input/TextInput.js.map +1 -1
  192. package/dist/components/text-input/TextInput.module.css +1 -1
  193. package/dist/components/text-input/TextInput.module.scss.cjs +1 -1
  194. package/dist/components/text-input/TextInput.module.scss.js +16 -24
  195. package/dist/components/thread-footer/ThreadFooter.cjs +1 -1
  196. package/dist/components/thread-footer/ThreadFooter.cjs.map +1 -1
  197. package/dist/components/thread-footer/ThreadFooter.d.ts +7 -8
  198. package/dist/components/thread-footer/ThreadFooter.d.ts.map +1 -1
  199. package/dist/components/thread-footer/ThreadFooter.js +59 -62
  200. package/dist/components/thread-footer/ThreadFooter.js.map +1 -1
  201. package/dist/components/thread-footer/ThreadFooter.module.css +1 -1
  202. package/dist/components/thread-footer/ThreadFooter.module.scss.cjs +1 -1
  203. package/dist/components/thread-footer/ThreadFooter.module.scss.js +17 -17
  204. package/dist/components/thread-footer/index.d.ts +7 -1
  205. package/dist/components/thread-footer/index.d.ts.map +1 -1
  206. package/dist/components/thread-list-item/ThreadListItem.cjs +1 -1
  207. package/dist/components/thread-list-item/ThreadListItem.cjs.map +1 -1
  208. package/dist/components/thread-list-item/ThreadListItem.d.ts +1 -1
  209. package/dist/components/thread-list-item/ThreadListItem.d.ts.map +1 -1
  210. package/dist/components/thread-list-item/ThreadListItem.js +102 -87
  211. package/dist/components/thread-list-item/ThreadListItem.js.map +1 -1
  212. package/dist/components/thread-list-item/ThreadListItem.module.css +1 -1
  213. package/dist/components/thread-list-item/ThreadListItem.module.scss.cjs +1 -1
  214. package/dist/components/thread-list-item/ThreadListItem.module.scss.js +26 -23
  215. package/dist/components/thread-list-item/ThreadListItem.module.scss.js.map +1 -1
  216. package/dist/components/toast/Toast.module.css +1 -1
  217. package/dist/components/toast/Toast.module.scss.cjs +1 -1
  218. package/dist/components/toast/Toast.module.scss.js +6 -6
  219. package/dist/components/tour-point/TourPoint.module.css +1 -1
  220. package/dist/components/tour-point/TourPoint.module.scss.cjs +1 -1
  221. package/dist/components/tour-point/TourPoint.module.scss.js +28 -28
  222. package/dist/index.cjs +1 -1
  223. package/dist/index.css +31 -29
  224. package/dist/index.js +156 -154
  225. package/dist/index.js.map +1 -1
  226. package/package.json +1 -1
@@ -1,21 +1,21 @@
1
- import './Tag.module.css';const t = "_tag_jtn7u_2", a = "_tag__icon_jtn7u_14", _ = "_tag__label_jtn7u_19", g = {
2
- tag: t,
3
- tag__icon: a,
1
+ import './Tag.module.css';const a = "_tag_ne839_2", t = "_tag__icon_ne839_14", _ = "_tag__label_ne839_19", e = {
2
+ tag: a,
3
+ tag__icon: t,
4
4
  tag__label: _,
5
- "tag--size-x-small": "_tag--size-x-small_jtn7u_22",
6
- "tag--size-small": "_tag--size-small_jtn7u_28",
7
- "tag--type-default": "_tag--type-default_jtn7u_33",
8
- "tag--type-info": "_tag--type-info_jtn7u_37",
9
- "tag--type-info-dim": "_tag--type-info-dim_jtn7u_41",
10
- "tag--type-danger": "_tag--type-danger_jtn7u_45",
11
- "tag--type-success": "_tag--type-success_jtn7u_49",
12
- "tag--type-warning": "_tag--type-warning_jtn7u_53",
13
- "tag--casing-all-caps": "_tag--casing-all-caps_jtn7u_57"
5
+ "tag--size-x-small": "_tag--size-x-small_ne839_22",
6
+ "tag--size-small": "_tag--size-small_ne839_28",
7
+ "tag--type-default": "_tag--type-default_ne839_33",
8
+ "tag--type-info": "_tag--type-info_ne839_37",
9
+ "tag--type-info-dim": "_tag--type-info-dim_ne839_41",
10
+ "tag--type-danger": "_tag--type-danger_ne839_45",
11
+ "tag--type-success": "_tag--type-success_ne839_49",
12
+ "tag--type-warning": "_tag--type-warning_ne839_53",
13
+ "tag--casing-all-caps": "_tag--casing-all-caps_ne839_57"
14
14
  };
15
15
  export {
16
- g as default,
17
- t as tag,
18
- a as tag__icon,
16
+ e as default,
17
+ a as tag,
18
+ t as tag__icon,
19
19
  _ as tag__label
20
20
  };
21
21
  //# sourceMappingURL=Tag.module.scss.js.map
@@ -1,2 +1,2 @@
1
- "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;
1
+ "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;
2
2
  //# sourceMappingURL=TextArea.cjs.map
@@ -1 +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 ...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"}
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"}
@@ -1 +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,+GAoHb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
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"}
@@ -1,86 +1,87 @@
1
- import { jsxs as u, jsx as p } from "react/jsx-runtime";
2
- import { forwardRef as M, useId as O, useState as _, useCallback as f } from "react";
3
- import { toKebab as Q } from "../../utils/string.js";
1
+ import { jsxs as u, jsx as _ } from "react/jsx-runtime";
2
+ import { forwardRef as O, useId as Q, useState as N, useCallback as f } from "react";
3
+ import { toKebab as W } from "../../utils/string.js";
4
4
  import e from "./TextArea.module.scss.js";
5
- const B = M(
5
+ const L = O(
6
6
  function({
7
- className: N = "",
8
- size: I = "medium",
7
+ className: j = "",
8
+ size: y = "medium",
9
9
  label: d,
10
- invalid: m = !1,
11
- maxLength: s,
12
- showCharacterCount: v = !1,
13
- id: h,
10
+ invalid: v = !1,
11
+ maxLength: l,
12
+ showCharacterCount: m = !1,
13
+ id: I,
14
14
  value: c,
15
15
  defaultValue: x,
16
- placeholder: j,
17
- onFocus: a,
16
+ placeholder: h,
17
+ onFocus: s,
18
18
  onBlur: r,
19
19
  onChange: i,
20
- disabled: y,
21
- readOnly: V,
22
- rows: z = 3,
23
- ...F
24
- }, T) {
25
- const $ = O(), n = h ?? $, l = c !== void 0, [k, w] = _(
20
+ disabled: V,
21
+ readOnly: z,
22
+ rows: A = 3,
23
+ "aria-describedby": F,
24
+ ...T
25
+ }, $) {
26
+ const k = Q(), n = I ?? k, a = c !== void 0, [w, C] = N(
26
27
  x ?? ""
27
- ), o = l ? c : k, C = o != null && o !== "", [K, A] = _(!1), R = K || C, S = f(
28
+ ), o = a ? c : w, K = o != null && o !== "", [R, b] = N(!1), S = R || K, U = f(
28
29
  (t) => {
29
- A(!0), a == null || a(t);
30
+ b(!0), s == null || s(t);
30
31
  },
31
- [a]
32
- ), U = f(
32
+ [s]
33
+ ), q = f(
33
34
  (t) => {
34
- A(!1), r == null || r(t);
35
+ b(!1), r == null || r(t);
35
36
  },
36
37
  [r]
37
- ), q = f(
38
+ ), D = f(
38
39
  (t) => {
39
- l || w(t.target.value), i == null || i(t);
40
+ a || C(t.target.value), i == null || i(t);
40
41
  },
41
- [l, i]
42
- ), D = e[`textArea--size-${Q(I)}`], E = m ? e["textArea--invalid"] : "", G = d != null && R ? e["textArea--label-floated"] : "", H = [
43
- e.textArea,
44
- D,
42
+ [a, i]
43
+ ), E = e[`text-area--size-${W(y)}`], G = v ? e["text-area--invalid"] : "", H = d != null && S ? e["text-area--label-floated"] : "", J = [
44
+ e["text-area"],
45
45
  E,
46
46
  G,
47
- N
48
- ].filter(Boolean).join(" "), J = typeof o == "string" ? o.length : 0, b = v && s != null ? `${n}-counter` : void 0;
49
- return /* @__PURE__ */ u("div", { className: H, children: [
50
- /* @__PURE__ */ u("div", { className: e.textArea__wrapper, children: [
51
- d != null && /* @__PURE__ */ p("label", { className: e.textArea__label, htmlFor: n, children: d }),
52
- /* @__PURE__ */ p(
47
+ H,
48
+ j
49
+ ].filter(Boolean).join(" "), M = typeof o == "string" ? o.length : 0, p = m && l != null ? `${n}-counter` : void 0;
50
+ return /* @__PURE__ */ u("div", { className: J, children: [
51
+ /* @__PURE__ */ u("div", { className: e["text-area__wrapper"], children: [
52
+ d != null && /* @__PURE__ */ _("label", { className: e["text-area__label"], htmlFor: n, children: d }),
53
+ /* @__PURE__ */ _(
53
54
  "textarea",
54
55
  {
55
- ref: T,
56
+ ref: $,
56
57
  id: n,
57
- className: e.textArea__input,
58
- value: l ? c : void 0,
59
- defaultValue: l ? void 0 : x,
60
- placeholder: j,
61
- maxLength: s,
62
- disabled: y,
63
- readOnly: V,
64
- rows: z,
65
- "aria-invalid": m ? !0 : void 0,
66
- "aria-describedby": b,
67
- onFocus: S,
68
- onBlur: U,
69
- onChange: q,
70
- ...F
58
+ className: e["text-area__input"],
59
+ value: a ? c : void 0,
60
+ defaultValue: a ? void 0 : x,
61
+ placeholder: h,
62
+ maxLength: l,
63
+ disabled: V,
64
+ readOnly: z,
65
+ rows: A,
66
+ "aria-invalid": v ? !0 : void 0,
67
+ "aria-describedby": [F, p].filter(Boolean).join(" ") || void 0,
68
+ onFocus: U,
69
+ onBlur: q,
70
+ onChange: D,
71
+ ...T
71
72
  }
72
73
  )
73
74
  ] }),
74
- v && s != null && /* @__PURE__ */ u(
75
+ m && l != null && /* @__PURE__ */ u(
75
76
  "div",
76
77
  {
77
- id: b,
78
- className: e.textArea__counter,
78
+ id: p,
79
+ className: e["text-area__counter"],
79
80
  "aria-live": "polite",
80
81
  children: [
81
- J,
82
+ M,
82
83
  " / ",
83
- s
84
+ l
84
85
  ]
85
86
  }
86
87
  )
@@ -88,6 +89,6 @@ const B = M(
88
89
  }
89
90
  );
90
91
  export {
91
- B as default
92
+ L as default
92
93
  };
93
94
  //# sourceMappingURL=TextArea.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.js","sources":["../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import type { TextareaHTMLAttributes, ReactNode, ChangeEvent } from 'react';\nimport { forwardRef, useId, useState, useCallback } from 'react';\nimport { toKebab } from '@/utils/string';\nimport styles from './TextArea.module.scss';\n\nexport type TextAreaSize = 'small' | 'medium' | 'large';\n\nexport interface TextAreaProps extends Omit<\n TextareaHTMLAttributes<HTMLTextAreaElement>,\n 'size'\n> {\n /** Optional CSS class name. */\n className?: string;\n /** When true, shows invalid/error styling. */\n invalid?: boolean;\n /** Floating label content. When provided, label floats on focus or when value is non-empty. */\n label?: ReactNode;\n /** Max length for the textarea; used with showCharacterCount for counter. */\n maxLength?: number;\n /** When true with maxLength, shows \"current / max\" character count below textarea. */\n showCharacterCount?: boolean;\n /** Size variant. Default: Medium. */\n size?: TextAreaSize;\n}\n\n/**\n * Text Areas let people write long-form text that spans multiple lines — descriptions,\n * channel purposes, message drafts, admin notes. They share their visual rhythm with Text\n * Input but trade the single-line constraint for room to breathe.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n function TextArea(\n {\n className = '',\n size = 'medium',\n label,\n invalid = false,\n maxLength,\n showCharacterCount = false,\n id: idProp,\n value: valueProp,\n defaultValue,\n placeholder,\n onFocus,\n onBlur,\n onChange,\n disabled,\n readOnly,\n rows = 3,\n ...rest\n },\n ref,\n ) {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n\n const isControlled = valueProp !== undefined;\n const [uncontrolledValue, setUncontrolledValue] = useState(\n defaultValue ?? '',\n );\n const value = isControlled ? (valueProp as string) : uncontrolledValue;\n const hasValue = value != null && value !== '';\n\n const [isFocused, setIsFocused] = useState(false);\n const labelFloated = isFocused || hasValue;\n\n const handleFocus = useCallback(\n (e: React.FocusEvent<HTMLTextAreaElement>) => {\n setIsFocused(true);\n onFocus?.(e);\n },\n [onFocus],\n );\n const handleBlur = useCallback(\n (e: React.FocusEvent<HTMLTextAreaElement>) => {\n setIsFocused(false);\n onBlur?.(e);\n },\n [onBlur],\n );\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLTextAreaElement>) => {\n if (!isControlled) setUncontrolledValue(e.target.value);\n onChange?.(e);\n },\n [isControlled, onChange],\n );\n\n const sizeClass = styles[`textArea--size-${toKebab(size)}`];\n const invalidClass = invalid ? styles['textArea--invalid'] : '';\n const labelFloatedClass =\n label != null && labelFloated ? styles['textArea--label-floated'] : '';\n\n const rootClass = [\n styles.textArea,\n sizeClass,\n invalidClass,\n labelFloatedClass,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const currentLength = typeof value === 'string' ? value.length : 0;\n const counterId =\n showCharacterCount && maxLength != null ? `${id}-counter` : undefined;\n\n return (\n <div className={rootClass}>\n <div className={styles.textArea__wrapper}>\n {label != null && (\n <label className={styles.textArea__label} htmlFor={id}>\n {label}\n </label>\n )}\n <textarea\n ref={ref}\n id={id}\n className={styles.textArea__input}\n value={isControlled ? valueProp : undefined}\n defaultValue={isControlled ? undefined : defaultValue}\n placeholder={placeholder}\n maxLength={maxLength}\n disabled={disabled}\n readOnly={readOnly}\n rows={rows}\n aria-invalid={invalid ? true : undefined}\n aria-describedby={counterId}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleChange}\n {...rest}\n />\n </div>\n {showCharacterCount && maxLength != null && (\n <div\n id={counterId}\n className={styles.textArea__counter}\n aria-live=\"polite\"\n >\n {currentLength} / {maxLength}\n </div>\n )}\n </div>\n );\n },\n);\n\nexport default TextArea;\n"],"names":["TextArea","forwardRef","className","size","label","invalid","maxLength","showCharacterCount","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","readOnly","rows","rest","ref","generatedId","useId","id","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","e","handleBlur","handleChange","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","rootClass","currentLength","counterId","jsxs","jsx"],"mappings":"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"}
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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"}
@@ -1 +1 @@
1
- ._textArea_ewczf_2{display:flex;flex-direction:column;width:100%}._textArea__wrapper_ewczf_7{position:relative;background-color:var(--center-channel-bg);border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.16);transition:box-shadow var(--duration-quick) var(--ease-transition)}._textArea_ewczf_2:has(._textArea__input_ewczf_14:not(:disabled)):hover:not(:focus-within) ._textArea__wrapper_ewczf_7{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._textArea_ewczf_2:has(._textArea__input_ewczf_14:focus-visible) ._textArea__wrapper_ewczf_7{box-shadow:inset 0 0 0 1px var(--button-bg),0 0 0 1px var(--button-bg)}._textArea_ewczf_2:has(._textArea__input_ewczf_14:disabled) ._textArea__wrapper_ewczf_7{background-color:var(--center-channel-bg);opacity:.56}._textArea__label_ewczf_24{position:absolute;left:var(--spacing-xs);top:var(--spacing-s);padding:0 var(--spacing-xxxs);margin:0;font-family:Open Sans,sans-serif;font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.64);background-color:var(--center-channel-bg);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);transition:font-size var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._textArea--label-floated_ewczf_43 ._textArea__label_ewczf_24{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._textArea__input_ewczf_14{display:block;width:100%;margin:0;border:0;background:transparent;resize:vertical;font-family:Open Sans,sans-serif;font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-regular);color:var(--center-channel-color);box-sizing:border-box}._textArea__input_ewczf_14:focus{outline:none}._textArea__input_ewczf_14::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._textArea__input_ewczf_14:disabled{cursor:not-allowed;resize:none}._textArea__counter_ewczf_74{margin-top:var(--spacing-xxxs);font-family:Open Sans,sans-serif;font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._textArea--size-small_ewczf_81 ._textArea__input_ewczf_14{padding:var(--spacing-xs) var(--spacing-m);font-size:var(--font-size-75);line-height:var(--line-height-75)}._textArea--size-small_ewczf_81 ._textArea__label_ewczf_24{top:var(--spacing-xs);font-size:var(--font-size-75);line-height:var(--line-height-25)}._textArea--size-small_ewczf_81._textArea--label-floated_ewczf_43 ._textArea__label_ewczf_24{top:0;font-size:var(--font-size-25);line-height:14px}._textArea--size-medium_ewczf_96 ._textArea__input_ewczf_14{padding:var(--spacing-s) var(--spacing-l);font-size:var(--font-size-100);line-height:var(--line-height-100)}._textArea--size-medium_ewczf_96 ._textArea__label_ewczf_24{top:var(--spacing-s);left:var(--spacing-m);font-size:var(--font-size-100)}._textArea--size-medium_ewczf_96._textArea--label-floated_ewczf_43 ._textArea__label_ewczf_24{top:0;font-size:var(--font-size-25);line-height:14px}._textArea--size-large_ewczf_111 ._textArea__input_ewczf_14{padding:var(--spacing-m) var(--spacing-l);font-size:var(--font-size-200);line-height:var(--line-height-200)}._textArea--size-large_ewczf_111 ._textArea__label_ewczf_24{top:var(--spacing-m);left:var(--spacing-m);font-size:var(--font-size-200);line-height:var(--line-height-200)}._textArea--size-large_ewczf_111._textArea--label-floated_ewczf_43 ._textArea__label_ewczf_24{top:0;font-size:var(--font-size-25);line-height:14px}._textArea_ewczf_2:has(._textArea__input_ewczf_14:focus-visible) ._textArea__label_ewczf_24{color:var(--button-bg)}._textArea_ewczf_2:has(._textArea__label_ewczf_24):not(._textArea--label-floated_ewczf_43) ._textArea__input_ewczf_14::placeholder{color:transparent}._textArea--invalid_ewczf_133 ._textArea__wrapper_ewczf_7{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._textArea--invalid_ewczf_133:has(._textArea__input_ewczf_14:focus-visible) ._textArea__wrapper_ewczf_7{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 1px var(--error-text, var(--color-danger))}._textArea--invalid_ewczf_133 ._textArea__label_ewczf_24{color:var(--error-text, var(--color-danger))}._textArea--invalid_ewczf_133:has(._textArea__input_ewczf_14:focus-visible) ._textArea__label_ewczf_24{color:var(--error-text, var(--color-danger))}
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))}
@@ -1,2 +1,2 @@
1
- "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;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./TextArea.module.css');const e={"text-area":"_text-area_1qev1_2","text-area__wrapper":"_text-area__wrapper_1qev1_7","text-area__input":"_text-area__input_1qev1_14","text-area__label":"_text-area__label_1qev1_24","text-area--label-floated":"_text-area--label-floated_1qev1_43","text-area__counter":"_text-area__counter_1qev1_74","text-area--size-small":"_text-area--size-small_1qev1_81","text-area--size-medium":"_text-area--size-medium_1qev1_96","text-area--size-large":"_text-area--size-large_1qev1_111","text-area--invalid":"_text-area--invalid_1qev1_133"};exports.default=e;
2
2
  //# sourceMappingURL=TextArea.module.scss.cjs.map
@@ -1,21 +1,16 @@
1
- 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 = {
2
- textArea: e,
3
- textArea__wrapper: t,
4
- textArea__input: _,
5
- textArea__label: a,
6
- "textArea--label-floated": "_textArea--label-floated_ewczf_43",
7
- textArea__counter: r,
8
- "textArea--size-small": "_textArea--size-small_ewczf_81",
9
- "textArea--size-medium": "_textArea--size-medium_ewczf_96",
10
- "textArea--size-large": "_textArea--size-large_ewczf_111",
11
- "textArea--invalid": "_textArea--invalid_ewczf_133"
1
+ import './TextArea.module.css';const e = {
2
+ "text-area": "_text-area_1qev1_2",
3
+ "text-area__wrapper": "_text-area__wrapper_1qev1_7",
4
+ "text-area__input": "_text-area__input_1qev1_14",
5
+ "text-area__label": "_text-area__label_1qev1_24",
6
+ "text-area--label-floated": "_text-area--label-floated_1qev1_43",
7
+ "text-area__counter": "_text-area__counter_1qev1_74",
8
+ "text-area--size-small": "_text-area--size-small_1qev1_81",
9
+ "text-area--size-medium": "_text-area--size-medium_1qev1_96",
10
+ "text-area--size-large": "_text-area--size-large_1qev1_111",
11
+ "text-area--invalid": "_text-area--invalid_1qev1_133"
12
12
  };
13
13
  export {
14
- x as default,
15
- e as textArea,
16
- r as textArea__counter,
17
- _ as textArea__input,
18
- a as textArea__label,
19
- t as textArea__wrapper
14
+ e as default
20
15
  };
21
16
  //# sourceMappingURL=TextArea.module.scss.js.map
@@ -1,2 +1,2 @@
1
- "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;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),l=require("react"),X=require("../../utils/string.cjs"),t=require("./TextInput.module.scss.cjs"),Y=l.forwardRef(function({className:C="",size:R="medium",label:r,leadingIcon:f,trailingIcon:p,invalid:_=!1,maxLength:i,showCharacterCount:v=!1,id:T,value:x,defaultValue:b,placeholder:g,onFocus:u,onBlur:c,onChange:d,disabled:k,readOnly:q,"aria-describedby":I,...S},n){const V=l.useId(),j=T??V,m=l.useRef(null),z=l.useCallback(e=>{if(m.current=e,typeof n=="function"){const y=n(e);return()=>{m.current=null,typeof y=="function"&&y()}}n&&(n.current=e)},[n]),a=x!==void 0,[M,$]=l.useState(b??""),o=a?x:M,w=o!=null&&o!=="",[F,h]=l.useState(!1),K=F||w,O=l.useCallback(e=>{h(!0),u==null||u(e)},[u]),U=l.useCallback(e=>{h(!1),c==null||c(e)},[c]),A=l.useCallback(e=>{a||$(e.target.value),d==null||d(e)},[a,d]),D=t.default[`text-input--size-${X.toKebab(R)}`],E=_?t.default["text-input--invalid"]:"",G=r!=null&&K?t.default["text-input--label-floated"]:"",H=f!=null?t.default["text-input--has-leading-icon"]:"",J=p!=null?t.default["text-input--has-trailing-icon"]:"",Q=[t.default["text-input"],D,E,G,H,J,C].filter(Boolean).join(" "),W=typeof o=="string"?o.length:0,N=v&&i!=null?`${j}-counter`:void 0;return s.jsxs("div",{className:Q,children:[s.jsx("div",{className:t.default["text-input__wrapper"],children:s.jsxs("label",{className:t.default["text-input__inner"],children:[r!=null&&s.jsx("span",{className:t.default["text-input__label"],children:r}),f!=null&&s.jsx("span",{className:t.default["text-input__leading-icon"],children:f}),s.jsx("input",{ref:z,id:j,className:t.default["text-input__input"],value:a?x:void 0,defaultValue:a?void 0:b,placeholder:g,maxLength:i,disabled:k,readOnly:q,"aria-invalid":_?!0:void 0,"aria-describedby":[I,N].filter(Boolean).join(" ")||void 0,onFocus:O,onBlur:U,onChange:A,...S}),p!=null&&s.jsx("span",{className:t.default["text-input__trailing-icon"],children:p})]})}),v&&i!=null&&s.jsxs("div",{id:N,className:t.default["text-input__counter"],"aria-live":"polite",children:[W," / ",i]})]})});exports.default=Y;
2
2
  //# sourceMappingURL=TextInput.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"TextInput.cjs","sources":["../../../src/components/text-input/TextInput.tsx"],"sourcesContent":["import type {\n InputHTMLAttributes,\n ReactNode,\n ChangeEvent,\n RefCallback,\n} from 'react';\nimport { forwardRef, useId, useState, useCallback, useRef } from 'react';\nimport { toKebab } from '@/utils/string';\nimport styles from './TextInput.module.scss';\n\nexport type TextInputSize = 'small' | 'medium' | 'large';\n\nexport interface TextInputProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'size'\n> {\n /** Optional CSS class name. */\n className?: string;\n /** When true, shows invalid/error styling. */\n invalid?: boolean;\n /** Floating label content. When provided, label floats on focus or when value is non-empty. */\n label?: ReactNode;\n /** Leading icon (e.g. <Icon glyph={<SearchIcon />} size=\"16\" />). */\n leadingIcon?: ReactNode;\n /** Max length for the input; used with showCharacterCount for counter. */\n maxLength?: number;\n /** When true with maxLength, shows \"current / max\" character count below input. */\n showCharacterCount?: boolean;\n /** Size variant. Figma: Small (32px), Medium (40px), Large (48px). Default: Medium. */\n size?: TextInputSize;\n /** Trailing icon. */\n trailingIcon?: ReactNode;\n}\n\n/**\n * Text Inputs let people enter and edit a single line of text — names, emails, search\n * queries, channel titles. They're the workhorse of every form and modal in Mattermost.\n */\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n function TextInput(\n {\n className = '',\n size = 'medium',\n label,\n leadingIcon,\n trailingIcon,\n invalid = false,\n maxLength,\n showCharacterCount = false,\n id: idProp,\n value: valueProp,\n defaultValue,\n placeholder,\n onFocus,\n onBlur,\n onChange,\n disabled,\n readOnly,\n ...rest\n },\n ref,\n ) {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const setInputRef = useCallback(\n (node: HTMLInputElement | null) => {\n inputRef.current = node;\n if (typeof ref === 'function') {\n const cleanup = (ref as RefCallback<HTMLInputElement>)(node);\n return () => {\n inputRef.current = null;\n if (typeof cleanup === 'function') cleanup();\n };\n }\n if (ref) ref.current = node;\n },\n [ref],\n );\n\n const isControlled = valueProp !== undefined;\n const [uncontrolledValue, setUncontrolledValue] = useState(\n defaultValue ?? '',\n );\n const value = isControlled ? (valueProp as string) : uncontrolledValue;\n const hasValue = value != null && value !== '';\n\n const [isFocused, setIsFocused] = useState(false);\n const labelFloated = isFocused || hasValue;\n\n const handleFocus = useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n setIsFocused(true);\n onFocus?.(e);\n },\n [onFocus],\n );\n const handleBlur = useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n setIsFocused(false);\n onBlur?.(e);\n },\n [onBlur],\n );\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n if (!isControlled) setUncontrolledValue(e.target.value);\n onChange?.(e);\n },\n [isControlled, onChange],\n );\n\n const sizeClass = styles[`textInput--size-${toKebab(size)}`];\n const invalidClass = invalid ? styles['textInput--invalid'] : '';\n const labelFloatedClass =\n label != null && labelFloated ? styles['textInput--label-floated'] : '';\n const hasLeadingClass =\n leadingIcon != null ? styles['textInput--has-leading-icon'] : '';\n const hasTrailingClass =\n trailingIcon != null ? styles['textInput--has-trailing-icon'] : '';\n\n const rootClass = [\n styles.textInput,\n sizeClass,\n invalidClass,\n labelFloatedClass,\n hasLeadingClass,\n hasTrailingClass,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const currentLength = typeof value === 'string' ? value.length : 0;\n const counterId =\n showCharacterCount && maxLength != null ? `${id}-counter` : undefined;\n\n return (\n <div className={rootClass}>\n <div className={styles.textInput__wrapper}>\n <label className={styles.textInput__inner}>\n {label != null && (\n <span className={styles.textInput__label}>{label}</span>\n )}\n {leadingIcon != null && (\n <span className={styles.textInput__leadingIcon}>\n {leadingIcon}\n </span>\n )}\n <input\n ref={setInputRef}\n id={id}\n className={styles.textInput__input}\n value={isControlled ? valueProp : undefined}\n defaultValue={isControlled ? undefined : defaultValue}\n placeholder={placeholder}\n maxLength={maxLength}\n disabled={disabled}\n readOnly={readOnly}\n aria-invalid={invalid ? true : undefined}\n aria-describedby={counterId}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleChange}\n {...rest}\n />\n {trailingIcon != null && (\n <span className={styles.textInput__trailingIcon}>\n {trailingIcon}\n </span>\n )}\n </label>\n </div>\n {showCharacterCount && maxLength != null && (\n <div\n id={counterId}\n className={styles.textInput__counter}\n aria-live=\"polite\"\n >\n {currentLength} / {maxLength}\n </div>\n )}\n </div>\n );\n },\n);\n\nexport default TextInput;\n"],"names":["TextInput","forwardRef","className","size","label","leadingIcon","trailingIcon","invalid","maxLength","showCharacterCount","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","readOnly","rest","ref","generatedId","useId","id","inputRef","useRef","setInputRef","useCallback","node","cleanup","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","handleBlur","handleChange","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","hasLeadingClass","hasTrailingClass","rootClass","currentLength","counterId","jsxs","jsx"],"mappings":"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"}
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 'aria-describedby': describedBy,\n ...rest\n },\n ref,\n ) {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const setInputRef = useCallback(\n (node: HTMLInputElement | null) => {\n inputRef.current = node;\n if (typeof ref === 'function') {\n const cleanup = (ref as RefCallback<HTMLInputElement>)(node);\n return () => {\n inputRef.current = null;\n if (typeof cleanup === 'function') cleanup();\n };\n }\n if (ref) ref.current = node;\n },\n [ref],\n );\n\n const isControlled = valueProp !== undefined;\n const [uncontrolledValue, setUncontrolledValue] = useState(\n defaultValue ?? '',\n );\n const value = isControlled ? (valueProp as string) : uncontrolledValue;\n const hasValue = value != null && value !== '';\n\n const [isFocused, setIsFocused] = useState(false);\n const labelFloated = isFocused || hasValue;\n\n const handleFocus = useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n setIsFocused(true);\n onFocus?.(e);\n },\n [onFocus],\n );\n const handleBlur = useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n setIsFocused(false);\n onBlur?.(e);\n },\n [onBlur],\n );\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n if (!isControlled) setUncontrolledValue(e.target.value);\n onChange?.(e);\n },\n [isControlled, onChange],\n );\n\n const sizeClass = styles[`text-input--size-${toKebab(size)}`];\n const invalidClass = invalid ? styles['text-input--invalid'] : '';\n const labelFloatedClass =\n label != null && labelFloated ? styles['text-input--label-floated'] : '';\n const hasLeadingClass =\n leadingIcon != null ? styles['text-input--has-leading-icon'] : '';\n const hasTrailingClass =\n trailingIcon != null ? styles['text-input--has-trailing-icon'] : '';\n\n const rootClass = [\n styles['text-input'],\n sizeClass,\n invalidClass,\n labelFloatedClass,\n hasLeadingClass,\n hasTrailingClass,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const currentLength = typeof value === 'string' ? value.length : 0;\n const counterId =\n showCharacterCount && maxLength != null ? `${id}-counter` : undefined;\n\n return (\n <div className={rootClass}>\n <div className={styles['text-input__wrapper']}>\n <label className={styles['text-input__inner']}>\n {label != null && (\n <span className={styles['text-input__label']}>{label}</span>\n )}\n {leadingIcon != null && (\n <span className={styles['text-input__leading-icon']}>\n {leadingIcon}\n </span>\n )}\n <input\n ref={setInputRef}\n id={id}\n className={styles['text-input__input']}\n value={isControlled ? valueProp : undefined}\n defaultValue={isControlled ? undefined : defaultValue}\n placeholder={placeholder}\n maxLength={maxLength}\n disabled={disabled}\n readOnly={readOnly}\n aria-invalid={invalid ? true : undefined}\n aria-describedby={\n [describedBy, counterId].filter(Boolean).join(' ') || undefined\n }\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleChange}\n {...rest}\n />\n {trailingIcon != null && (\n <span className={styles['text-input__trailing-icon']}>\n {trailingIcon}\n </span>\n )}\n </label>\n </div>\n {showCharacterCount && maxLength != null && (\n <div\n id={counterId}\n className={styles['text-input__counter']}\n aria-live=\"polite\"\n >\n {currentLength} / {maxLength}\n </div>\n )}\n </div>\n );\n },\n);\n\nexport default TextInput;\n"],"names":["TextInput","forwardRef","className","size","label","leadingIcon","trailingIcon","invalid","maxLength","showCharacterCount","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","readOnly","describedBy","rest","ref","generatedId","useId","id","inputRef","useRef","setInputRef","useCallback","node","cleanup","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","handleBlur","handleChange","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","hasLeadingClass","hasTrailingClass","rootClass","currentLength","counterId","jsxs","jsx"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/components/text-input/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,SAAS,EAGV,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,CACP;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+FAA+F;IAC/F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qEAAqE;IACrE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mFAAmF;IACnF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uFAAuF;IACvF,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,qBAAqB;IACrB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED;;;GAGG;AACH,QAAA,MAAM,SAAS,6GAoJd,CAAC;AAEF,eAAe,SAAS,CAAC"}
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,6GAuJd,CAAC;AAEF,eAAe,SAAS,CAAC"}