@fuf-stack/uniform 0.21.4 → 0.22.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.
Files changed (135) hide show
  1. package/dist/CheckboxGroup/index.cjs +7 -5
  2. package/dist/CheckboxGroup/index.cjs.map +1 -1
  3. package/dist/CheckboxGroup/index.js +6 -4
  4. package/dist/FieldArray/index.cjs +7 -5
  5. package/dist/FieldArray/index.cjs.map +1 -1
  6. package/dist/FieldArray/index.js +6 -4
  7. package/dist/Form/index.cjs +6 -4
  8. package/dist/Form/index.cjs.map +1 -1
  9. package/dist/Form/index.js +5 -3
  10. package/dist/Input/index.cjs +7 -5
  11. package/dist/Input/index.cjs.map +1 -1
  12. package/dist/Input/index.d.cts +3 -2
  13. package/dist/Input/index.d.ts +3 -2
  14. package/dist/Input/index.js +6 -4
  15. package/dist/{Input-oubBKJSg.d.cts → Input-DsBWaOSk.d.ts} +5 -7
  16. package/dist/{Input-oubBKJSg.d.ts → Input-qD-RcDl4.d.cts} +5 -7
  17. package/dist/RadioBoxes/index.cjs +7 -5
  18. package/dist/RadioBoxes/index.cjs.map +1 -1
  19. package/dist/RadioBoxes/index.js +6 -4
  20. package/dist/RadioGroup/index.cjs +7 -5
  21. package/dist/RadioGroup/index.cjs.map +1 -1
  22. package/dist/RadioGroup/index.js +6 -4
  23. package/dist/RadioTabs/index.cjs +7 -5
  24. package/dist/RadioTabs/index.cjs.map +1 -1
  25. package/dist/RadioTabs/index.js +6 -4
  26. package/dist/Select/index.cjs +7 -5
  27. package/dist/Select/index.cjs.map +1 -1
  28. package/dist/Select/index.js +6 -4
  29. package/dist/SubmitButton/index.cjs +6 -4
  30. package/dist/SubmitButton/index.cjs.map +1 -1
  31. package/dist/SubmitButton/index.js +5 -3
  32. package/dist/Switch/index.cjs +7 -5
  33. package/dist/Switch/index.cjs.map +1 -1
  34. package/dist/Switch/index.js +6 -4
  35. package/dist/TextArea/index.cjs +7 -5
  36. package/dist/TextArea/index.cjs.map +1 -1
  37. package/dist/TextArea/index.d.cts +2 -2
  38. package/dist/TextArea/index.d.ts +2 -2
  39. package/dist/TextArea/index.js +6 -4
  40. package/dist/{TextArea-DNpInDsW.d.cts → TextArea-DnFGyl4a.d.cts} +3 -1
  41. package/dist/{TextArea-DNpInDsW.d.ts → TextArea-DnFGyl4a.d.ts} +3 -1
  42. package/dist/{chunk-LO3ACR3G.cjs → chunk-2EYP66KF.cjs} +26 -19
  43. package/dist/chunk-2EYP66KF.cjs.map +1 -0
  44. package/dist/{chunk-KYWB6XUP.js → chunk-3BE3GUCZ.js} +2 -2
  45. package/dist/{chunk-UAV6PVB4.js → chunk-57WY5GAE.js} +4 -1
  46. package/dist/{chunk-UAV6PVB4.js.map → chunk-57WY5GAE.js.map} +1 -1
  47. package/dist/{chunk-6GHD5O3M.js → chunk-7QWLAPOT.js} +4 -4
  48. package/dist/chunk-7QWLAPOT.js.map +1 -0
  49. package/dist/{chunk-KHMZTAHN.js → chunk-DPOGZE5O.js} +2 -2
  50. package/dist/{chunk-ZRZEXMLL.js → chunk-EPY6UDD3.js} +26 -19
  51. package/dist/chunk-EPY6UDD3.js.map +1 -0
  52. package/dist/chunk-G5UX55XC.js +37 -0
  53. package/dist/chunk-G5UX55XC.js.map +1 -0
  54. package/dist/{chunk-SYO5Y2OD.cjs → chunk-GKAVSIH3.cjs} +6 -6
  55. package/dist/{chunk-SYO5Y2OD.cjs.map → chunk-GKAVSIH3.cjs.map} +1 -1
  56. package/dist/chunk-I2PJDXWB.cjs +102 -0
  57. package/dist/chunk-I2PJDXWB.cjs.map +1 -0
  58. package/dist/{chunk-DUEOXE7L.cjs → chunk-IAMV2JNU.cjs} +6 -6
  59. package/dist/{chunk-DUEOXE7L.cjs.map → chunk-IAMV2JNU.cjs.map} +1 -1
  60. package/dist/{chunk-DHB37SIB.js → chunk-IZFO7YMQ.js} +5 -5
  61. package/dist/chunk-KMDTMBYI.js +102 -0
  62. package/dist/chunk-KMDTMBYI.js.map +1 -0
  63. package/dist/{chunk-CESGUF6F.cjs → chunk-L4YPB7MU.cjs} +4 -1
  64. package/dist/chunk-L4YPB7MU.cjs.map +1 -0
  65. package/dist/{chunk-JOPMDYPE.cjs → chunk-NMYLBRT5.cjs} +11 -11
  66. package/dist/{chunk-JOPMDYPE.cjs.map → chunk-NMYLBRT5.cjs.map} +1 -1
  67. package/dist/{chunk-MU265R6G.js → chunk-NR5MV234.js} +5 -5
  68. package/dist/{chunk-DLSCFVU6.js → chunk-O7DOVGO2.js} +5 -5
  69. package/dist/{chunk-JXKKURTC.js → chunk-P3PJSG5J.js} +6 -6
  70. package/dist/{chunk-LFNYLVMH.cjs → chunk-PL44Y7AM.cjs} +3 -3
  71. package/dist/{chunk-LFNYLVMH.cjs.map → chunk-PL44Y7AM.cjs.map} +1 -1
  72. package/dist/{chunk-MYLZ7KGB.cjs → chunk-QTROOQ53.cjs} +7 -7
  73. package/dist/{chunk-MYLZ7KGB.cjs.map → chunk-QTROOQ53.cjs.map} +1 -1
  74. package/dist/{chunk-C26M6HNI.cjs → chunk-SGXLTMB5.cjs} +6 -6
  75. package/dist/{chunk-C26M6HNI.cjs.map → chunk-SGXLTMB5.cjs.map} +1 -1
  76. package/dist/{chunk-I7MQYNOC.cjs → chunk-SHB3Z5GN.cjs} +29 -11
  77. package/dist/chunk-SHB3Z5GN.cjs.map +1 -0
  78. package/dist/{chunk-XVB33ASY.js → chunk-TCYPTU4E.js} +5 -5
  79. package/dist/chunk-TSB65253.cjs +37 -0
  80. package/dist/chunk-TSB65253.cjs.map +1 -0
  81. package/dist/{chunk-FCFO3XIX.cjs → chunk-U3XAM5F4.cjs} +6 -6
  82. package/dist/{chunk-FCFO3XIX.cjs.map → chunk-U3XAM5F4.cjs.map} +1 -1
  83. package/dist/{chunk-V26V5SLD.cjs → chunk-UOTSJ55B.cjs} +6 -6
  84. package/dist/{chunk-V26V5SLD.cjs.map → chunk-UOTSJ55B.cjs.map} +1 -1
  85. package/dist/{chunk-5TKLEM36.js → chunk-WRNAIS4U.js} +5 -5
  86. package/dist/{chunk-G2RGIS2J.js → chunk-X2PR2IOK.js} +5 -5
  87. package/dist/{chunk-FB5L3OUY.cjs → chunk-XALYGZ3R.cjs} +4 -4
  88. package/dist/{chunk-FB5L3OUY.cjs.map → chunk-XALYGZ3R.cjs.map} +1 -1
  89. package/dist/{chunk-NJ4EPFX7.js → chunk-XDHY7DXJ.js} +30 -12
  90. package/dist/chunk-XDHY7DXJ.js.map +1 -0
  91. package/dist/{chunk-YPV2TH7U.cjs → chunk-Y6EAPURV.cjs} +8 -8
  92. package/dist/chunk-Y6EAPURV.cjs.map +1 -0
  93. package/dist/helpers/index.cjs +2 -2
  94. package/dist/helpers/index.d.cts +1 -1
  95. package/dist/helpers/index.d.ts +1 -1
  96. package/dist/helpers/index.js +1 -1
  97. package/dist/hooks/index.cjs +11 -3
  98. package/dist/hooks/index.cjs.map +1 -1
  99. package/dist/hooks/index.d.cts +2 -0
  100. package/dist/hooks/index.d.ts +2 -0
  101. package/dist/hooks/index.js +11 -3
  102. package/dist/hooks/useInputValueDebounce/index.cjs +9 -0
  103. package/dist/hooks/useInputValueDebounce/index.cjs.map +1 -0
  104. package/dist/hooks/useInputValueDebounce/index.d.cts +90 -0
  105. package/dist/hooks/useInputValueDebounce/index.d.ts +90 -0
  106. package/dist/hooks/useInputValueDebounce/index.js +9 -0
  107. package/dist/hooks/useInputValueDebounce/index.js.map +1 -0
  108. package/dist/hooks/useInputValueTransform/index.cjs +8 -0
  109. package/dist/hooks/useInputValueTransform/index.cjs.map +1 -0
  110. package/dist/hooks/useInputValueTransform/index.d.cts +116 -0
  111. package/dist/hooks/useInputValueTransform/index.d.ts +116 -0
  112. package/dist/hooks/useInputValueTransform/index.js +8 -0
  113. package/dist/hooks/useInputValueTransform/index.js.map +1 -0
  114. package/dist/index.cjs +23 -15
  115. package/dist/index.cjs.map +1 -1
  116. package/dist/index.d.cts +4 -2
  117. package/dist/index.d.ts +4 -2
  118. package/dist/index.js +25 -17
  119. package/package.json +14 -4
  120. package/dist/chunk-6GHD5O3M.js.map +0 -1
  121. package/dist/chunk-CESGUF6F.cjs.map +0 -1
  122. package/dist/chunk-I7MQYNOC.cjs.map +0 -1
  123. package/dist/chunk-LO3ACR3G.cjs.map +0 -1
  124. package/dist/chunk-NJ4EPFX7.js.map +0 -1
  125. package/dist/chunk-YPV2TH7U.cjs.map +0 -1
  126. package/dist/chunk-ZRZEXMLL.js.map +0 -1
  127. /package/dist/{chunk-KYWB6XUP.js.map → chunk-3BE3GUCZ.js.map} +0 -0
  128. /package/dist/{chunk-KHMZTAHN.js.map → chunk-DPOGZE5O.js.map} +0 -0
  129. /package/dist/{chunk-DHB37SIB.js.map → chunk-IZFO7YMQ.js.map} +0 -0
  130. /package/dist/{chunk-MU265R6G.js.map → chunk-NR5MV234.js.map} +0 -0
  131. /package/dist/{chunk-DLSCFVU6.js.map → chunk-O7DOVGO2.js.map} +0 -0
  132. /package/dist/{chunk-JXKKURTC.js.map → chunk-P3PJSG5J.js.map} +0 -0
  133. /package/dist/{chunk-XVB33ASY.js.map → chunk-TCYPTU4E.js.map} +0 -0
  134. /package/dist/{chunk-5TKLEM36.js.map → chunk-WRNAIS4U.js.map} +0 -0
  135. /package/dist/{chunk-G2RGIS2J.js.map → chunk-X2PR2IOK.js.map} +0 -0
