@t007/input 0.0.27 → 0.0.28

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 (5) hide show
  1. package/dist/index.css +80 -54
  2. package/dist/index.global.js +2 -2
  3. package/dist/index.js +1 -1
  4. package/dist/react.js +1 -1
  5. package/package.json +3 -2
package/dist/index.css CHANGED
@@ -1,10 +1,52 @@
1
- /* src/css/index.css */
1
+ /* src/css/index.scss */
2
+ :root {
3
+ --t007-scroll-assist-color: black;
4
+ --t007-scroll-assist-opacity: 0.5;
5
+ --t007-scroll-assist-width: 2rem;
6
+ --t007-scroll-assist-height: var(--t007-scroll-assist-width);
7
+ --t007-scroll-assist-inset-x: calc(var(--t007-scroll-assist-width) * -0.25);
8
+ --t007-scroll-assist-inset-y: 0;
9
+ }
10
+ .t007-scroll-assist {
11
+ --t007-gradient-dir: to right;
12
+ position: absolute;
13
+ min-width: var(--t007-scroll-assist-width);
14
+ height: 100%;
15
+ opacity: var(--t007-scroll-assist-opacity);
16
+ background:
17
+ linear-gradient(
18
+ var(--t007-gradient-dir),
19
+ transparent 0,
20
+ var(--t007-scroll-assist-color) 30%,
21
+ transparent);
22
+ z-index: 2;
23
+ }
24
+ .t007-scroll-assist[data-scroll-direction=left] {
25
+ --t007-gradient-dir: to right;
26
+ top: 0;
27
+ left: var(--t007-scroll-assist-inset-x);
28
+ }
29
+ .t007-scroll-assist[data-scroll-direction=right] {
30
+ --t007-gradient-dir: to left;
31
+ top: 0;
32
+ right: var(--t007-scroll-assist-inset-x);
33
+ }
34
+ .t007-scroll-assist[data-scroll-direction=up] {
35
+ --t007-gradient-dir: to bottom;
36
+ top: var(--t007-scroll-assist-inset-y);
37
+ height: var(--t007-scroll-assist-height);
38
+ width: 100%;
39
+ }
40
+ .t007-scroll-assist[data-scroll-direction=down] {
41
+ --t007-gradient-dir: to top;
42
+ bottom: var(--t007-scroll-assist-inset-y);
43
+ height: var(--t007-scroll-assist-height);
44
+ width: 100%;
45
+ }
2
46
  :where(:root) {
3
47
  --t007-input-dark-error-color: #f44336;
4
48
  --t007-input-font-family: inherit;
5
49
  --t007-input-width: 100%;
6
- --t007-input-height: 3rem;
7
- --t007-input-font-size: 1rem;
8
50
  --t007-input-floating-label-scale: 0.85;
9
51
  --t007-input-border-width: 1px;
10
52
  --t007-input-focused-border-width: 2px;
@@ -56,19 +98,25 @@
56
98
  --t007-input-autofill-background-color: var(--t007-input-base-background-color);
57
99
  --t007-input-icon-fill: var(--t007-input-color);
58
100
  --t007-input-icon-stroke: unset;
101
+ --t007-input-unit: 1rem;
102
+ --t007-input-height: calc(var(--t007-input-unit) * 3);
103
+ --t007-input-font-size: var(--t007-input-unit);
59
104
  --t007-input-padding: calc(var(--t007-input-height) / 4);
60
- --t007-input-floating-label-font-size: calc(var(--t007-input-font-size) * var(--t007-input-floating-label-scale));
61
- --t007-input-helper-font-size: calc(var(--t007-input-font-size) * var(--t007-input-floating-label-scale));
105
+ --t007-input-floating-label-font-size: calc(var(--t007-input-unit) * var(--t007-input-floating-label-scale));
106
+ --t007-input-helper-font-size: calc(var(--t007-input-unit) * var(--t007-input-floating-label-scale));
62
107
  --t007-input-border-radius: calc(var(--t007-input-height) / 12);
63
- --t007-input-p-meter-font-size: calc(var(--t007-input-font-size) * var(--t007-input-floating-label-scale));
64
- --t007-input-p-meter-gap: calc(var(--t007-input-font-size) * 0.25);
65
- --t007-input-p-meter-height: calc(var(--t007-input-font-size) * 0.25);
66
- --t007-input-checkbox-font-size: calc(var(--t007-input-font-size) * 0.9);
67
- --t007-input-checkbox-gap: calc(var(--t007-input-font-size) * 0.5);
68
- --t007-input-checkbox-size: calc(var(--t007-input-font-size) * 0.85);
69
- --t007-input-radio-font-size: calc(var(--t007-input-font-size) * 0.9);
70
- --t007-input-radio-gap: calc(var(--t007-input-font-size) * 0.5);
71
- --t007-input-radio-size: calc(var(--t007-input-font-size) * 0.85);
108
+ --t007-input-p-meter-font-size: calc(var(--t007-input-unit) * var(--t007-input-floating-label-scale));
109
+ --t007-input-p-meter-gap: calc(var(--t007-input-unit) * 0.25);
110
+ --t007-input-p-meter-height: calc(var(--t007-input-unit) * 0.25);
111
+ --t007-input-checkbox-font-size: calc(var(--t007-input-unit) * 0.9);
112
+ --t007-input-checkbox-gap: calc(var(--t007-input-unit) * 0.5);
113
+ --t007-input-checkbox-size: calc(var(--t007-input-unit) * 0.85);
114
+ --t007-input-radio-font-size: calc(var(--t007-input-unit) * 0.9);
115
+ --t007-input-radio-gap: calc(var(--t007-input-unit) * 0.5);
116
+ --t007-input-radio-size: calc(var(--t007-input-unit) * 0.85);
117
+ --t007-scroll-assist-width: calc(var(--t007-input-unit) * 2);
118
+ --t007-scroll-assist-inset-x: calc(var(--t007-input-unit) * -0.25);
119
+ --t007-scroll-assist-opacity: 0.4;
72
120
  }
