@versini/ui-textinput 1.3.1 → 1.4.0

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.
@@ -1,7 +1,7 @@
1
- import { jsx as f, jsxs as W } from "react/jsx-runtime";
2
- import G, { useRef as y, useEffect as R, useCallback as J, useState as L, useMemo as K, useId as Q, useReducer as Y, useLayoutEffect as P } from "react";
1
+ import { jsx as m, jsxs as z } from "react/jsx-runtime";
2
+ import W, { useRef as y, useEffect as R, useCallback as J, useState as w, useMemo as K, useId as Q, useReducer as Y, useLayoutEffect as P } from "react";
3
3
  import c from "clsx";
4
- const w = "av-text-input", be = "av-text-input-simple", Z = "av-text-input-wrapper", I = "av-text-input-helper-text";
4
+ const L = "av-text-input", be = "av-text-input-simple", Z = "av-text-input-wrapper", N = "av-text-input-helper-text";
5
5
  function B() {
6
6
  const e = y(!1);
7
7
  return R(() => (e.current = !0, () => {
@@ -19,8 +19,8 @@ const ee = {
19
19
  right: 0
20
20
  };
21
21
  function te(e) {
22
- const r = B(), t = y(0), n = y(null), [l, o] = L(ee), a = K(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((u) => {
23
- const p = u[0];
22
+ const r = B(), t = y(0), n = y(null), [l, o] = w(ee), a = K(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((i) => {
23
+ const p = i[0];
24
24
  p && (cancelAnimationFrame(t.current), t.current = requestAnimationFrame(() => {
25
25
  n.current && r() && o(p.contentRect);
26
26
  }));
@@ -40,7 +40,7 @@ function re(e) {
40
40
  return typeof t == "number" || typeof t == "string" ? `${n}${t}` : `${n}${r}`;
41
41
  }
42
42
  }
43
- const D = "SET_ANNOUNCEMENT", U = "CLEAR_ANNOUNCEMENT", ne = {
43
+ const U = "SET_ANNOUNCEMENT", D = "CLEAR_ANNOUNCEMENT", ne = {
44
44
  alert: null,
45
45
  alertdialog: null,
46
46
  log: "polite",
@@ -50,12 +50,12 @@ const D = "SET_ANNOUNCEMENT", U = "CLEAR_ANNOUNCEMENT", ne = {
50
50
  timer: "assertive"
51
51
  }, le = (e, r) => {
52
52
  switch (r == null ? void 0 : r.type) {
53
- case D:
53
+ case U:
54
54
  return {
55
55
  ...e,
56
56
  announcement: r.payload
57
57
  };
58
- case U:
58
+ case D:
59
59
  return {
60
60
  ...e,
61
61
  announcement: null
@@ -68,9 +68,9 @@ const D = "SET_ANNOUNCEMENT", U = "CLEAR_ANNOUNCEMENT", ne = {
68
68
  dispatch: r
69
69
  }) => {
70
70
  r({
71
- type: U
71
+ type: D
72
72
  }), typeof e == "function" && e();
73
- }, S = ({
73
+ }, $ = ({
74
74
  children: e,
75
75
  clearAnnouncementDelay: r,
76
76
  clearAnnouncementTimeoutRef: t,
@@ -78,7 +78,7 @@ const D = "SET_ANNOUNCEMENT", U = "CLEAR_ANNOUNCEMENT", ne = {
78
78
  dispatch: l
79
79
  }) => {
80
80
  clearTimeout(t.current), e !== null && l({
81
- type: D,
81
+ type: U,
82
82
  payload: e
83
83
  }), r && (t.current = setTimeout(
84
84
  () => ae({
@@ -96,13 +96,13 @@ const D = "SET_ANNOUNCEMENT", U = "CLEAR_ANNOUNCEMENT", ne = {
96
96
  onAnnouncementClear: o,
97
97
  dispatch: a
98
98
  }) => {
99
- clearTimeout(r.current), t ? r.current = setTimeout(S, t, {
99
+ clearTimeout(r.current), t ? r.current = setTimeout($, t, {
100
100
  children: e,
101
101
  clearAnnouncementDelay: n,
102
102
  clearAnnouncementTimeoutRef: l,
103
103
  onAnnouncementClear: o,
104
104
  dispatch: a
105
- }) : S({
105
+ }) : $({
106
106
  children: e,
107
107
  clearAnnouncementDelay: n,
108
108
  clearAnnouncementTimeoutRef: l,
@@ -118,16 +118,16 @@ function oe({
118
118
  announcementDelay: l,
119
119
  clearAnnouncementDelay: o,
120
120
  onAnnouncementClear: a,
121
- visible: u,
121
+ visible: i,
122
122
  ...p
123
123
  }) {
124
- const m = y(null), x = y(null), [g, s] = Y(le, {
124
+ const f = y(null), x = y(null), [g, s] = Y(le, {
125
125
  announcement: null
126
126
  });
127
127
  let d = t;
128
128
  typeof d > "u" && (d = n ? ne[n] : "assertive"), R(() => {
129
129
  ce({
130
- announcementTimeoutRef: m,
130
+ announcementTimeoutRef: f,
131
131
  announcementDelay: l,
132
132
  children: e,
133
133
  clearAnnouncementDelay: o,
@@ -141,51 +141,63 @@ function oe({
141
141
  o,
142
142
  a
143
143
  ]);
144
- const i = c(r, {
145
- "sr-only": !u
144
+ const u = c(r, {
145
+ "sr-only": !i
146
146
  });
147
- return /* @__PURE__ */ f(
147
+ return /* @__PURE__ */ m(
148
148
  "div",
149
149
  {
150
150
  "aria-live": d,
151
151
  ...n && { role: n },
152
- className: i,
152
+ className: u,
153
153
  ...p,
154
154
  children: g.announcement
155
155
  }
156
156
  );
157
157
  }
158
- const se = (e) => {
159
- let r = "";
160
- if (typeof e == "number" || typeof e == "string")
161
- r = "m-" + e;
162
- else {
163
- const t = [];
164
- (e == null ? void 0 : e.t) !== void 0 && t.push(`mt-${e.t}`), (e == null ? void 0 : e.r) !== void 0 && t.push(`mr-${e.r}`), (e == null ? void 0 : e.b) !== void 0 && t.push(`mb-${e.b}`), (e == null ? void 0 : e.l) !== void 0 && t.push(`ml-${e.l}`), r = t.join(" ");
165
- }
166
- return r;
167
- };
168
158
  /*!
169
- @versini/ui-private v1.5.1
159
+ @versini/ui-private v1.6.0
170
160
  © 2024 gizmette.com
171
161
  */
172
162
  try {
173
163
  window.__VERSINI_UI_PRIVATE__ || (window.__VERSINI_UI_PRIVATE__ = {
174
- version: "1.5.1",
175
- buildTime: "12/18/2024 01:22 PM EST",
164
+ version: "1.6.0",
165
+ buildTime: "12/24/2024 06:47 PM EST",
166
+ homepage: "https://github.com/aversini/ui-components",
167
+ license: "MIT"
168
+ });
169
+ } catch {
170
+ }
171
+ /*!
172
+ @versini/ui-spacing v1.0.0
173
+ © 2024 gizmette.com
174
+ */
175
+ try {
176
+ window.__VERSINI_UI_SPACING__ || (window.__VERSINI_UI_SPACING__ = {
177
+ version: "1.0.0",
178
+ buildTime: "12/24/2024 06:47 PM EST",
176
179
  homepage: "https://github.com/aversini/ui-components",
177
180
  license: "MIT"
178
181
  });
179
182
  } catch {
180
183
  }
181
- const ue = ({
184
+ const se = (e) => {
185
+ let r = "";
186
+ if (typeof e == "number" || typeof e == "string")
187
+ r = "m-" + e;
188
+ else {
189
+ const t = [];
190
+ (e == null ? void 0 : e.t) !== void 0 && t.push(`mt-${e.t}`), (e == null ? void 0 : e.r) !== void 0 && t.push(`mr-${e.r}`), (e == null ? void 0 : e.b) !== void 0 && t.push(`mb-${e.b}`), (e == null ? void 0 : e.l) !== void 0 && t.push(`ml-${e.l}`), r = t.join(" ");
191
+ }
192
+ return r;
193
+ }, ie = ({
182
194
  mode: e
183
195
  }) => c({
184
196
  "bg-surface-darker text-copy-lighter caret-copy-light": e === "dark",
185
197
  "bg-surface-lighter text-copy-dark caret-copy-dark": e === "light",
186
198
  "bg-surface-lighter text-copy-dark caret-copy-dark dark:bg-surface-darker dark:text-copy-lighter dark:caret-copy-light": e === "system",
187
199
  "bg-surface-darker text-copy-lighter caret-copy-light dark:bg-surface-lighter dark:text-copy-dark dark:caret-copy-dark": e === "alt-system"
188
- }), ie = ({
200
+ }), ue = ({
189
201
  focusMode: e
190
202
  }) => c("focus:outline focus:outline-2 focus:outline-offset-2", {
191
203
  "focus:outline-focus-dark": e === "dark",
@@ -224,7 +236,7 @@ const ue = ({
224
236
  "text-copy-error-dark dark:text-copy-error-light dark:bg-surface-darker": n === "system",
225
237
  "text-copy-lighter dark:text-copy-error-dark": n === "alt-system"
226
238
  });
227
- }, fe = ({
239
+ }, me = ({
228
240
  error: e,
229
241
  raw: r,
230
242
  mode: t,
@@ -234,18 +246,18 @@ const ue = ({
234
246
  return "";
235
247
  if (n)
236
248
  return c(
237
- I,
249
+ N,
238
250
  "absolute px-2 cursor-not-allowed opacity-50 font-medium"
239
251
  );
240
252
  if (!e)
241
- return c(I, "absolute px-2 font-medium", {
253
+ return c(N, "absolute px-2 font-medium", {
242
254
  "text-copy-lighter": t === "dark",
243
255
  "text-copy-dark": t === "light",
244
256
  "text-copy-dark dark:text-copy-lighter": t === "system",
245
257
  "text-copy-lighter dark:text-copy-dark": t === "alt-system"
246
258
  });
247
259
  if (e)
248
- return c(I, "absolute px-2 font-medium", {
260
+ return c(N, "absolute px-2 font-medium", {
249
261
  "text-copy-error-light bg-surface-darker": t === "dark",
250
262
  "text-copy-error-dark": t === "light",
251
263
  "text-copy-error-dark dark:text-copy-error-light dark:bg-surface-darker": t === "system",
@@ -259,9 +271,9 @@ const ue = ({
259
271
  noBorder: l,
260
272
  error: o,
261
273
  spacing: a,
262
- mode: u,
274
+ mode: i,
263
275
  focusMode: p,
264
- size: m,
276
+ size: f,
265
277
  rightElementClassName: x
266
278
  }) => {
267
279
  const g = t ? e : c(
@@ -271,7 +283,7 @@ const ue = ({
271
283
  se(a)
272
284
  );
273
285
  let s = "";
274
- switch (m) {
286
+ switch (f) {
275
287
  case "xs":
276
288
  s = "h-8";
277
289
  break;
@@ -289,36 +301,36 @@ const ue = ({
289
301
  break;
290
302
  }
291
303
  const d = t ? c(r) : c(
292
- w,
304
+ L,
293
305
  r,
294
306
  s,
295
307
  "rounded-md text-base px-4",
296
- ue({ mode: u }),
297
- ie({ focusMode: p }),
308
+ ie({ mode: i }),
309
+ ue({ focusMode: p }),
298
310
  pe({ noBorder: l, error: o }),
299
311
  {
300
312
  "disabled:cursor-not-allowed disabled:opacity-50": n
301
313
  }
302
- ), i = t ? void 0 : "sr-only", b = de({
314
+ ), u = t ? void 0 : "sr-only", b = de({
303
315
  disabled: n,
304
316
  raw: t,
305
317
  error: o,
306
- mode: u
307
- }), E = fe({
318
+ mode: i
319
+ }), _ = me({
308
320
  error: o,
309
321
  raw: t,
310
- mode: u,
322
+ mode: i,
311
323
  disabled: n
312
- }), N = t ? void 0 : c("absolute right-3", x);
324
+ }), I = t ? void 0 : c("absolute right-3", x);
313
325
  return {
314
326
  wrapper: g,
315
327
  input: d,
316
- accessibleLabel: i,
328
+ accessibleLabel: u,
317
329
  visibleLabel: b,
318
- helperText: E,
319
- rightElement: N
330
+ helperText: _,
331
+ rightElement: I
320
332
  };
321
- }, me = G.forwardRef(
333
+ }, fe = W.forwardRef(
322
334
  ({
323
335
  id: e,
324
336
  name: r,
@@ -327,21 +339,21 @@ const ue = ({
327
339
  raw: l = !1,
328
340
  className: o,
329
341
  inputClassName: a,
330
- mode: u = "system",
342
+ mode: i = "system",
331
343
  focusMode: p = "system",
332
- disabled: m = !1,
344
+ disabled: f = !1,
333
345
  noBorder: x = !1,
334
346
  labelId: g,
335
347
  labelHidden: s = !1,
336
348
  type: d = "text",
337
- helperText: i = "",
349
+ helperText: u = "",
338
350
  rightElement: b,
339
- rightElementClassName: E,
340
- spacing: N,
341
- size: _ = "md",
351
+ rightElementClassName: _,
352
+ spacing: I,
353
+ size: E = "md",
342
354
  ...M
343
355
  }, F) => {
344
- const [j, T] = te(), [X, O] = L(0), k = re({ id: e, prefix: `${w}-` }), V = `${r} error, ${i}`, v = y(null), A = y(null), q = {
356
+ const [V, T] = te(), [j, X] = w(0), k = re({ id: e, prefix: `${L}-` }), O = `${r} error, ${u}`, v = y(null), A = y(null), q = {
345
357
  xs: { label: "-25px", helperText: "30px" },
346
358
  sm: { label: "-29px", helperText: "34px" },
347
359
  md: { label: "-33px", helperText: "38px" },
@@ -353,24 +365,24 @@ const ue = ({
353
365
  error: n,
354
366
  raw: l,
355
367
  focusMode: p,
356
- disabled: m,
368
+ disabled: f,
357
369
  noBorder: x,
358
- spacing: N,
359
- mode: u,
360
- size: _,
361
- rightElementClassName: E
370
+ spacing: I,
371
+ mode: i,
372
+ size: E,
373
+ rightElementClassName: _
362
374
  });
363
375
  return P(() => {
364
- T && T.width && O(T.width + 18 + 10);
376
+ T && T.width && X(T.width + 18 + 10);
365
377
  }, [T]), P(() => {
366
- var C, $;
367
- const { label: H, helperText: z } = q[_];
368
- (C = v == null ? void 0 : v.current) == null || C.style.setProperty("--av-text-input-label", H), ($ = A == null ? void 0 : A.current) == null || $.style.setProperty(
378
+ var C, S;
379
+ const { label: G, helperText: H } = q[E];
380
+ (C = v == null ? void 0 : v.current) == null || C.style.setProperty("--av-text-input-label", G), (S = A == null ? void 0 : A.current) == null || S.style.setProperty(
369
381
  "--av-text-input-helper-text",
370
- z
382
+ H
371
383
  );
372
- }, [_]), /* @__PURE__ */ W("div", { className: h.wrapper, children: [
373
- /* @__PURE__ */ f(
384
+ }, [E]), /* @__PURE__ */ z("div", { className: h.wrapper, children: [
385
+ /* @__PURE__ */ m(
374
386
  "label",
375
387
  {
376
388
  htmlFor: k,
@@ -379,23 +391,23 @@ const ue = ({
379
391
  children: t
380
392
  }
381
393
  ),
382
- /* @__PURE__ */ f(
394
+ /* @__PURE__ */ m(
383
395
  "input",
384
396
  {
385
397
  ref: F,
386
398
  id: k,
387
399
  name: r,
388
400
  type: d,
389
- disabled: m,
401
+ disabled: f,
390
402
  placeholder: l ? void 0 : " ",
391
403
  className: h.input,
392
- ...i && { "aria-describedby": `${k}-helper` },
404
+ ...u && { "aria-describedby": `${k}-helper` },
393
405
  ...n && { "aria-invalid": "true" },
394
- ...b && !l && { style: { paddingRight: X } },
406
+ ...b && !l && { style: { paddingRight: j } },
395
407
  ...M
396
408
  }
397
409
  ),
398
- !l && !s && /* @__PURE__ */ f(
410
+ !l && !s && /* @__PURE__ */ m(
399
411
  "label",
400
412
  {
401
413
  ref: v,
@@ -405,33 +417,33 @@ const ue = ({
405
417
  children: t
406
418
  }
407
419
  ),
408
- i && /* @__PURE__ */ f(
420
+ u && /* @__PURE__ */ m(
409
421
  "div",
410
422
  {
411
423
  ref: A,
412
424
  id: `${k}-helper`,
413
425
  className: h.helperText,
414
- children: i
426
+ children: u
415
427
  }
416
428
  ),
417
- b && /* @__PURE__ */ f(
429
+ b && /* @__PURE__ */ m(
418
430
  "div",
419
431
  {
420
- ref: j,
432
+ ref: V,
421
433
  className: h.rightElement,
422
434
  children: b
423
435
  }
424
436
  ),
425
- n && i && /* @__PURE__ */ f(oe, { politeness: "polite", clearAnnouncementDelay: 500, children: V })
437
+ n && u && /* @__PURE__ */ m(oe, { politeness: "polite", clearAnnouncementDelay: 500, children: O })
426
438
  ] });
427
439
  }
428
440
  );
429
- me.displayName = "TextInput";
441
+ fe.displayName = "TextInput";
430
442
  export {
431
- w as TEXT_INPUT_CLASSNAME,
432
- I as TEXT_INPUT_HELPER_TEXT_CLASSNAME,
443
+ L as TEXT_INPUT_CLASSNAME,
444
+ N as TEXT_INPUT_HELPER_TEXT_CLASSNAME,
433
445
  be as TEXT_INPUT_SIMPLE_CLASSNAME,
434
446
  Z as TEXT_INPUT_WRAPPER_CLASSNAME,
435
- me as TextInput,
447
+ fe as TextInput,
436
448
  oe as x
437
449
  };
@@ -1,5 +1,5 @@
1
1
  import "react/jsx-runtime";
2
- import { TextInput as m } from "../../chunks/TextInput.DrdSuORu.js";
2
+ import { TextInput as m } from "../../chunks/TextInput.DoDaVJdT.js";
3
3
  import "react";
4
4
  export {
5
5
  m as TextInput
@@ -1,4 +1,4 @@
1
- import { TextInput as H, x as L } from "../../chunks/TextInput.DrdSuORu.js";
1
+ import { TextInput as H, x as L } from "../../chunks/TextInput.DoDaVJdT.js";
2
2
  import { jsxs as B, Fragment as j, jsx as x } from "react/jsx-runtime";
3
3
  import A, { useMemo as b, useState as _, useRef as m, useEffect as $ } from "react";
4
4
  function q(r) {
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import * as _versini_ui_private_dist_utilities from '@versini/ui-private/dist/utilities';
1
+ import * as _versini_ui_spacing_types from '@versini/ui-spacing-types';
2
2
  import React from 'react';
3
3
 
4
4
  declare const TEXT_INPUT_CLASSNAME = "av-text-input";
@@ -24,7 +24,7 @@ declare const TextInput: React.ForwardRefExoticComponent<{
24
24
  noBorder?: boolean;
25
25
  raw?: boolean;
26
26
  size?: Size;
27
- } & _versini_ui_private_dist_utilities.SpacingProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
27
+ } & _versini_ui_spacing_types.SpacingTypes.Props & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
28
28
 
29
29
  declare const TextInputMask: React.ForwardRefExoticComponent<{
30
30
  rightElement: React.ReactElement;
@@ -43,6 +43,6 @@ declare const TextInputMask: React.ForwardRefExoticComponent<{
43
43
  noBorder?: boolean;
44
44
  raw?: boolean;
45
45
  size?: Size;
46
- } & _versini_ui_private_dist_utilities.SpacingProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
46
+ } & _versini_ui_spacing_types.SpacingTypes.Props & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
47
47
 
48
48
  export { TEXT_INPUT_CLASSNAME, TEXT_INPUT_HELPER_TEXT_CLASSNAME, TEXT_INPUT_SIMPLE_CLASSNAME, TEXT_INPUT_WRAPPER_CLASSNAME, TextInput, TextInputMask };
package/dist/index.js CHANGED
@@ -1,13 +1,13 @@
1
- import { TEXT_INPUT_CLASSNAME as I, TEXT_INPUT_HELPER_TEXT_CLASSNAME as e, TEXT_INPUT_SIMPLE_CLASSNAME as o, TEXT_INPUT_WRAPPER_CLASSNAME as t, TextInput as N } from "./chunks/TextInput.DrdSuORu.js";
1
+ import { TEXT_INPUT_CLASSNAME as I, TEXT_INPUT_HELPER_TEXT_CLASSNAME as e, TEXT_INPUT_SIMPLE_CLASSNAME as o, TEXT_INPUT_WRAPPER_CLASSNAME as t, TextInput as N } from "./chunks/TextInput.DoDaVJdT.js";
2
2
  import { TextInputMask as i } from "./components/TextInput/TextInputMask.js";
3
3
  /*!
4
- @versini/ui-textinput v1.3.1
4
+ @versini/ui-textinput v1.4.0
5
5
  © 2024 gizmette.com
6
6
  */
7
7
  try {
8
8
  window.__VERSINI_UI_TEXTINPUT__ || (window.__VERSINI_UI_TEXTINPUT__ = {
9
- version: "1.3.1",
10
- buildTime: "12/18/2024 01:22 PM EST",
9
+ version: "1.4.0",
10
+ buildTime: "12/24/2024 06:47 PM EST",
11
11
  homepage: "https://github.com/aversini/ui-components",
12
12
  license: "MIT"
13
13
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@versini/ui-textinput",
3
- "version": "1.3.1",
3
+ "version": "1.4.0",
4
4
  "license": "MIT",
5
5
  "author": "Arno Versini",
6
6
  "publishConfig": {
@@ -40,12 +40,14 @@
40
40
  "dependencies": {
41
41
  "@tailwindcss/typography": "0.5.15",
42
42
  "@versini/ui-hooks": "4.3.0",
43
- "@versini/ui-private": "1.5.1",
43
+ "@versini/ui-private": "1.6.0",
44
+ "@versini/ui-spacing": "1.0.0",
45
+ "@versini/ui-spacing-types": "1.0.0",
44
46
  "clsx": "2.1.1",
45
47
  "tailwindcss": "3.4.17"
46
48
  },
47
49
  "sideEffects": [
48
50
  "**/*.css"
49
51
  ],
50
- "gitHead": "123c2555b25210da73697c4fdd3b6a5f67a3b993"
52
+ "gitHead": "cb948414a675c01f3328ed6470ccf4b58f73534f"
51
53
  }