@@ -0,0 +1,90 @@
1
+ import { InputValueTransform } from '../useInputValueTransform/index.cjs';
2
+
3
+ interface UseInputValueDebounceOptions {
4
+ /** Debounce delay in milliseconds (default: 300) */
5
+ debounceDelay?: number;
6
+ /** The onBlur function to call after flushing debounced value */
7
+ onBlur: () => void;
8
+ /** The onChange function to call with debounced value */
9
+ onChange: (...event: any[]) => void;
10
+ /** Value transformation functions */
11
+ transformValue?: InputValueTransform;
12
+ /** Input type to handle number conversion (optional) */
13
+ type?: 'text' | 'number' | 'password';
14
+ /** The value to debounce */
15
+ value: string | number;
16
+ }
17
+ interface UseInputValueDebounceReturn {
18
+ /** Enhanced onChange function with debouncing */
19
+ onChange: (...event: any[]) => void;
20
+ /** Enhanced onBlur function that flushes current value immediately */
21
+ onBlur: () => void;
22
+ /** The field value that is displayed - updates immediately */
23
+ value: string | number;
24
+ }
25
+ /**
26
+ * Custom hook for debouncing input value changes with immediate blur support.
27
+ *
28
+ * Provides immediate visual feedback by updating the display value instantly,
29
+ * while debouncing the actual form state changes. When the input loses focus,
30
+ * any pending debounced changes are immediately flushed.
31
+ *
32
+ * **Key Features:**
33
+ * - **Debouncing**: Delays form updates until user stops typing
34
+ * - **Transform support**: Optional value transformation between display and form values
35
+ * - **Number conversion**: Automatic conversion for number inputs
36
+ * - **Immediate display updates**: UI stays responsive during debouncing
37
+ * - **Blur flushing**: Immediately applies pending changes on blur
38
+ *
39
+ * @param options Configuration for debounced value handling
40
+ * @param options.debounceDelay Delay in milliseconds (default: 300)
41
+ * @param options.onBlur Function to call after flushing debounced value
42
+ * @param options.onChange Function to call with debounced value
43
+ * @param options.transformValue Optional transform functions for display ↔ form value conversion
44
+ * @param options.type Input type for number conversion ('text' | 'number' | 'password')
45
+ * @param options.value The value to debounce
46
+ * @returns Object containing enhanced onChange, onBlur, and immediate display value
47
+ *
48
+ * @example
49
+ * Basic usage with debouncing:
50
+ * ```tsx
51
+ * const { onChange, onBlur, value } = useInputValueDebounce({
52
+ * debounceDelay: 300,
53
+ * onBlur: field.onBlur,
54
+ * onChange: field.onChange,
55
+ * value: field.value,
56
+ * });
57
+ * ```
58
+ *
59
+ * @example
60
+ * Number input with automatic conversion:
61
+ * ```tsx
62
+ * const { onChange, onBlur, value } = useInputValueDebounce({
63
+ * debounceDelay: 300,
64
+ * onBlur: field.onBlur,
65
+ * onChange: field.onChange,
66
+ * type: 'number',
67
+ * value: field.value, // Display: 123 (number), Form: 123 (number)
68
+ * });
69
+ * ```
70
+ *
71
+ * @example
72
+ * Currency formatting with transforms:
73
+ * ```tsx
74
+ * const currencyTransform = {
75
+ * displayValue: (val) => val ? `$${Number(val).toFixed(2)}` : '',
76
+ * formValue: (val) => Number(val.replace(/[$,]/g, '')) || 0
77
+ * };
78
+ *
79
+ * const { onChange, onBlur, value } = useInputValueDebounce({
80
+ * debounceDelay: 300,
81
+ * onBlur: field.onBlur,
82
+ * onChange: field.onChange,
83
+ * transformValue: currencyTransform,
84
+ * value: field.value, // Display: "$100.00", Form: 100
85
+ * });
86
+ * ```
87
+ */
88
+ declare const useInputValueDebounce: ({ debounceDelay, onBlur, onChange, transformValue, type, value, }: UseInputValueDebounceOptions) => UseInputValueDebounceReturn;
89
+
90
+ export { type UseInputValueDebounceOptions, type UseInputValueDebounceReturn, useInputValueDebounce };
@@ -0,0 +1,90 @@
1
+ import { InputValueTransform } from '../useInputValueTransform/index.js';
2
+
3
+ interface UseInputValueDebounceOptions {
4
+ /** Debounce delay in milliseconds (default: 300) */
5
+ debounceDelay?: number;
6
+ /** The onBlur function to call after flushing debounced value */
7
+ onBlur: () => void;
8
+ /** The onChange function to call with debounced value */
9
+ onChange: (...event: any[]) => void;
10
+ /** Value transformation functions */
11
+ transformValue?: InputValueTransform;
12
+ /** Input type to handle number conversion (optional) */
13
+ type?: 'text' | 'number' | 'password';
14
+ /** The value to debounce */
15
+ value: string | number;
16
+ }
17
+ interface UseInputValueDebounceReturn {
18
+ /** Enhanced onChange function with debouncing */
19
+ onChange: (...event: any[]) => void;
20
+ /** Enhanced onBlur function that flushes current value immediately */
21
+ onBlur: () => void;
22
+ /** The field value that is displayed - updates immediately */
23
+ value: string | number;
24
+ }
25
+ /**
26
+ * Custom hook for debouncing input value changes with immediate blur support.
27
+ *
28
+ * Provides immediate visual feedback by updating the display value instantly,
29
+ * while debouncing the actual form state changes. When the input loses focus,
30
+ * any pending debounced changes are immediately flushed.
31
+ *
32
+ * **Key Features:**
33
+ * - **Debouncing**: Delays form updates until user stops typing
34
+ * - **Transform support**: Optional value transformation between display and form values
35
+ * - **Number conversion**: Automatic conversion for number inputs
36
+ * - **Immediate display updates**: UI stays responsive during debouncing
37
+ * - **Blur flushing**: Immediately applies pending changes on blur
38
+ *
39
+ * @param options Configuration for debounced value handling
40
+ * @param options.debounceDelay Delay in milliseconds (default: 300)
41
+ * @param options.onBlur Function to call after flushing debounced value
42
+ * @param options.onChange Function to call with debounced value
43
+ * @param options.transformValue Optional transform functions for display ↔ form value conversion
44
+ * @param options.type Input type for number conversion ('text' | 'number' | 'password')
45
+ * @param options.value The value to debounce
46
+ * @returns Object containing enhanced onChange, onBlur, and immediate display value
47
+ *
48
+ * @example
49
+ * Basic usage with debouncing:
50
+ * ```tsx
51
+ * const { onChange, onBlur, value } = useInputValueDebounce({
52
+ * debounceDelay: 300,
53
+ * onBlur: field.onBlur,
54
+ * onChange: field.onChange,
55
+ * value: field.value,
56
+ * });
57
+ * ```
58
+ *
59
+ * @example
60
+ * Number input with automatic conversion:
61
+ * ```tsx
62
+ * const { onChange, onBlur, value } = useInputValueDebounce({
63
+ * debounceDelay: 300,
64
+ * onBlur: field.onBlur,
65
+ * onChange: field.onChange,
66
+ * type: 'number',
67
+ * value: field.value, // Display: 123 (number), Form: 123 (number)
68
+ * });
69
+ * ```
70
+ *
71
+ * @example
72
+ * Currency formatting with transforms:
73
+ * ```tsx
74
+ * const currencyTransform = {
75
+ * displayValue: (val) => val ? `$${Number(val).toFixed(2)}` : '',
76
+ * formValue: (val) => Number(val.replace(/[$,]/g, '')) || 0
77
+ * };
78
+ *
79
+ * const { onChange, onBlur, value } = useInputValueDebounce({
80
+ * debounceDelay: 300,
81
+ * onBlur: field.onBlur,
82
+ * onChange: field.onChange,
83
+ * transformValue: currencyTransform,
84
+ * value: field.value, // Display: "$100.00", Form: 100
85
+ * });
86
+ * ```
87
+ */
88
+ declare const useInputValueDebounce: ({ debounceDelay, onBlur, onChange, transformValue, type, value, }: UseInputValueDebounceOptions) => UseInputValueDebounceReturn;
89
+
90
+ export { type UseInputValueDebounceOptions, type UseInputValueDebounceReturn, useInputValueDebounce };
@@ -0,0 +1,9 @@
1
+ import {
2
+ useInputValueDebounce
3
+ } from "../../chunk-KMDTMBYI.js";
4
+ import "../../chunk-G5UX55XC.js";
5
+ import "../../chunk-K2V4ULA2.js";
6
+ export {
7
+ useInputValueDebounce
8
+ };
9
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -0,0 +1,8 @@
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
+
3
+ var _chunkTSB65253cjs = require('../../chunk-TSB65253.cjs');
4
+ require('../../chunk-555JRYCS.cjs');
5
+
6
+
7
+ exports.useInputValueTransform = _chunkTSB65253cjs.useInputValueTransform;
8
+ //# sourceMappingURL=index.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/hooks/useInputValueTransform/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACF,4DAAiC;AACjC,oCAAiC;AACjC;AACE;AACF,0EAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/hooks/useInputValueTransform/index.cjs"}
@@ -0,0 +1,116 @@
1
+ interface InputValueTransform {
2
+ /** Transforms the form value to display value (e.g., 1000 → "$1,000") */
3
+ displayValue: (value: string | number) => string | number;
4
+ /** Transforms the display value to form value (e.g., "$1,000" → 1000) */
5
+ formValue: (value: string) => string | number;
6
+ }
7
+ interface UseInputValueTransformOptions {
8
+ /** The current form field value */
9
+ value: string | number;
10
+ /** Input type for special number handling */
11
+ type?: 'text' | 'number' | 'password';
12
+ /** Value transformation functions */
13
+ transformValue?: InputValueTransform;
14
+ }
15
+ interface UseInputValueTransformReturn {
16
+ /** The current display value for the input */
17
+ displayValue: string | number;
18
+ /** Input change handler (pass directly to onChange) */
19
+ handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
20
+ /** Gets the form value from current display value */
21
+ getFormValue: () => string | number;
22
+ }
23
+ /**
24
+ * Custom hook for handling input value transformations between display and form values.
25
+ *
26
+ * This hook manages the separation between what the user sees (display value) and what gets
27
+ * stored in the form (form value). It's particularly useful for:
28
+ * - Currency formatting ($1,000 display vs 1000 stored)
29
+ * - Number inputs with special handling
30
+ * - Date formatting (MM/DD/YYYY display vs ISO date stored)
31
+ * - Phone number formatting ((555) 123-4567 display vs 5551234567 stored)
32
+ *
33
+ * **Key Features:**
34
+ * - Immediate display value updates for responsive UI
35
+ * - Automatic external value synchronization (form resets, setValue calls)
36
+ * - Special number input handling (empty string preservation)
37
+ * - Bidirectional value transformations
38
+ *
39
+ * @param options Configuration for value transformation
40
+ * @returns Display value management and form value conversion
41
+ *
42
+ * @example
43
+ * ```tsx
44
+ * // Currency formatting
45
+ * const currencyTransform = {
46
+ * displayValue: (val) => val ? `$${Number(val).toLocaleString()}` : '',
47
+ * formValue: (val) => parseFloat(val.replace(/[$,]/g, '')) || 0
48
+ * };
49
+ *
50
+ * const { displayValue, handleInputChange, getFormValue } = useInputValueTransform({
51
+ * value: 1000,
52
+ * transformValue: currencyTransform
53
+ * });
54
+ * // displayValue = "$1,000"
55
+ * // getFormValue() = 1000
56
+ * ```
57
+ *
58
+ * @example
59
+ * ```tsx
60
+ * // Phone number formatting
61
+ * const phoneTransform = {
62
+ * displayValue: (val) => {
63
+ * const cleaned = val.toString().replace(/\D/g, '');
64
+ * const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
65
+ * return match ? `(${match[1]}) ${match[2]}-${match[3]}` : val;
66
+ * },
67
+ * formValue: (val) => val.replace(/\D/g, '')
68
+ * };
69
+ *
70
+ * const { displayValue, handleInputChange, getFormValue } = useInputValueTransform({
71
+ * value: '5551234567',
72
+ * transformValue: phoneTransform
73
+ * });
74
+ * // displayValue = "(555) 123-4567"
75
+ * // getFormValue() = "5551234567"
76
+ * ```
77
+ *
78
+ * @example
79
+ * ```tsx
80
+ * // Number input (no transforms needed)
81
+ * const { displayValue, handleInputChange, getFormValue } = useInputValueTransform({
82
+ * value: 42,
83
+ * type: 'number'
84
+ * });
85
+ * // Handles empty string → empty string (not NaN)
86
+ * // Handles "123" → 123 (string to number conversion)
87
+ * ```
88
+ *
89
+ * @example
90
+ * ```tsx
91
+ * // Usage in a form component
92
+ * const MyInput = ({ field, transformValue }) => {
93
+ * const { displayValue, handleInputChange, getFormValue } = useInputValueTransform({
94
+ * value: field.value,
95
+ * transformValue
96
+ * });
97
+ *
98
+ * // Debounce the form updates (optional)
99
+ * useInputValueDebounce({
100
+ * value: getFormValue(),
101
+ * onChange: field.onChange,
102
+ * debounceDelay: 300
103
+ * });
104
+ *
105
+ * return (
106
+ * <input
107
+ * value={displayValue}
108
+ * onChange={handleInputChange}
109
+ * />
110
+ * );
111
+ * };
112
+ * ```
113
+ */
114
+ declare const useInputValueTransform: ({ value, type, transformValue, }: UseInputValueTransformOptions) => UseInputValueTransformReturn;
115
+
116
+ export { type InputValueTransform, type UseInputValueTransformOptions, type UseInputValueTransformReturn, useInputValueTransform };
@@ -0,0 +1,116 @@
1
+ interface InputValueTransform {
2
+ /** Transforms the form value to display value (e.g., 1000 → "$1,000") */
3
+ displayValue: (value: string | number) => string | number;
4
+ /** Transforms the display value to form value (e.g., "$1,000" → 1000) */
5
+ formValue: (value: string) => string | number;
6
+ }
7
+ interface UseInputValueTransformOptions {
8
+ /** The current form field value */
9
+ value: string | number;
10
+ /** Input type for special number handling */
11
+ type?: 'text' | 'number' | 'password';
12
+ /** Value transformation functions */
13
+ transformValue?: InputValueTransform;
14
+ }
15
+ interface UseInputValueTransformReturn {
16
+ /** The current display value for the input */
17
+ displayValue: string | number;
18
+ /** Input change handler (pass directly to onChange) */
19
+ handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
20
+ /** Gets the form value from current display value */
21
+ getFormValue: () => string | number;
22
+ }
23
+ /**
24
+ * Custom hook for handling input value transformations between display and form values.
25
+ *
26
+ * This hook manages the separation between what the user sees (display value) and what gets
27
+ * stored in the form (form value). It's particularly useful for:
28
+ * - Currency formatting ($1,000 display vs 1000 stored)
29
+ * - Number inputs with special handling
30
+ * - Date formatting (MM/DD/YYYY display vs ISO date stored)
31
+ * - Phone number formatting ((555) 123-4567 display vs 5551234567 stored)
32
+ *
33
+ * **Key Features:**
34
+ * - Immediate display value updates for responsive UI
35
+ * - Automatic external value synchronization (form resets, setValue calls)
36
+ * - Special number input handling (empty string preservation)
37
+ * - Bidirectional value transformations
38
+ *
39
+ * @param options Configuration for value transformation
40
+ * @returns Display value management and form value conversion
41
+ *
42
+ * @example
43
+ * ```tsx
44
+ * // Currency formatting
45
+ * const currencyTransform = {
46
+ * displayValue: (val) => val ? `$${Number(val).toLocaleString()}` : '',
47
+ * formValue: (val) => parseFloat(val.replace(/[$,]/g, '')) || 0
48
+ * };
49
+ *
50
+ * const { displayValue, handleInputChange, getFormValue } = useInputValueTransform({
51
+ * value: 1000,
52
+ * transformValue: currencyTransform
53
+ * });
54
+ * // displayValue = "$1,000"
55
+ * // getFormValue() = 1000
56
+ * ```
57
+ *
58
+ * @example
59
+ * ```tsx
60
+ * // Phone number formatting
61
+ * const phoneTransform = {
62
+ * displayValue: (val) => {
63
+ * const cleaned = val.toString().replace(/\D/g, '');
64
+ * const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
65
+ * return match ? `(${match[1]}) ${match[2]}-${match[3]}` : val;
66
+ * },
67
+ * formValue: (val) => val.replace(/\D/g, '')
68
+ * };
69
+ *
70
+ * const { displayValue, handleInputChange, getFormValue } = useInputValueTransform({
71
+ * value: '5551234567',
72
+ * transformValue: phoneTransform
73
+ * });
74
+ * // displayValue = "(555) 123-4567"
75
+ * // getFormValue() = "5551234567"
76
+ * ```
77
+ *
78
+ * @example
79
+ * ```tsx
80
+ * // Number input (no transforms needed)
81
+ * const { displayValue, handleInputChange, getFormValue } = useInputValueTransform({
82
+ * value: 42,
83
+ * type: 'number'
84
+ * });
85
+ * // Handles empty string → empty string (not NaN)
86
+ * // Handles "123" → 123 (string to number conversion)
87
+ * ```
88
+ *
89
+ * @example
90
+ * ```tsx
91
+ * // Usage in a form component
92
+ * const MyInput = ({ field, transformValue }) => {
93
+ * const { displayValue, handleInputChange, getFormValue } = useInputValueTransform({
94
+ * value: field.value,
95
+ * transformValue
96
+ * });
97
+ *
98
+ * // Debounce the form updates (optional)
99
+ * useInputValueDebounce({
100
+ * value: getFormValue(),
101
+ * onChange: field.onChange,
102
+ * debounceDelay: 300
103
+ * });
104
+ *
105
+ * return (
106
+ * <input
107
+ * value={displayValue}
108
+ * onChange={handleInputChange}
109
+ * />
110
+ * );
111
+ * };
112
+ * ```
113
+ */
114
+ declare const useInputValueTransform: ({ value, type, transformValue, }: UseInputValueTransformOptions) => UseInputValueTransformReturn;
115
+
116
+ export { type InputValueTransform, type UseInputValueTransformOptions, type UseInputValueTransformReturn, useInputValueTransform };
@@ -0,0 +1,8 @@
1
+ import {
2
+ useInputValueTransform
3
+ } from "../../chunk-G5UX55XC.js";
4
+ import "../../chunk-K2V4ULA2.js";
5
+ export {
6
+ useInputValueTransform
7
+ };
8
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
package/dist/index.cjs CHANGED
@@ -1,59 +1,65 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
2
 