73
121
  :where(:root) {
74
122
  --t007-input-checkmark-color: white;
@@ -78,7 +126,7 @@
78
126
  --t007-input-checkbox-border-color: #707070;
79
127
  --t007-input-checkbox-checked-border-color: black;
80
128
  --t007-input-checkbox-border-width: 1px;
81
- --t007-input-checkbox-border-radius: 0.2rem;
129
+ --t007-input-checkbox-border-radius: calc(var(--t007-input-unit) * 0.2);
82
130
  }
83
131
  :where(:root) {
84
132
  --t007-input-radio-color: dodgerblue;
@@ -125,7 +173,7 @@
125
173
  --t007-input-current-background-color: var(--t007-input-base-background-color);
126
174
  width: var(--t007-input-width);
127
175
  max-width: 100%;
128
- padding-top: calc((var(--t007-input-floating-label-font-size) * 1.3) * 0.5);
176
+ padding-top: calc(var(--t007-input-floating-label-font-size) * 1.3 * 0.5);
129
177
  isolation: isolate;
130
178
  -webkit-font-smoothing: antialiased;
131
179
  }
@@ -226,7 +274,7 @@
226
274
  border-style: var(--t007-input-focused-border-style);
227
275
  }
228
276
  .t007-input-outline-leading {
229
- width: max(0.75rem, var(--t007-input-border-radius));
277
+ width: max(var(--t007-input-unit) * 0.75, var(--t007-input-border-radius));
230
278
  border-top-left-radius: inherit;
231
279
  border-top-right-radius: 0;
232
280
  border-bottom-left-radius: inherit;
@@ -246,7 +294,7 @@
246
294
  flex: 0 0 auto;
247
295
  position: relative;
248
296
  width: fit-content;
249
- max-width: calc(100% - 0.75rem);
297
+ max-width: calc(100% - var(--t007-input-unit) * 0.75);
250
298
  border-left: none !important;
251
299
  border-right: none !important;
252
300
  transition-property:
@@ -265,7 +313,7 @@
265
313
  scale;
266
314
  }
267
315
  .t007-input-field:has(.t007-input-icon) .t007-input-outline-notch {
268
- max-width: calc(100% - 3.75rem);
316
+ max-width: calc(100% - var(--t007-input-unit) * 3.75);
269
317
  }
