@versini/ui-textarea 4.0.5 → 4.0.7

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 (4) hide show
  1. package/README.md +148 -1
  2. package/dist/components/TextArea/TextArea.js +172 -175
  3. package/dist/index.js +3 -3
  4. package/package.json +7 -5
package/README.md CHANGED
@@ -1,3 +1,150 @@
1
1
  # @versini/ui-textarea
2
2
 
3
- A simple text area component for React.
3
+ [![npm version](https://img.shields.io/npm/v/@versini/ui-textarea?style=flat-square)](https://www.npmjs.com/package/@versini/ui-textarea)
4
+
5
+ > An accessible and feature-rich React textarea component built with TypeScript and TailwindCSS.
6
+
7
+ The TextArea component provides multi-line text input with comprehensive form features including validation states, helper text, character counting, and customizable styling options.
8
+
9
+ ## Table of Contents
10
+
11
+ - [Features](#features)
12
+ - [Installation](#installation)
13
+ - [Usage](#usage)
14
+ - [API](#api)
15
+
16
+ ## Features
17
+
18
+ - **♿ Accessible**: WCAG compliant with proper labeling and keyboard navigation
19
+ - **🎨 Customizable**: Multiple themes, sizes, and styling options
20
+ - **🔧 Form Integration**: Built-in validation states and helper text
21
+ - **📊 Character Counting**: Optional character limit with visual feedback
22
+ - **🌲 Tree-shakeable**: Lightweight and optimized for bundle size
23
+ - **🔧 TypeScript**: Fully typed with comprehensive prop definitions
24
+
25
+ ## Installation
26
+
27
+ ```bash
28
+ npm install @versini/ui-textarea
29
+ ```
30
+
31
+ > **Note**: This component requires TailwindCSS and the `@versini/ui-styles` plugin for proper styling. See the [root README](../../README.md#tailwindcss-setup) for complete setup instructions.
32
+
33
+ ## Usage
34
+
35
+ ### Basic TextArea
36
+
37
+ ```tsx
38
+ import { TextArea } from "@versini/ui-textarea";
39
+
40
+ function App() {
41
+ return (
42
+ <TextArea
43
+ label="Message"
44
+ name="message"
45
+ placeholder="Enter your message here..."
46
+ rows={4}
47
+ />
48
+ );
49
+ }
50
+ ```
51
+
52
+ ### TextArea with Character Limit
53
+
54
+ ```tsx
55
+ import { TextArea } from "@versini/ui-textarea";
56
+
57
+ function App() {
58
+ return (
59
+ <TextArea
60
+ label="Tweet"
61
+ name="tweet"
62
+ placeholder="What's happening?"
63
+ maxLength={280}
64
+ helperText="Share your thoughts"
65
+ rows={3}
66
+ />
67
+ );
68
+ }
69
+ ```
70
+
71
+ ### TextArea with Error State
72
+
73
+ ```tsx
74
+ import { TextArea } from "@versini/ui-textarea";
75
+
76
+ function App() {
77
+ return (
78
+ <TextArea
79
+ label="Description"
80
+ name="description"
81
+ error
82
+ helperText="Description is required"
83
+ placeholder="Enter a description..."
84
+ />
85
+ );
86
+ }
87
+ ```
88
+
89
+ ## API
90
+
91
+ ### TextArea Props
92
+
93
+ | Prop | Type | Default | Description |
94
+ | ----------------- | ----------------------------------------------- | ---------- | -------------------------------------------- |
95
+ | label | `string` | - | The label of the TextArea (required) |
96
+ | name | `string` | - | The name of the TextArea (required) |
97
+ | error | `boolean` | `false` | Whether the TextArea is in error state |
98
+ | helperText | `string` | - | Text to add to the bottom of the TextArea |
99
+ | helperTextOnFocus | `boolean` | `false` | Show helper text only when focused |
100
+ | mode | `"dark" \| "light" \| "system" \| "alt-system"` | `"system"` | Theme mode |
101
+ | focusMode | `"dark" \| "light" \| "system" \| "alt-system"` | `"system"` | Focus ring color mode |
102
+ | labelHidden | `boolean` | `false` | Hide label visually but retain accessibility |
103
+ | noBorder | `boolean` | `false` | Whether to render without border |
104
+ | raw | `boolean` | `false` | Whether to render without styles |
105
+
106
+ _Also supports all standard HTML textarea element attributes_
107
+
108
+ ## Examples
109
+
110
+ ### Comment Form
111
+
112
+ ```tsx
113
+ import { TextArea } from "@versini/ui-textarea";
114
+ import { Button } from "@versini/ui-button";
115
+
116
+ function CommentForm() {
117
+ return (
118
+ <div className="space-y-4">
119
+ <TextArea
120
+ label="Add a comment"
121
+ name="comment"
122
+ placeholder="Share your thoughts..."
123
+ rows={4}
124
+ maxLength={500}
125
+ helperText="Be respectful and constructive"
126
+ />
127
+ <Button variant="primary">Post Comment</Button>
128
+ </div>
129
+ );
130
+ }
131
+ ```
132
+
133
+ ### Feedback Form
134
+
135
+ ```tsx
136
+ import { TextArea } from "@versini/ui-textarea";
137
+
138
+ function FeedbackForm() {
139
+ return (
140
+ <TextArea
141
+ label="Feedback"
142
+ name="feedback"
143
+ placeholder="Tell us how we can improve..."
144
+ rows={6}
145
+ helperText="Your feedback helps us improve our service"
146
+ helperTextOnFocus
147
+ />
148
+ );
149
+ }
150
+ ```
package/dist/components/TextArea/TextArea.js CHANGED
@@ -1,22 +1,22 @@
1
- import { jsx as g, jsxs as pe } from "react/jsx-runtime";
2
- import ye, { useRef as f, useCallback as me, useEffect as S, useMemo as J, useState as _, useId as xe, useReducer as he, useLayoutEffect as L } from "react";
1
+ import { jsx as A, jsxs as ue } from "react/jsx-runtime";
2
+ import de, { useRef as f, useCallback as fe, useEffect as S, useMemo as B, useState as v, useId as pe, useReducer as ye, useLayoutEffect as E } from "react";
3
3
  import c from "clsx";
4
- const K = "av-text-area", Ae = "av-text-area-wrapper", P = "av-text-area-helper-text", ge = "av-text-area__control--right", Te = "av-text-area__control--left";
5
- function ke() {
4
+ const W = "av-text-area", xe = "av-text-area-wrapper", w = "av-text-area-helper-text", me = "av-text-area__control--right", he = "av-text-area__control--left";
5
+ function Ae() {
6
6
  const e = f(!1);
7
7
  return S(() => (e.current = !0, () => {
8
8
  e.current = !1;
9
- }), []), me(() => e.current, []);
9
+ }), []), fe(() => e.current, []);
10
10
  }
11
- function be(e) {
12
- return J(() => e.every((r) => r == null) ? () => {
11
+ function ge(e) {
12
+ return B(() => e.every((r) => r == null) ? () => {
13
13
  } : (r) => {
14
14
  e.forEach((t) => {
15
15
  typeof t == "function" ? t(r) : t != null && (t.current = r);
16
16
  });
17
17
  }, [...e]);
18
18
  }
19
- const ve = {
19
+ const Te = {
20
20
  x: 0,
21
21
  y: 0,
22
22
  width: 0,
@@ -26,18 +26,18 @@ const ve = {
26
26
  bottom: 0,
27
27
  right: 0
28
28
  };
29
- function W(e) {
30
- const r = ke(), t = f(0), n = f(null), [a, o] = _(ve), s = J(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((l) => {
31
- const u = l[0];
32
- u && (cancelAnimationFrame(t.current), t.current = requestAnimationFrame(() => {
33
- n.current && r() && o(u.contentRect);
29
+ function G(e) {
30
+ const r = Ae(), t = f(0), n = f(null), [a, o] = v(Te), s = B(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((l) => {
31
+ const i = l[0];
32
+ i && (cancelAnimationFrame(t.current), t.current = requestAnimationFrame(() => {
33
+ n.current && r() && o(i.contentRect);
34
34
  }));
35
35
  }), [r]);
36
- return S(() => (n.current && (s == null || s.observe(n.current, e)), () => {
37
- s == null || s.disconnect(), t.current && cancelAnimationFrame(t.current);
36
+ return S(() => (n.current && s?.observe(n.current, e), () => {
37
+ s?.disconnect(), t.current && cancelAnimationFrame(t.current);
38
38
  }), [s, e]), [n, a];
39
39
  }
40
- function Re({
40
+ function be({
41
41
  value: e,
42
42
  defaultValue: r,
43
43
  finalValue: t,
@@ -45,10 +45,10 @@ function Re({
45
45
  },
46
46
  initialControlledDelay: a = 0
47
47
  }) {
48
- const [o, s] = _(!1), [l, u] = _(
48
+ const [o, s] = v(!1), [l, i] = v(
49
49
  r !== void 0 ? r : t
50
50
  ), p = (y) => {
51
- u(y), n == null || n(y);
51
+ i(y), n?.(y);
52
52
  };
53
53
  return S(() => {
54
54
  (async () => e !== void 0 && !o && a > 0 && (await new Promise(
@@ -56,8 +56,8 @@ function Re({
56
56
  ), s(!0)))();
57
57
  }, [e, a, o]), e !== void 0 ? !o && a > 0 ? ["", n, !0] : [e, n, !0] : [l, p, !1];
58
58
  }
59
- function _e(e) {
60
- const r = xe();
59
+ function Re(e) {
60
+ const r = pe();
61
61
  if (!e)
62
62
  return r;
63
63
  if (typeof e == "number" || typeof e == "string")
@@ -67,7 +67,7 @@ function _e(e) {
67
67
  return typeof t == "number" || typeof t == "string" ? `${n}${t}` : `${n}${r}`;
68
68
  }
69
69
  }
70
- const Q = "SET_ANNOUNCEMENT", Y = "CLEAR_ANNOUNCEMENT", Ne = {
70
+ const q = "SET_ANNOUNCEMENT", J = "CLEAR_ANNOUNCEMENT", ke = {
71
71
  alert: null,
72
72
  alertdialog: null,
73
73
  log: "polite",
@@ -75,14 +75,14 @@ const Q = "SET_ANNOUNCEMENT", Y = "CLEAR_ANNOUNCEMENT", Ne = {
75
75
  progressbar: null,
76
76
  status: "polite",
77
77
  timer: "assertive"
78
- }, Ce = (e, r) => {
79
- switch (r == null ? void 0 : r.type) {
80
- case Q:
78
+ }, ve = (e, r) => {
79
+ switch (r?.type) {
80
+ case q:
81
81
  return {
82
82
  ...e,
83
83
  announcement: r.payload
84
84
  };
85
- case Y:
85
+ case J:
86
86
  return {
87
87
  ...e,
88
88
  announcement: null
@@ -90,14 +90,14 @@ const Q = "SET_ANNOUNCEMENT", Y = "CLEAR_ANNOUNCEMENT", Ne = {
90
90
  default:
91
91
  return e;
92
92
  }
93
- }, Ee = ({
93
+ }, _e = ({
94
94
  onAnnouncementClear: e,
95
95
  dispatch: r
96
96
  }) => {
97
97
  r({
98
- type: Y
98
+ type: J
99
99
  }), typeof e == "function" && e();
100
- }, q = ({
100
+ }, z = ({
101
101
  children: e,
102
102
  clearAnnouncementDelay: r,
103
103
  clearAnnouncementTimeoutRef: t,
@@ -105,16 +105,16 @@ const Q = "SET_ANNOUNCEMENT", Y = "CLEAR_ANNOUNCEMENT", Ne = {
105
105
  dispatch: a
106
106
  }) => {
107
107
  clearTimeout(t.current), e !== null && a({
108
- type: Q,
108
+ type: q,
109
109
  payload: e
110
110
  }), r && (t.current = setTimeout(
111
- () => Ee({
111
+ () => _e({
112
112
  onAnnouncementClear: n,
113
113
  dispatch: a
114
114
  }),
115
115
  r
116
116
  ));
117
- }, Le = ({
117
+ }, Ne = ({
118
118
  children: e,
119
119
  announcementTimeoutRef: r,
120
120
  announcementDelay: t,
@@ -123,13 +123,13 @@ const Q = "SET_ANNOUNCEMENT", Y = "CLEAR_ANNOUNCEMENT", Ne = {
123
123
  onAnnouncementClear: o,
124
124
  dispatch: s
125
125
  }) => {
126
- clearTimeout(r.current), t ? r.current = setTimeout(q, t, {
126
+ clearTimeout(r.current), t ? r.current = setTimeout(z, t, {
127
127
  children: e,
128
128
  clearAnnouncementDelay: n,
129
129
  clearAnnouncementTimeoutRef: a,
130
130
  onAnnouncementClear: o,
131
131
  dispatch: s
132
- }) : q({
132
+ }) : z({
133
133
  children: e,
134
134
  clearAnnouncementDelay: n,
135
135
  clearAnnouncementTimeoutRef: a,
@@ -137,7 +137,7 @@ const Q = "SET_ANNOUNCEMENT", Y = "CLEAR_ANNOUNCEMENT", Ne = {
137
137
  dispatch: s
138
138
  });
139
139
  };
140
- function Oe({
140
+ function Ce({
141
141
  children: e,
142
142
  className: r,
143
143
  politeness: t,
@@ -146,21 +146,21 @@ function Oe({
146
146
  clearAnnouncementDelay: o,
147
147
  onAnnouncementClear: s,
148
148
  visible: l,
149
- ...u
149
+ ...i
150
150
  }) {
151
- const p = f(null), y = f(null), [b, N] = he(Ce, {
151
+ const p = f(null), y = f(null), [b, _] = ye(ve, {
152
152
  announcement: null
153
153
  });
154
- let T = t;
155
- typeof T > "u" && (T = n ? Ne[n] : "assertive"), S(() => {
156
- Le({
154
+ let g = t;
155
+ typeof g > "u" && (g = n ? ke[n] : "assertive"), S(() => {
156
+ Ne({
157
157
  announcementTimeoutRef: p,
158
158
  announcementDelay: a,
159
159
  children: e,
160
160
  clearAnnouncementDelay: o,
161
161
  clearAnnouncementTimeoutRef: y,
162
162
  onAnnouncementClear: s,
163
- dispatch: N
163
+ dispatch: _
164
164
  });
165
165
  }, [
166
166
  e,
@@ -168,46 +168,46 @@ function Oe({
168
168
  o,
169
169
  s
170
170
  ]);
171
- const d = c(r, {
171
+ const u = c(r, {
172
172
  "sr-only": !l
173
173
  });
174
- return /* @__PURE__ */ g(
174
+ return /* @__PURE__ */ A(
175
175
  "div",
176
176
  {
177
- "aria-live": T,
177
+ "aria-live": g,
178
178
  ...n && { role: n },
179
- className: d,
180
- ...u,
179
+ className: u,
180
+ ...i,
181
181
  children: b.announcement
182
182
  }
183
183
  );
184
184
  }
185
185
  /*!
186
- @versini/ui-liveregion v2.0.5
186
+ @versini/ui-liveregion v2.0.7
187
187
  © 2025 gizmette.com
188
188
  */
189
189
  try {
190
190
  window.__VERSINI_UI_LIVEREGION__ || (window.__VERSINI_UI_LIVEREGION__ = {
191
- version: "2.0.5",
192
- buildTime: "06/28/2025 08:58 PM EDT",
191
+ version: "2.0.7",
192
+ buildTime: "08/07/2025 04:11 PM EDT",
193
193
  homepage: "https://github.com/aversini/ui-components",
194
194
  license: "MIT"
195
195
  });
196
196
  } catch {
197
197
  }
198
- const Ie = () => "rounded-md text-base h-20 min-h-[80px] resize-none overflow-hidden px-4 py-7", Se = ({ mode: e }) => c({
198
+ const Ee = () => "rounded-md text-base h-20 min-h-[80px] resize-none overflow-hidden px-4 py-7", Le = ({ mode: e }) => c({
199
199
  "bg-surface-darker text-copy-lighter caret-copy-light": e === "dark",
200
200
  "bg-surface-lighter text-copy-dark caret-copy-dark": e === "light",
201
201
  "bg-surface-lighter text-copy-dark caret-copy-dark dark:bg-surface-darker dark:text-copy-lighter dark:caret-copy-light": e === "system",
202
202
  "bg-surface-darker text-copy-lighter caret-copy-light dark:bg-surface-lighter dark:text-copy-dark dark:caret-copy-dark": e === "alt-system"
203
- }), $e = ({
203
+ }), Oe = ({
204
204
  focusMode: e
205
205
  }) => c("focus:outline focus:outline-2 focus:outline-offset-2", {
206
206
  "focus:outline-focus-dark": e === "dark",
207
207
  "focus:outline-focus-light": e === "light",
208
208
  "focus:outline-focus-light dark:focus:outline-focus-dark": e === "alt-system",
209
209
  "focus:outline-focus-dark dark:focus:outline-focus-light": e === "system"
210
- }), we = ({
210
+ }), Ie = ({
211
211
  noBorder: e,
212
212
  error: r
213
213
  }) => c("border-2", {
@@ -215,7 +215,7 @@ const Ie = () => "rounded-md text-base h-20 min-h-[80px] resize-none overflow-hi
215
215
  "focus:border-border-dark": !e && r,
216
216
  "border-border-error-dark": !e && r,
217
217
  "border-transparent": e
218
- }), De = ({
218
+ }), Se = ({
219
219
  disabled: e,
220
220
  raw: r,
221
221
  error: t,
@@ -254,7 +254,7 @@ const Ie = () => "rounded-md text-base h-20 min-h-[80px] resize-none overflow-hi
254
254
  "text-copy-medium dark:text-copy-error-dark": n === "alt-system"
255
255
  }
256
256
  );
257
- }, He = ({
257
+ }, $e = ({
258
258
  error: e,
259
259
  raw: r,
260
260
  mode: t,
@@ -264,24 +264,24 @@ const Ie = () => "rounded-md text-base h-20 min-h-[80px] resize-none overflow-hi
264
264
  return "";
265
265
  if (n)
266
266
  return c(
267
- P,
267
+ w,
268
268
  "absolute px-2 cursor-not-allowed opacity-50 font-medium"
269
269
  );
270
270
  if (!e)
271
- return c(P, "absolute px-2 font-medium", {
271
+ return c(w, "absolute px-2 font-medium", {
272
272
  "text-copy-medium": t === "dark",
273
273
  "text-copy-dark": t === "light",
274
274
  "text-copy-dark dark:text-copy-medium": t === "system",
275
275
  "text-copy-medium dark:text-copy-dark": t === "alt-system"
276
276
  });
277
277
  if (e)
278
- return c(P, "absolute px-2 font-medium", {
278
+ return c(w, "absolute px-2 font-medium", {
279
279
  "text-copy-error-light": t === "dark",
280
280
  "text-copy-error-dark": t === "light",
281
281
  "text-copy-error-dark dark:text-copy-error-light": t === "system",
282
282
  "dark:text-copy-error-dark text-copy-error-light": t === "alt-system"
283
283
  });
284
- }, Pe = ({
284
+ }, we = ({
285
285
  className: e,
286
286
  textAreaClassName: r,
287
287
  raw: t,
@@ -290,49 +290,49 @@ const Ie = () => "rounded-md text-base h-20 min-h-[80px] resize-none overflow-hi
290
290
  noBorder: o,
291
291
  error: s,
292
292
  mode: l,
293
- leftElement: u,
293
+ leftElement: i,
294
294
  rightElement: p
295
295
  }) => {
296
296
  const y = t ? e : c(
297
297
  "relative flex w-full flex-col justify-center",
298
- Ae,
298
+ xe,
299
299
  e
300
300
  ), b = t ? c(r) : c(
301
- K,
301
+ W,
302
302
  r,
303
- Ie(),
304
- Se({ mode: l }),
305
- $e({ focusMode: n }),
306
- we({
303
+ Ee(),
304
+ Le({ mode: l }),
305
+ Oe({ focusMode: n }),
306
+ Ie({
307
307
  noBorder: o,
308
308
  error: s
309
309
  }),
310
310
  {
311
311
  "disabled:cursor-not-allowed disabled:opacity-50": a
312
312
  }
313
- ), N = t ? void 0 : "sr-only", T = De({
313
+ ), _ = t ? void 0 : "sr-only", g = Se({
314
314
  disabled: a,
315
315
  raw: t,
316
316
  error: s,
317
317
  mode: l,
318
318
  rightElement: p,
319
- leftElement: u
320
- }), d = He({
319
+ leftElement: i
320
+ }), u = $e({
321
321
  error: s,
322
322
  raw: t,
323
323
  mode: l,
324
324
  disabled: a
325
- }), C = t ? void 0 : c(ge, "absolute"), h = t ? void 0 : c(Te, "absolute");
325
+ }), N = t ? void 0 : c(me, "absolute"), m = t ? void 0 : c(he, "absolute");
326
326
  return {
327
327
  wrapper: y,
328
328
  textArea: b,
329
- accessibleLabel: N,
330
- visibleLabel: T,
331
- helperText: d,
332
- rightElement: C,
333
- leftElement: h
329
+ accessibleLabel: _,
330
+ visibleLabel: g,
331
+ helperText: u,
332
+ rightElement: N,
333
+ leftElement: m
334
334
  };
335
- }, Fe = ({
335
+ }, De = ({
336
336
  scrollHeight: e,
337
337
  currentHeight: r,
338
338
  currentLabelOffset: t = 0,
@@ -340,15 +340,15 @@ const Ie = () => "rounded-md text-base h-20 min-h-[80px] resize-none overflow-hi
340
340
  }) => {
341
341
  let s, l;
342
342
  if (e > 0 && e !== r) {
343
- const u = e - r, p = Math.abs(u / 24);
344
- s = t + -1 * Math.sign(u) * (12 * p), l = n + Math.sign(u) * (12 * p);
343
+ const i = e - r, p = Math.abs(i / 24);
344
+ s = t + -1 * Math.sign(i) * (12 * p), l = n + Math.sign(i) * (12 * p);
345
345
  }
346
346
  return {
347
347
  labelOffset: s,
348
348
  helperTextOffset: l,
349
349
  scrollHeight: e
350
350
  };
351
- }, Me = ye.forwardRef(
351
+ }, He = de.forwardRef(
352
352
  ({
353
353
  id: e,
354
354
  name: r,
@@ -358,169 +358,166 @@ const Ie = () => "rounded-md text-base h-20 min-h-[80px] resize-none overflow-hi
358
358
  className: o,
359
359
  textAreaClassName: s,
360
360
  mode: l = "system",
361
- focusMode: u = "system",
361
+ focusMode: i = "system",
362
362
  value: p,
363
363
  defaultValue: y,
364
364
  disabled: b = !1,
365
- noBorder: N = !1,
366
- labelId: T,
367
- helperText: d = "",
368
- helperTextOnFocus: C = !1,
369
- rightElement: h,
370
- leftElement: v,
371
- onChange: F,
372
- onFocus: M,
373
- onBlur: U,
374
- ...Z
375
- }, ee) => {
376
- var B;
377
- const x = f(null), te = be([ee, x]), [re, O] = W(), [ne, R] = W(), $ = f(80), V = f(-25), m = f(null), X = f(30), I = f(null), E = _e({ id: e, prefix: `${K}-` }), [j, ae] = _(0), [G, oe] = _(0), [se, z] = _(
378
- !!(!C && d)
379
- ), ce = `${r} error, ${d}`, k = Pe({
365
+ noBorder: _ = !1,
366
+ labelId: g,
367
+ helperText: u = "",
368
+ helperTextOnFocus: N = !1,
369
+ rightElement: m,
370
+ leftElement: R,
371
+ onChange: D,
372
+ onFocus: H,
373
+ onBlur: P,
374
+ ...K
375
+ }, Q) => {
376
+ const x = f(null), Y = ge([Q, x]), [Z, L] = G(), [ee, k] = G(), $ = f(80), F = f(-25), O = f(null), M = f(30), U = f(null), C = Re({ id: e, prefix: `${W}-` }), [V, te] = v(0), [X, re] = v(0), [ne, j] = v(
377
+ !!(!N && u)
378
+ ), ae = `${r} error, ${u}`, T = we({
380
379
  className: o,
381
380
  textAreaClassName: s,
382
381
  error: n,
383
382
  raw: a,
384
- focusMode: u,
383
+ focusMode: i,
385
384
  disabled: b,
386
- noBorder: N,
385
+ noBorder: _,
387
386
  mode: l,
388
- rightElement: !!h,
389
- leftElement: !!v
390
- }), [A, le] = Re({
387
+ rightElement: !!m,
388
+ leftElement: !!R
389
+ }), [h, oe] = be({
391
390
  value: p,
392
391
  initialControlledDelay: 20,
393
392
  defaultValue: y,
394
- onChange: (i) => {
395
- F && F({
393
+ onChange: (d) => {
394
+ D && D({
396
395
  target: {
397
- value: i
396
+ value: d
398
397
  }
399
398
  });
400
399
  }
401
- }), ue = (i) => {
402
- le(i.target.value);
403
- }, ie = (i) => {
404
- C && d && z(!0), M && M(i);
405
- }, de = (i) => {
406
- C && d && !A && z(!1), U && U(i);
400
+ }), se = (d) => {
401
+ oe(d.target.value);
402
+ }, ce = (d) => {
403
+ N && u && j(!0), H && H(d);
404
+ }, le = (d) => {
405
+ N && u && !h && j(!1), P && P(d);
407
406
  };
408
- return L(() => {
409
- O && O.width && ae(O.width + 18 + 10);
410
- }, [O]), L(() => {
411
- R && R.width && oe(R.width + 18 + 10);
412
- }, [R]), L(() => {
413
- a || x && x.current && A !== void 0 && (x.current.style.height = "inherit", x.current.style.height = x.current.scrollHeight + "px");
414
- }, [A, a]), L(() => {
407
+ return E(() => {
408
+ L && L.width && te(L.width + 18 + 10);
409
+ }, [L]), E(() => {
410
+ k && k.width && re(k.width + 18 + 10);
411
+ }, [k]), E(() => {
412
+ a || x && x.current && h !== void 0 && (x.current.style.height = "inherit", x.current.style.height = x.current.scrollHeight + "px");
413
+ }, [h, a]), E(() => {
415
414
  a || setTimeout(() => {
416
- var i;
417
- (i = m == null ? void 0 : m.current) == null || i.style.setProperty(
415
+ O?.current?.style.setProperty(
418
416
  "--av-text-area-wrapper-transition",
419
- A ? "none" : "all 0.2s ease-out"
417
+ h ? "none" : "all 0.2s ease-out"
420
418
  );
421
419
  }, 0);
422
- }, [A, a]), L(() => {
423
- var i, w;
424
- if (!a && x && x.current && A !== void 0) {
425
- const { labelOffset: D, helperTextOffset: H, scrollHeight: fe } = Fe({
420
+ }, [h, a]), E(() => {
421
+ if (!a && x && x.current && h !== void 0) {
422
+ const { labelOffset: d, helperTextOffset: I, scrollHeight: ie } = De({
426
423
  scrollHeight: x.current.scrollHeight,
427
424
  currentHeight: $.current,
428
- currentLabelOffset: V.current,
429
- currentHelperTextOffset: X.current
425
+ currentLabelOffset: F.current,
426
+ currentHelperTextOffset: M.current
430
427
  });
431
- D && (V.current = D, (i = m == null ? void 0 : m.current) == null || i.style.setProperty(
428
+ d && (F.current = d, O?.current?.style.setProperty(
432
429
  "--av-text-area-label",
433
- `${D}px`
434
- )), H && (X.current = H, (w = I == null ? void 0 : I.current) == null || w.style.setProperty(
430
+ `${d}px`
431
+ )), I && (M.current = I, U?.current?.style.setProperty(
435
432
  "--av-text-area-helper-text",
436
- `${H}px`
437
- )), $.current = fe || $.current;
433
+ `${I}px`
434
+ )), $.current = ie || $.current;
438
435
  }
439
- }, [A, a]), R.width > 0 && ((B = m == null ? void 0 : m.current) == null || B.style.setProperty(
436
+ }, [h, a]), k.width > 0 && O?.current?.style.setProperty(
440
437
  "--tw-translate-x",
441
- `${12 + R.width + 5}px`
442
- )), /* @__PURE__ */ pe("div", { className: k.wrapper, children: [
443
- /* @__PURE__ */ g(
438
+ `${12 + k.width + 5}px`
439
+ ), /* @__PURE__ */ ue("div", { className: T.wrapper, children: [
440
+ /* @__PURE__ */ A(
444
441
  "label",
445
442
  {
446
- htmlFor: E,
447
- id: T,
448
- className: k.accessibleLabel,
443
+ htmlFor: C,
444
+ id: g,
445
+ className: T.accessibleLabel,
449
446
  children: t
450
447
  }
451
448
  ),
452
- v && /* @__PURE__ */ g(
449
+ R && /* @__PURE__ */ A(
453
450
  "div",
454
451
  {
455
- ref: ne,
456
- className: k.leftElement,
457
- children: v
452
+ ref: ee,
453
+ className: T.leftElement,
454
+ children: R
458
455
  }
459
456
  ),
460
- /* @__PURE__ */ g(
457
+ /* @__PURE__ */ A(
461
458
  "textarea",
462
459
  {
463
- ref: te,
464
- id: E,
460
+ ref: Y,
461
+ id: C,
465
462
  name: r,
466
463
  disabled: b,
467
464
  placeholder: a ? void 0 : " ",
468
- className: k.textArea,
465
+ className: T.textArea,
469
466
  rows: 1,
470
- ...d && { "aria-describedby": `${E}-helper` },
467
+ ...u && { "aria-describedby": `${C}-helper` },
471
468
  ...n && { "aria-invalid": "true" },
472
- ...h && !v && !a && { style: { paddingRight: j } },
473
- ...v && !h && !a && { style: { paddingLeft: G } },
474
- ...h && v && !a && {
469
+ ...m && !R && !a && { style: { paddingRight: V } },
470
+ ...R && !m && !a && { style: { paddingLeft: X } },
471
+ ...m && R && !a && {
475
472
  style: {
476
- paddingRight: j,
477
- paddingLeft: G
473
+ paddingRight: V,
474
+ paddingLeft: X
478
475
  }
479
476
  },
480
- value: A,
481
- onChange: ue,
482
- onFocus: ie,
483
- onBlur: de,
484
- ...Z
477
+ value: h,
478
+ onChange: se,
479
+ onFocus: ce,
480
+ onBlur: le,
481
+ ...K
485
482
  }
486
483
  ),
487
- !a && /* @__PURE__ */ g(
484
+ !a && /* @__PURE__ */ A(
488
485
  "label",
489
486
  {
490
- ref: m,
487
+ ref: O,
491
488
  "aria-hidden": !0,
492
- htmlFor: E,
493
- className: `${k.visibleLabel}`,
489
+ htmlFor: C,
490
+ className: `${T.visibleLabel}`,
494
491
  children: t
495
492
  }
496
493
  ),
497
- se && /* @__PURE__ */ g(
494
+ ne && /* @__PURE__ */ A(
498
495
  "div",
499
496
  {
500
- ref: I,
501
- id: `${E}-helper`,
502
- className: k.helperText,
503
- children: d
497
+ ref: U,
498
+ id: `${C}-helper`,
499
+ className: T.helperText,
500
+ children: u
504
501
  }
505
502
  ),
506
- h && /* @__PURE__ */ g(
503
+ m && /* @__PURE__ */ A(
507
504
  "div",
508
505
  {
509
- ref: re,
510
- className: k.rightElement,
511
- children: h
506
+ ref: Z,
507
+ className: T.rightElement,
508
+ children: m
512
509
  }
513
510
  ),
514
- n && d && /* @__PURE__ */ g(Oe, { politeness: "polite", clearAnnouncementDelay: 500, children: ce })
511
+ n && u && /* @__PURE__ */ A(Ce, { politeness: "polite", clearAnnouncementDelay: 500, children: ae })
515
512
  ] });
516
513
  }
517
514
  );
518
- Me.displayName = "TextArea";
515
+ He.displayName = "TextArea";
519
516
  export {
520
- K as TEXT_AREA_CLASSNAME,
521
- Te as TEXT_AREA_CONTROL_LEFT_CLASSNAME,
522
- ge as TEXT_AREA_CONTROL_RIGHT_CLASSNAME,
523
- P as TEXT_AREA_HELPER_TEXT_CLASSNAME,
524
- Ae as TEXT_AREA_WRAPPER_CLASSNAME,
525
- Me as TextArea
517
+ W as TEXT_AREA_CLASSNAME,
518
+ he as TEXT_AREA_CONTROL_LEFT_CLASSNAME,
519
+ me as TEXT_AREA_CONTROL_RIGHT_CLASSNAME,
520
+ w as TEXT_AREA_HELPER_TEXT_CLASSNAME,
521
+ xe as TEXT_AREA_WRAPPER_CLASSNAME,
522
+ He as TextArea
526
523
  };
package/dist/index.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { TEXT_AREA_CLASSNAME as T, TEXT_AREA_CONTROL_LEFT_CLASSNAME as R, TEXT_AREA_CONTROL_RIGHT_CLASSNAME as e, TEXT_AREA_HELPER_TEXT_CLASSNAME as S, TEXT_AREA_WRAPPER_CLASSNAME as i, TextArea as o } from "./components/TextArea/TextArea.js";
2
2
  /*!
3
- @versini/ui-textarea v4.0.5
3
+ @versini/ui-textarea v4.0.7
4
4
  © 2025 gizmette.com
5
5
  */
6
6
  try {
7
7
  window.__VERSINI_UI_TEXTAREA__ || (window.__VERSINI_UI_TEXTAREA__ = {
8
- version: "4.0.5",
9
- buildTime: "06/28/2025 08:58 PM EDT",
8
+ version: "4.0.7",
9
+ buildTime: "08/07/2025 04:11 PM EDT",
10
10
  homepage: "https://github.com/aversini/ui-components",
11
11
  license: "MIT"
12
12
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@versini/ui-textarea",
3
- "version": "4.0.5",
3
+ "version": "4.0.7",
4
4
  "license": "MIT",
5
5
  "author": "Arno Versini",
6
6
  "publishConfig": {
@@ -27,6 +27,7 @@
27
27
  "dev:types": "tsup --watch src",
28
28
  "dev": "npm-run-all clean --parallel dev:js dev:types",
29
29
  "lint": "biome lint src",
30
+ "lint:fix": "biome check src --write --no-errors-on-unmatched",
30
31
  "prettier": "biome check --write --no-errors-on-unmatched",
31
32
  "start": "static-server dist --port 5173",
32
33
  "test:coverage:ui": "vitest --coverage --ui",
@@ -39,17 +40,18 @@
39
40
  "react-dom": "^18.3.1 || ^19.0.0"
40
41
  },
41
42
  "devDependencies": {
42
- "@versini/ui-types": "5.0.5"
43
+ "@testing-library/jest-dom": "6.6.4",
44
+ "@versini/ui-types": "5.0.6"
43
45
  },
44
46
  "dependencies": {
45
47
  "@tailwindcss/typography": "0.5.16",
46
- "@versini/ui-hooks": "4.7.4",
47
- "@versini/ui-liveregion": "2.0.5",
48
+ "@versini/ui-hooks": "4.7.5",
49
+ "@versini/ui-liveregion": "2.0.7",
48
50
  "clsx": "2.1.1",
49
51
  "tailwindcss": "4.1.11"
50
52
  },
51
53
  "sideEffects": [
52
54
  "**/*.css"
53
55
  ],
54
- "gitHead": "1b9a792d10e1f67fc7af7cfdff718ef1e1c78633"
56
+ "gitHead": "42daab1fb88c366495abbc1db78a9987de05e59b"
55
57
  }