3
- var _chunkDUEOXE7Lcjs = require('./chunk-DUEOXE7L.cjs');
3
+ var _chunkIAMV2JNUcjs = require('./chunk-IAMV2JNU.cjs');
4
4
 
5
5
 
6
- var _chunkFCFO3XIXcjs = require('./chunk-FCFO3XIX.cjs');
6
+ var _chunkU3XAM5F4cjs = require('./chunk-U3XAM5F4.cjs');
7
7
 
8
8
 
9
- var _chunkLFNYLVMHcjs = require('./chunk-LFNYLVMH.cjs');
9
+ var _chunkPL44Y7AMcjs = require('./chunk-PL44Y7AM.cjs');
10
10
 
11
11
 
12
- var _chunkMYLZ7KGBcjs = require('./chunk-MYLZ7KGB.cjs');
12
+ var _chunkQTROOQ53cjs = require('./chunk-QTROOQ53.cjs');
13
13
 
14
14
 
15
- var _chunkI7MQYNOCcjs = require('./chunk-I7MQYNOC.cjs');
15
+ var _chunkSHB3Z5GNcjs = require('./chunk-SHB3Z5GN.cjs');
16
16
 
17
17
 
18
- var _chunkSYO5Y2ODcjs = require('./chunk-SYO5Y2OD.cjs');
18
+ var _chunkGKAVSIH3cjs = require('./chunk-GKAVSIH3.cjs');
19
19
 