270
318
  .t007-input-field.t007-input-is-wrapper .t007-input-outline-notch,
271
319
  .t007-input-field:has(.t007-input:is([data-filled], :focus, :-webkit-autofill, :not(:placeholder-shown):where(:not(select):not([type=date]):not([type=time]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=color]):not([type=range]):not([type=file])))) .t007-input-outline-notch,
@@ -277,7 +325,7 @@
277
325
  top: calc(var(--t007-input-height) / 2);
278
326
  display: flex;
279
327
  align-items: center;
280
- gap: calc(var(--t007-input-font-size) / 3);
328
+ gap: calc(var(--t007-input-unit) / 3);
281
329
  max-width: 100%;
282
330
  transform: translateY(-50%);
283
331
  color: var(--t007-input-current-label-color);
@@ -292,12 +340,12 @@
292
340
  will-change: transform;
293
341
  }
294
342
  .t007-input-floating-label:not(:empty) {
295
- margin-inline: 0.25rem;
343
+ margin-inline: calc(var(--t007-input-unit) * 0.25);
296
344
  }
297
345
  .t007-input-field.t007-input-is-wrapper .t007-input-floating-label,
298
346
  .t007-input-field:has(.t007-input:is([data-filled], :focus, :-webkit-autofill, :not(:placeholder-shown):where(:not(select):not([type=date]):not([type=time]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=color]):not([type=range]):not([type=file])))) .t007-input-floating-label,
299
347
  .t007-input-field:has(.t007-input:is(select, :not([placeholder=""]), [type=date], [type=time], [type=datetime-local], [type=month], [type=week], [type=color], [type=range], [type=file])) .t007-input-floating-label {
300
- transform: translateY(calc(-1 * ((var(--t007-input-height) / 2) + (var(--t007-input-font-size) / 2))));
348
+ transform: translateY(calc(-1 * (var(--t007-input-height) / 2 + var(--t007-input-font-size) / 1.7)));
301
349
  font-size: var(--t007-input-floating-label-font-size);
302
350
  opacity: 1;
303
351
  right: auto;
@@ -306,7 +354,7 @@
306
354
  .t007-input-field.t007-input-is-wrapper .t007-input-floating-label.t007-input-shake,
307
355
  .t007-input-field:has(.t007-input:is([data-filled], :focus, :-webkit-autofill, :not(:placeholder-shown):where(:not(select):not([type=date]):not([type=time]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=color]):not([type=range]):not([type=file])))) .t007-input-floating-label.t007-input-shake,
308
356
  .t007-input-field:has(.t007-input:is(select, :not([placeholder=""]), [type=date], [type=time], [type=datetime-local], [type=month], [type=week], [type=color], [type=range], [type=file])) .t007-input-floating-label.t007-input-shake {
309
- transform: translateY(calc(-1 * ((var(--t007-input-height) / 2) + (var(--t007-input-font-size) / 2)))) translateX(0.25rem);
357
+ transform: translateY(calc(-1 * (var(--t007-input-height) / 2 + var(--t007-input-font-size) / 1.7))) translateX(calc(var(--t007-input-unit) * 0.25));
310
358
  }
311
359
  .t007-input {
312
360
  border: none;
@@ -348,7 +396,7 @@
348
396
  }
349
397
  .t007-input-field:has(.t007-input[type=file]) {
350
398
  --t007-input-sb-active-margin: calc((var(--t007-input-floating-label-font-size) * 1.3) / 2);
351
- --t007-input-sb-padding-inline: calc(var(--t007-input-font-size) / 3.5);
399
+ --t007-input-sb-padding-inline: calc(var(--t007-input-unit) / 3.5);
352
400
  --t007-input-sb-padding-block: calc(((var(--t007-input-height) / 2) - ((var(--t007-input-font-size) / 1.25) / 2)) - ((var(--t007-input-floating-label-font-size) * 1.3) / 2) - 1px);
353
401
  }