20
20
 
21
- var _chunkJOPMDYPEcjs = require('./chunk-JOPMDYPE.cjs');
21
+ var _chunkNMYLBRT5cjs = require('./chunk-NMYLBRT5.cjs');
22
22
 
23
23
 
24
- var _chunkFB5L3OUYcjs = require('./chunk-FB5L3OUY.cjs');
24
+ var _chunkXALYGZ3Rcjs = require('./chunk-XALYGZ3R.cjs');
25
25
 
26
26
 
27
27
  var _chunkTTD3KL6Ecjs = require('./chunk-TTD3KL6E.cjs');
28
28
 
29
29
 
30
- var _chunkLO3ACR3Gcjs = require('./chunk-LO3ACR3G.cjs');
30
+ var _chunk2EYP66KFcjs = require('./chunk-2EYP66KF.cjs');
31
31
 
32
32
 
33
- var _chunkV26V5SLDcjs = require('./chunk-V26V5SLD.cjs');
33
+ var _chunkUOTSJ55Bcjs = require('./chunk-UOTSJ55B.cjs');
34
34
 
35
35
 
36
- var _chunkC26M6HNIcjs = require('./chunk-C26M6HNI.cjs');
36
+ var _chunkSGXLTMB5cjs = require('./chunk-SGXLTMB5.cjs');
37
+
38
+
39
+ var _chunkPA2DQCBYcjs = require('./chunk-PA2DQCBY.cjs');
37
40
 