354
402
  .t007-input-wrapper:has(.t007-input[type=file]) {
@@ -358,8 +406,8 @@
358
406
  :where(.t007-input[type=file])::file-selector-button {
359
407
  font-family: inherit;
360
408
  font-weight: bold;
361
- font-size: calc(var(--t007-input-font-size) / 1.25);
362
- margin-right: calc(var(--t007-input-font-size) / 2.5);
409
+ font-size: calc(var(--t007-input-unit) / 1.25);
410
+ margin-right: calc(var(--t007-input-unit) / 2.5);
363
411
  border-top: none;
364
412
  padding-inline: var(--t007-input-sb-padding-inline);
365
413
  padding-block: calc(var(--t007-input-sb-padding-block) - 1px);
@@ -397,7 +445,7 @@
397
445
  background: none;
398
446
  border: none;
399
447
  border-radius: 50%;
400
- padding: 0.5rem;
448
+ padding: calc(var(--t007-input-unit) * 0.5);
401
449
  align-self: center;
402
450
  cursor: pointer;
403
451
  display: flex;
@@ -430,7 +478,8 @@
430
478
  }
431
479
  .t007-input-helper-line {
432
480
  position: relative;
433
- margin-inline: 1rem;
481
+ top: 1px;
482
+ margin-inline: var(--t007-input-unit);
434
483
  height: calc(var(--t007-input-helper-font-size) * 1.4);
435
484
  color: var(--t007-input-current-helper-color);
436
485
  }
@@ -445,31 +494,8 @@
445
494
  .t007-input-helper-text-wrapper::-webkit-scrollbar {
446
495
  display: none;
447
496
  }
448
- .t007-input-scroll-assist {
449
- position: absolute;
450
- top: 1px;
451
- min-width: 2rem;
452
- height: 100%;
453
- opacity: 0.075;
454
- background:
455
- linear-gradient(
456
- var(--gradient-dir),
457
- transparent 0,
458
- currentColor 30%,
459
- transparent);
460
- z-index: 2;
461
- }
462
- .t007-input-scroll-assist[data-scroll-direction=left] {
463
- left: -0.25rem;
464
- --gradient-dir: to right;
465
- }
466
- .t007-input-scroll-assist[data-scroll-direction=right] {
467
- right: -0.25rem;
468
- --gradient-dir: to left;
469
- }
470
497
  .t007-input-helper-text {
471
498
  position: absolute;
472
- top: 2px;
473
499
  font-size: var(--t007-input-helper-font-size);
474
500
  opacity: 0;
475
501
  line-height: 1.2;
@@ -480,13 +506,13 @@
480
506
  opacity: 1;
481
507
  }
482
508
  .t007-input-helper-line:has(.t007-input-show) [data-violation=none],
483
- .t007-input-helper-line:not(:has(.t007-input-show, [data-violation=none])) .t007-input-scroll-assist {
509
+ .t007-input-helper-line:not(:has(.t007-input-show, [data-violation=none])) .t007-scroll-assist {
484
510
  opacity: 0;
485
511
  }
486
512
  .t007-input-password-meter {
487
513
  --t007-input-p-meter-current-color: var(--t007-input-p-meter-color-weak);
488
514
  display: none;
489
- margin-top: 0.75rem;
515
+ margin-top: calc(var(--t007-input-unit) * 0.75);
490
516
  }
491
517
  .t007-input-field:has(.t007-input:is([type=password], [type=text]):is([data-filled], :-webkit-autofill, :not(:placeholder-shown))) .t007-input-password-meter {
492
518
  display: block;
@@ -507,7 +533,7 @@
507
533
  display: block;
508
534
  text-align: right;
509
535
  font-size: var(--t007-input-p-meter-font-size);
510
- margin-top: 0.75rem;
536
+ margin-top: calc(var(--t007-input-unit) * 0.75);
511
537
  color: var(--t007-input-p-meter-current-color);
512
538
  line-height: normal;
513
539
  }
package/dist/index.global.js CHANGED
@@ -30,7 +30,7 @@
30
30
  var RTR_LOG = console.log.bind(console, "[S.I.A Reactor]");
31
31
  var NIL = Object.freeze({});
32
32
 
33
- // ../utils/dist/chunk-N5KX6IW4.js
33
+ // ../utils/dist/chunk-Y5YJMRXD.js
34
34
  var INTERACTIVE_SELECTOR = ":is(button,[href],input:not([type='hidden']),select,textarea,details>summary,[contenteditable='true'],iframe,audio[controls],video[controls],[tabindex]):not([disabled],[tabindex='-1'],[data-focus-guard],[inert],[inert] *)";
35
35
  var VIRTUAL_RESOURCE = /* @__PURE__ */ Symbol.for("T007_VIRTUAL_RESOURCE");
36
36
  function loadResource(req, type = "style", { module, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, attempts = 3, retryKey = false } = {}, w = window) {
@@ -257,7 +257,7 @@
257
257
  });
258
258
  if (floatingLabel) floatingLabel.ontransitionend = () => floatingLabel.classList.remove("t007-input-shake");
259
259
  if (eyeOpen && eyeClosed) eyeOpen.onclick = eyeClosed.onclick = () => t007.FM.togglePasswordType(input);
260
- initScrollAssist(field2.querySelector(".t007-input-helper-text-wrapper"), { vertical: false, assistClassName: "t007-input-scroll-assist" });
260
+ initScrollAssist(field2.querySelector(".t007-input-helper-text-wrapper"), { vertical: false });
261
261
  },