38
41
 
39
42
  var _chunkGNYQC5IJcjs = require('./chunk-GNYQC5IJ.cjs');
40
43
 
41
44
 
42
- var _chunkPA2DQCBYcjs = require('./chunk-PA2DQCBY.cjs');
43
45
 
44
46
 
45
47
 
46
48
 
47
49
 
50
+ var _chunkY6EAPURVcjs = require('./chunk-Y6EAPURV.cjs');
48
51
 
49
52
 
50
- var _chunkYPV2TH7Ucjs = require('./chunk-YPV2TH7U.cjs');
51
53
 
52
54
 
53
55
 
56
+ var _chunkL4YPB7MUcjs = require('./chunk-L4YPB7MU.cjs');
54
57
 
55
58
 
56
- var _chunkCESGUF6Fcjs = require('./chunk-CESGUF6F.cjs');
59
+ var _chunkI2PJDXWBcjs = require('./chunk-I2PJDXWB.cjs');
60
+
61
+
62
+ var _chunkTSB65253cjs = require('./chunk-TSB65253.cjs');
57
63
  require('./chunk-555JRYCS.cjs');
58
64
 
59
65
 
@@ -80,5 +86,7 @@ require('./chunk-555JRYCS.cjs');
80
86
 
81
87
 
82
88
 
83
- exports.CheckboxGroup = _chunkSYO5Y2ODcjs.CheckboxGroup_default; exports.FieldArray = _chunkJOPMDYPEcjs.FieldArray_default; exports.FieldCopyTestIdButton = _chunkPA2DQCBYcjs.FieldCopyTestIdButton_default; exports.FieldValidationError = _chunkGNYQC5IJcjs.FieldValidationError_default; exports.Form = _chunkFB5L3OUYcjs.Form_default; exports.Grid = _chunkTTD3KL6Ecjs.Grid_default; exports.Input = _chunkLO3ACR3Gcjs.Input_default; exports.RadioBoxes = _chunkV26V5SLDcjs.RadioBoxes_default; exports.RadioGroup = _chunkC26M6HNIcjs.RadioGroup_default; exports.RadioTabs = _chunkDUEOXE7Lcjs.RadioTabs_default; exports.Select = _chunkFCFO3XIXcjs.Select_default; exports.SubmitButton = _chunkLFNYLVMHcjs.SubmitButton_default; exports.Switch = _chunkMYLZ7KGBcjs.Switch_default; exports.TextArea = _chunkI7MQYNOCcjs.TextArea_default; exports.checkFieldIsRequired = _chunkYPV2TH7Ucjs.checkFieldIsRequired; exports.fromNullishString = _chunkCESGUF6Fcjs.fromNullishString; exports.toFormFormat = _chunkCESGUF6Fcjs.toFormFormat; exports.toNullishString = _chunkCESGUF6Fcjs.toNullishString; exports.toValidationFormat = _chunkCESGUF6Fcjs.toValidationFormat; exports.useClientValidation = _chunkYPV2TH7Ucjs.useClientValidation; exports.useController = _chunkYPV2TH7Ucjs.useController; exports.useFieldArray = _chunkYPV2TH7Ucjs.useFieldArray; exports.useFormContext = _chunkYPV2TH7Ucjs.useFormContext; exports.useInput = _chunkYPV2TH7Ucjs.useInput;
89
+
90
+
91
+ exports.CheckboxGroup = _chunkGKAVSIH3cjs.CheckboxGroup_default; exports.FieldArray = _chunkNMYLBRT5cjs.FieldArray_default; exports.FieldCopyTestIdButton = _chunkPA2DQCBYcjs.FieldCopyTestIdButton_default; exports.FieldValidationError = _chunkGNYQC5IJcjs.FieldValidationError_default; exports.Form = _chunkXALYGZ3Rcjs.Form_default; exports.Grid = _chunkTTD3KL6Ecjs.Grid_default; exports.Input = _chunk2EYP66KFcjs.Input_default; exports.RadioBoxes = _chunkUOTSJ55Bcjs.RadioBoxes_default; exports.RadioGroup = _chunkSGXLTMB5cjs.RadioGroup_default; exports.RadioTabs = _chunkIAMV2JNUcjs.RadioTabs_default; exports.Select = _chunkU3XAM5F4cjs.Select_default; exports.SubmitButton = _chunkPL44Y7AMcjs.SubmitButton_default; exports.Switch = _chunkQTROOQ53cjs.Switch_default; exports.TextArea = _chunkSHB3Z5GNcjs.TextArea_default; exports.checkFieldIsRequired = _chunkY6EAPURVcjs.checkFieldIsRequired; exports.fromNullishString = _chunkL4YPB7MUcjs.fromNullishString; exports.toFormFormat = _chunkL4YPB7MUcjs.toFormFormat; exports.toNullishString = _chunkL4YPB7MUcjs.toNullishString; exports.toValidationFormat = _chunkL4YPB7MUcjs.toValidationFormat; exports.useClientValidation = _chunkY6EAPURVcjs.useClientValidation; exports.useController = _chunkY6EAPURVcjs.useController; exports.useFieldArray = _chunkY6EAPURVcjs.useFieldArray; exports.useFormContext = _chunkY6EAPURVcjs.useFormContext; exports.useInput = _chunkY6EAPURVcjs.useInput; exports.useInputValueDebounce = _chunkI2PJDXWBcjs.useInputValueDebounce; exports.useInputValueTransform = _chunkTSB65253cjs.useInputValueTransform;
84
92
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACA;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF,q5CAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/index.cjs"}
1
+ {"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACA;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF,yiDAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/index.cjs"}
package/dist/index.d.cts CHANGED
@@ -6,7 +6,9 @@ export { fromNullishString, toFormFormat, toNullishString, toValidationFormat }
6
6
  export { UseControllerProps, UseControllerReturn, checkFieldIsRequired, useClientValidation, useController, useFormContext } from './hooks/index.cjs';