262
262
  setUpField(field2) {
263
263
  if (field2.dataset.setUp) return;
package/dist/index.js CHANGED
@@ -96,7 +96,7 @@ var formManager = {
96
96
  });
97
97
  if (floatingLabel) floatingLabel.ontransitionend = () => floatingLabel.classList.remove("t007-input-shake");
98
98
  if (eyeOpen && eyeClosed) eyeOpen.onclick = eyeClosed.onclick = () => t007.FM.togglePasswordType(input);
99
- initScrollAssist(field2.querySelector(".t007-input-helper-text-wrapper"), { vertical: false, assistClassName: "t007-input-scroll-assist" });
99
+ initScrollAssist(field2.querySelector(".t007-input-helper-text-wrapper"), { vertical: false });
100
100
  },
101
101
  setUpField(field2) {
102
102
  if (field2.dataset.setUp) return;
package/dist/react.js CHANGED
@@ -161,7 +161,7 @@ var Input = React.forwardRef(function Input2(props, ref) {
161
161
  }, [custom, hasValue, updatePasswordStrength, validateInput]);
162
162
  useEffect(() => void fireInput(inputRef.current), []);
163
163
  useEffect(() => inputRef.current?.setAttribute("custom", custom), [custom]);
164
- useScrollAssist(helperTextWrapperRef, { pxPerSecond: 80, assistClassName: "t007-input-scroll-assist" });
164
+ useScrollAssist(helperTextWrapperRef, { pxPerSecond: 80 });
165
165
  useImperativeHandle(ref, () => inputRef.current);
166
166
  const Wrapper = isWrapper ? "div" : "label";
167
167
  return /* @__PURE__ */ jsxs("div", { className: `t007-input-field ${fieldClassName}${isWrapper ? " t007-input-is-wrapper" : ""}${indeterminate ? " t007-input-indeterminate" : ""}${nativeIcon ? " t007-input-icon-override" : ""}${helperText === false ? " t007-input-no-helper" : ""}`, children: [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@t007/input",
3
- "version": "0.0.27",
3
+ "version": "0.0.28",
4
4
  "description": "A lightweight, pure JS input system.",
5
5
  "author": "Oketade Oluwatobiloba <tobioketade007@gmail.com>",
6
6
  "license": "MIT",
@@ -63,11 +63,12 @@
63
63
  "devDependencies": {
64
64
  "@types/react": "^18.0.0",
65
65
  "@types/react-dom": "^18.0.0",
66
+ "esbuild-sass-plugin": "^3.7.0",
66
67
  "react": "^18.3.1",
67
68
  "react-dom": "^18.3.1"
68
69
  },
69
70
  "dependencies": {
70
- "@t007/utils": "^0.0.29"
71
+ "@t007/utils": "^0.0.30"
71
72
  },
72
73
  "peerDependencies": {
73
74
  "react": "^18.0.0"