7
7
  export { useFieldArray } from 'react-hook-form';
8
8
  export { useInput } from '@heroui/input';
9
- export { I as Input, a as InputProps } from './Input-oubBKJSg.cjs';
9
+ export { UseInputValueDebounceOptions, UseInputValueDebounceReturn, useInputValueDebounce } from './hooks/useInputValueDebounce/index.cjs';
10
+ export { InputValueTransform, UseInputValueTransformOptions, UseInputValueTransformReturn, useInputValueTransform } from './hooks/useInputValueTransform/index.cjs';
11
+ export { I as Input, a as InputProps } from './Input-qD-RcDl4.cjs';
10
12
  export { F as FieldCopyTestIdButton, a as FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton-_TDlmw0L.cjs';
11
13
  export { F as FieldValidationError, a as FieldValidationErrorProps } from './FieldValidationError-CU_xw0BL.cjs';
12
14
  export { R as RadioBoxes, a as RadioBoxesProps } from './RadioBoxes-BmJBBZVd.cjs';
@@ -15,7 +17,7 @@ export { R as RadioTabs, a as RadioTabsProps } from './RadioTabs-CT8PT7ky.cjs';
15
17
  export { S as Select, a as SelectProps } from './Select-JRwrSDew.cjs';
16
18
  export { S as SubmitButton, a as SubmitButtonProps } from './SubmitButton-C81VCkmx.cjs';
17
19
  export { S as Switch, a as SwitchProps } from './Switch-CLs964dL.cjs';
18
- export { T as TextArea, a as TextAreaProps } from './TextArea-DNpInDsW.cjs';
20
+ export { T as TextArea, a as TextAreaProps } from './TextArea-DnFGyl4a.cjs';
19
21
  import 'react/jsx-runtime';
20
22
  import 'tailwind-variants';
21
23
  import 'tailwind-variants/dist/config.js';
package/dist/index.d.ts CHANGED
@@ -6,7 +6,9 @@ export { fromNullishString, toFormFormat, toNullishString, toValidationFormat }
6
6
  export { UseControllerProps, UseControllerReturn, checkFieldIsRequired, useClientValidation, useController, useFormContext } from './hooks/index.js';
7
7
  export { useFieldArray } from 'react-hook-form';
8
8
  export { useInput } from '@heroui/input';
9
- export { I as Input, a as InputProps } from './Input-oubBKJSg.js';
9
+ export { UseInputValueDebounceOptions, UseInputValueDebounceReturn, useInputValueDebounce } from './hooks/useInputValueDebounce/index.js';
10
+ export { InputValueTransform, UseInputValueTransformOptions, UseInputValueTransformReturn, useInputValueTransform } from './hooks/useInputValueTransform/index.js';
11
+ export { I as Input, a as InputProps } from './Input-DsBWaOSk.js';
10
12
  export { F as FieldCopyTestIdButton, a as FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton-_TDlmw0L.js';
11
13
  export { F as FieldValidationError, a as FieldValidationErrorProps } from './FieldValidationError-CU_xw0BL.js';
12
14
  export { R as RadioBoxes, a as RadioBoxesProps } from './RadioBoxes-BmJBBZVd.js';
@@ -15,7 +17,7 @@ export { R as RadioTabs, a as RadioTabsProps } from './RadioTabs-CT8PT7ky.js';
15
17
  export { S as Select, a as SelectProps } from './Select-JRwrSDew.js';
16
18
  export { S as SubmitButton, a as SubmitButtonProps } from './SubmitButton-C81VCkmx.js';
17
19
  export { S as Switch, a as SwitchProps } from './Switch-CLs964dL.js';
18
- export { T as TextArea, a as TextAreaProps } from './TextArea-DNpInDsW.js';
20
+ export { T as TextArea, a as TextAreaProps } from './TextArea-DnFGyl4a.js';
19
21
  import 'react/jsx-runtime';
20
22
  import 'tailwind-variants';
21
23
  import 'tailwind-variants/dist/config.js';