@fuf-stack/uniform 0.22.0 → 0.22.1

package/dist/hooks/useInputValueTransform/index.d.ts

@@ -1,43 +1,38 @@
 interface InputValueTransform {
     /** Transforms the form value to display value (e.g., 1000 → "$1,000") */
-    displayValue: (value: string | number) => string | number;
+    toDisplayValue: (value: string | number) => string | number;
     /** Transforms the display value to form value (e.g., "$1,000" → 1000) */
-    formValue: (value: string) => string | number;
+    toFormValue: (value: string) => string | number;
 }
 interface UseInputValueTransformOptions {
-    /** The current form field value */
-    value: string | number;
     /** Input type for special number handling */
     type?: 'text' | 'number' | 'password';
     /** Value transformation functions */
-    transformValue?: InputValueTransform;
+    transform?: InputValueTransform;
 }
 interface UseInputValueTransformReturn {
-    /** The current display value for the input */
-    displayValue: string | number;
-    /** Input change handler (pass directly to onChange) */
-    handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    /** Gets the form value from current display value */
-    getFormValue: () => string | number;
+    /** Converts any form value to display value */
+    toDisplayValue: (formValue: string | number) => string | number;
+    /** Converts any display value to form value */
+    toFormValue: (displayValue: string | number) => string | number;
 }
 /**
- * Custom hook for handling input value transformations between display and form values.
+ * Custom hook providing utility functions for value transformations between display and form values.
  *
- * This hook manages the separation between what the user sees (display value) and what gets
- * stored in the form (form value). It's particularly useful for:
+ * This hook provides pure conversion functions without any state management. It's useful for:
  * - Currency formatting ($1,000 display vs 1000 stored)
  * - Number inputs with special handling
  * - Date formatting (MM/DD/YYYY display vs ISO date stored)
  * - Phone number formatting ((555) 123-4567 display vs 5551234567 stored)
  *
  * **Key Features:**
- * - Immediate display value updates for responsive UI
- * - Automatic external value synchronization (form resets, setValue calls)
+ * - Pure conversion functions (no state)
  * - Special number input handling (empty string preservation)
  * - Bidirectional value transformations
+ * - Memoized functions for performance
  *
  * @param options Configuration for value transformation
- * @returns Display value management and form value conversion
+ * @returns Pure conversion utility functions
  *
  * @example
  * ```tsx
@@ -47,70 +42,43 @@ interface UseInputValueTransformReturn {
  *   formValue: (val) => parseFloat(val.replace(/[$,]/g, '')) || 0
  * };
  *
- * const { displayValue, handleInputChange, getFormValue } = useInputValueTransform({
- *   value: 1000,
- *   transformValue: currencyTransform
+ * const { toDisplayValue, toFormValue } = useInputValueTransform({
+ *   transform: currencyTransform
  * });
- * // displayValue = "$1,000"
- * // getFormValue() = 1000
- * ```
- *
- * @example
- * ```tsx
- * // Phone number formatting
- * const phoneTransform = {
- *   displayValue: (val) => {
- *     const cleaned = val.toString().replace(/\D/g, '');
- *     const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
- *     return match ? `(${match[1]}) ${match[2]}-${match[3]}` : val;
- *   },
- *   formValue: (val) => val.replace(/\D/g, '')
- * };
  *
- * const { displayValue, handleInputChange, getFormValue } = useInputValueTransform({
- *   value: '5551234567',
- *   transformValue: phoneTransform
- * });
- * // displayValue = "(555) 123-4567"
- * // getFormValue() = "5551234567"
+ * const displayVal = toDisplayValue(1000); // "$1,000"
+ * const formVal = toFormValue("$1,500"); // 1500
  * ```
  *
  * @example
  * ```tsx
  * // Number input (no transforms needed)
- * const { displayValue, handleInputChange, getFormValue } = useInputValueTransform({
- *   value: 42,
+ * const { toDisplayValue, toFormValue } = useInputValueTransform({
  *   type: 'number'
  * });
+ *
  * // Handles empty string → empty string (not NaN)
  * // Handles "123" → 123 (string to number conversion)
  * ```
  *
  * @example
  * ```tsx
- * // Usage in a form component
- * const MyInput = ({ field, transformValue }) => {
- *   const { displayValue, handleInputChange, getFormValue } = useInputValueTransform({
- *     value: field.value,
- *     transformValue
- *   });
+ * // Integration with debouncing
+ * const MyInput = ({ field, transform }) => {
+ *   const transform = useInputValueTransform({ transform });
  *
- *   // Debounce the form updates (optional)
- *   useInputValueDebounce({
- *     value: getFormValue(),
+ *   const { onChange, onBlur, value } = useInputValueDebounce({
+ *     ...transform,
+ *     initialValue: field.value,
+ *     debounceDelay: 300,
+ *     onBlur: field.onBlur,
  *     onChange: field.onChange,
- *     debounceDelay: 300
  *   });
  *
- *   return (
- *     <input
- *       value={displayValue}
- *       onChange={handleInputChange}
- *     />
- *   );
+ *   return <input value={value} onChange={onChange} onBlur={onBlur} />;
  * };
  * ```
  */
-declare const useInputValueTransform: ({ value, type, transformValue, }: UseInputValueTransformOptions) => UseInputValueTransformReturn;
+declare const useInputValueTransform: ({ type, transform, }: UseInputValueTransformOptions) => UseInputValueTransformReturn;
 
 export { type InputValueTransform, type UseInputValueTransformOptions, type UseInputValueTransformReturn, useInputValueTransform };

package/dist/hooks/useInputValueTransform/index.js

@@ -1,6 +1,6 @@
 import {
   useInputValueTransform
-} from "../../chunk-G5UX55XC.js";
+} from "../../chunk-Q2BOMFJ5.js";
 import "../../chunk-K2V4ULA2.js";
 export {
   useInputValueTransform

package/dist/index.cjs

@@ -12,7 +12,7 @@ var _chunkPL44Y7AMcjs = require('./chunk-PL44Y7AM.cjs');
 var _chunkQTROOQ53cjs = require('./chunk-QTROOQ53.cjs');
 
 
-var _chunkSHB3Z5GNcjs = require('./chunk-SHB3Z5GN.cjs');
+var _chunkAZT3TDWZcjs = require('./chunk-AZT3TDWZ.cjs');
 
 
 var _chunkGKAVSIH3cjs = require('./chunk-GKAVSIH3.cjs');
@@ -27,7 +27,7 @@ var _chunkXALYGZ3Rcjs = require('./chunk-XALYGZ3R.cjs');
 var _chunkTTD3KL6Ecjs = require('./chunk-TTD3KL6E.cjs');
 
 
-var _chunk2EYP66KFcjs = require('./chunk-2EYP66KF.cjs');
+var _chunkSG6PWCRLcjs = require('./chunk-SG6PWCRL.cjs');
 
 
 var _chunkUOTSJ55Bcjs = require('./chunk-UOTSJ55B.cjs');
@@ -56,10 +56,10 @@ var _chunkY6EAPURVcjs = require('./chunk-Y6EAPURV.cjs');
 var _chunkL4YPB7MUcjs = require('./chunk-L4YPB7MU.cjs');
 
 
-var _chunkI2PJDXWBcjs = require('./chunk-I2PJDXWB.cjs');
+var _chunkOWWUTKGYcjs = require('./chunk-OWWUTKGY.cjs');
 
 
-var _chunkTSB65253cjs = require('./chunk-TSB65253.cjs');
+var _chunkP6HJOG7Dcjs = require('./chunk-P6HJOG7D.cjs');
 require('./chunk-555JRYCS.cjs');
 
 
@@ -88,5 +88,5 @@ require('./chunk-555JRYCS.cjs');
 
 
 
-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;
+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 = _chunkSG6PWCRLcjs.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 = _chunkAZT3TDWZcjs.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 = _chunkOWWUTKGYcjs.useInputValueDebounce; exports.useInputValueTransform = _chunkP6HJOG7Dcjs.useInputValueTransform;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.cts

@@ -8,7 +8,7 @@ export { useFieldArray } from 'react-hook-form';
 export { useInput } from '@heroui/input';
 export { UseInputValueDebounceOptions, UseInputValueDebounceReturn, useInputValueDebounce } from './hooks/useInputValueDebounce/index.cjs';
 export { InputValueTransform, UseInputValueTransformOptions, UseInputValueTransformReturn, useInputValueTransform } from './hooks/useInputValueTransform/index.cjs';
-export { I as Input, a as InputProps } from './Input-qD-RcDl4.cjs';
+export { I as Input, a as InputProps } from './Input-Com9bFxL.cjs';
 export { F as FieldCopyTestIdButton, a as FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton-_TDlmw0L.cjs';
 export { F as FieldValidationError, a as FieldValidationErrorProps } from './FieldValidationError-CU_xw0BL.cjs';
 export { R as RadioBoxes, a as RadioBoxesProps } from './RadioBoxes-BmJBBZVd.cjs';

package/dist/index.d.ts

@@ -8,7 +8,7 @@ export { useFieldArray } from 'react-hook-form';
 export { useInput } from '@heroui/input';
 export { UseInputValueDebounceOptions, UseInputValueDebounceReturn, useInputValueDebounce } from './hooks/useInputValueDebounce/index.js';
 export { InputValueTransform, UseInputValueTransformOptions, UseInputValueTransformReturn, useInputValueTransform } from './hooks/useInputValueTransform/index.js';
-export { I as Input, a as InputProps } from './Input-DsBWaOSk.js';
+export { I as Input, a as InputProps } from './Input-BpsVvxwO.js';
 export { F as FieldCopyTestIdButton, a as FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton-_TDlmw0L.js';
 export { F as FieldValidationError, a as FieldValidationErrorProps } from './FieldValidationError-CU_xw0BL.js';
 export { R as RadioBoxes, a as RadioBoxesProps } from './RadioBoxes-BmJBBZVd.js';

package/dist/index.js

@@ -12,7 +12,7 @@ import {
 } from "./chunk-NR5MV234.js";
 import {
   TextArea_default
-} from "./chunk-XDHY7DXJ.js";
+} from "./chunk-NNKOK5EU.js";
 import {
   CheckboxGroup_default
 } from "./chunk-O7DOVGO2.js";
@@ -27,7 +27,7 @@ import {
 } from "./chunk-B62HKKMS.js";
 import {
   Input_default
-} from "./chunk-EPY6UDD3.js";
+} from "./chunk-QDFIRRB5.js";
 import {
   RadioBoxes_default
 } from "./chunk-X2PR2IOK.js";
@@ -56,10 +56,10 @@ import {
 } from "./chunk-57WY5GAE.js";
 import {
   useInputValueDebounce
-} from "./chunk-KMDTMBYI.js";
+} from "./chunk-U5WBLGZV.js";
 import {
   useInputValueTransform
-} from "./chunk-G5UX55XC.js";
+} from "./chunk-Q2BOMFJ5.js";
 import "./chunk-K2V4ULA2.js";
 export {
   CheckboxGroup_default as CheckboxGroup,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuf-stack/uniform",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "description": "fuf react form library",
   "author": "Hannes Tiede",
   "homepage": "https://github.com/fuf-stack/pixels#readme",
@@ -143,8 +143,8 @@
     "react-icons": "5.5.0",
     "react-hook-form": "7.55.0",
     "react-select": "5.10.1",
-    "@fuf-stack/pixel-utils": "0.5.5",
     "@fuf-stack/pixels": "0.43.10",
+    "@fuf-stack/pixel-utils": "0.5.5",
     "@fuf-stack/veto": "0.12.1"
   },
   "devDependencies": {

package/dist/chunk-2EYP66KF.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-2EYP66KF.cjs","../src/Input/Input.tsx","../src/Input/index.ts"],"names":["Input_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-2EYP66KF.cjs","sourcesContent":[null,"import type { ReactNode } from 'react';\nimport type { InputValueTransform } from '../hooks';\n\nimport { Input as HeroInput } from '@heroui/input';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext, useInputValueDebounce } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport interface InputProps {\n  /** CSS class name */\n  className?: string;\n  /** debounce delay in milliseconds for form state updates (default: 300ms) */\n  debounceDelay?: number;\n  /** input field is disabled */\n  disabled?: boolean;\n  /** added content to the end of the input Field. */\n  endContent?: ReactNode;\n  /** form field label (set to false to disable label) */\n  label?: string | false;\n  /** form field name */\n  name: string;\n  /** form field placeholder */\n  placeholder?: string;\n  /** size of the input */\n  size?: 'sm' | 'md' | 'lg';\n  /** content added to the start of the input field */\n  startContent?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** allows disentangled display and form values for a field */\n  transformValue?: InputValueTransform;\n  /** input type */\n  type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst Input = ({\n  className = undefined,\n  debounceDelay = 300,\n  disabled = false,\n  endContent = undefined,\n  label = undefined,\n  name,\n  placeholder = ' ',\n  size = undefined,\n  startContent = undefined,\n  testId: _testId = undefined,\n  transformValue = undefined,\n  type = undefined,\n}: InputProps) => {\n  const { control, debugMode, getFieldState } = useFormContext();\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const { field } = useController({\n    control,\n    disabled,\n    name,\n  });\n\n  const {\n    disabled: isDisabled,\n    onChange: fieldOnChange,\n    onBlur: fieldOnBlur,\n    value: fieldValue,\n    ref,\n  } = field;\n\n  // Use hook that provides debounced onChange and enhanced blur handling\n  const { onChange, onBlur, value } = useInputValueDebounce({\n    debounceDelay,\n    onBlur: fieldOnBlur,\n    onChange: fieldOnChange,\n    transformValue,\n    type,\n    value: fieldValue,\n  });\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label || showTestIdCopyButton;\n\n  return (\n    <HeroInput\n      className={cn(className)}\n      classNames={{\n        inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n      }}\n      data-testid={testId}\n      endContent={endContent}\n      errorMessage={\n        error && <FieldValidationError error={error} testId={testId} />\n      }\n      isDisabled={isDisabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={\n        showLabel && (\n          <>\n            {label}\n            {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n          </>\n        )\n      }\n      labelPlacement=\"outside\"\n      name={name}\n      onBlur={onBlur}\n      onChange={onChange}\n      placeholder={placeholder}\n      radius=\"sm\"\n      ref={ref}\n      size={size}\n      startContent={startContent}\n      type={type}\n      // @ts-expect-error can be number for input type number\n      value={value}\n      variant=\"bordered\"\n    />\n  );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"]}

package/dist/chunk-EPY6UDD3.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { InputValueTransform } from '../hooks';\n\nimport { Input as HeroInput } from '@heroui/input';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext, useInputValueDebounce } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport interface InputProps {\n  /** CSS class name */\n  className?: string;\n  /** debounce delay in milliseconds for form state updates (default: 300ms) */\n  debounceDelay?: number;\n  /** input field is disabled */\n  disabled?: boolean;\n  /** added content to the end of the input Field. */\n  endContent?: ReactNode;\n  /** form field label (set to false to disable label) */\n  label?: string | false;\n  /** form field name */\n  name: string;\n  /** form field placeholder */\n  placeholder?: string;\n  /** size of the input */\n  size?: 'sm' | 'md' | 'lg';\n  /** content added to the start of the input field */\n  startContent?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** allows disentangled display and form values for a field */\n  transformValue?: InputValueTransform;\n  /** input type */\n  type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst Input = ({\n  className = undefined,\n  debounceDelay = 300,\n  disabled = false,\n  endContent = undefined,\n  label = undefined,\n  name,\n  placeholder = ' ',\n  size = undefined,\n  startContent = undefined,\n  testId: _testId = undefined,\n  transformValue = undefined,\n  type = undefined,\n}: InputProps) => {\n  const { control, debugMode, getFieldState } = useFormContext();\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const { field } = useController({\n    control,\n    disabled,\n    name,\n  });\n\n  const {\n    disabled: isDisabled,\n    onChange: fieldOnChange,\n    onBlur: fieldOnBlur,\n    value: fieldValue,\n    ref,\n  } = field;\n\n  // Use hook that provides debounced onChange and enhanced blur handling\n  const { onChange, onBlur, value } = useInputValueDebounce({\n    debounceDelay,\n    onBlur: fieldOnBlur,\n    onChange: fieldOnChange,\n    transformValue,\n    type,\n    value: fieldValue,\n  });\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label || showTestIdCopyButton;\n\n  return (\n    <HeroInput\n      className={cn(className)}\n      classNames={{\n        inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n      }}\n      data-testid={testId}\n      endContent={endContent}\n      errorMessage={\n        error && <FieldValidationError error={error} testId={testId} />\n      }\n      isDisabled={isDisabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={\n        showLabel && (\n          <>\n            {label}\n            {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n          </>\n        )\n      }\n      labelPlacement=\"outside\"\n      name={name}\n      onBlur={onBlur}\n      onChange={onChange}\n      placeholder={placeholder}\n      radius=\"sm\"\n      ref={ref}\n      size={size}\n      startContent={startContent}\n      type={type}\n      // @ts-expect-error can be number for input type number\n      value={value}\n      variant=\"bordered\"\n    />\n  );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"],"mappings":";;;;;;;;;;;;;;;AAGA,SAAS,SAAS,iBAAiB;AAEnC,SAAS,UAAU;AAyFF,SAOP,UAPO,KAOP,YAPO;AArDjB,IAAM,QAAQ,CAAC;AAAA,EACb,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,aAAa;AAAA,EACb,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,eAAe;AAAA,EACf,QAAQ,UAAU;AAAA,EAClB,iBAAiB;AAAA,EACjB,OAAO;AACT,MAAkB;AAChB,QAAM,EAAE,SAAS,WAAW,cAAc,IAAI,eAAe;AAC7D,QAAM,EAAE,OAAO,SAAS,UAAU,OAAO,IAAI,cAAc,MAAM,OAAO;AAExE,QAAM,EAAE,MAAM,IAAI,cAAc;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,EACF,IAAI;AAGJ,QAAM,EAAE,UAAU,QAAQ,MAAM,IAAI,sBAAsB;AAAA,IACxD;AAAA,IACA,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,CAAC;AAED,QAAM,uBAAuB,cAAc;AAC3C,QAAM,YAAY,SAAS;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,SAAS;AAAA,MACvB,YAAY;AAAA,QACV,cAAc;AAAA,MAChB;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA,cACE,SAAS,oBAAC,gCAAqB,OAAc,QAAgB;AAAA,MAE/D;AAAA,MACA,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,OACE,aACE,iCACG;AAAA;AAAA,QACA,wBAAwB,oBAAC,iCAAsB,QAAgB;AAAA,SAClE;AAAA,MAGJ,gBAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA,SAAQ;AAAA;AAAA,EACV;AAEJ;AAEA,IAAO,gBAAQ;;;ACtHf,IAAOA,iBAAQ;","names":["Input_default"]}

package/dist/chunk-G5UX55XC.js

@@ -1,37 +0,0 @@
-// src/hooks/useInputValueTransform/useInputValueTransform.ts
-import { useEffect, useRef, useState } from "react";
-var useInputValueTransform = ({
-  value,
-  type,
-  transformValue
-}) => {
-  const prevExternalValue = useRef(value);
-  const [displayValue, setDisplayValue] = useState(() => {
-    return (transformValue == null ? void 0 : transformValue.displayValue) ? transformValue.displayValue(value != null ? value : "") : value != null ? value : "";
-  });
-  useEffect(() => {
-    if (value !== prevExternalValue.current) {
-      prevExternalValue.current = value;
-      const newDisplayValue = (transformValue == null ? void 0 : transformValue.displayValue) ? transformValue.displayValue(value != null ? value : "") : value != null ? value : "";
-      setDisplayValue(newDisplayValue);
-    }
-  }, [value, transformValue]);
-  const getFormValue = () => {
-    if (type === "number") {
-      return displayValue === "" ? "" : Number(displayValue);
-    }
-    return (transformValue == null ? void 0 : transformValue.formValue) ? transformValue.formValue(displayValue) : displayValue;
-  };
-  return {
-    displayValue,
-    handleInputChange: (e) => {
-      setDisplayValue(e.target.value);
-    },
-    getFormValue
-  };
-};
-
-export {
-  useInputValueTransform
-};
-//# sourceMappingURL=chunk-G5UX55XC.js.map

package/dist/chunk-G5UX55XC.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hooks/useInputValueTransform/useInputValueTransform.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nexport interface InputValueTransform {\n  /** Transforms the form value to display value (e.g., 1000 → \"$1,000\") */\n  displayValue: (value: string | number) => string | number;\n  /** Transforms the display value to form value (e.g., \"$1,000\" → 1000) */\n  formValue: (value: string) => string | number;\n}\n\nexport interface UseInputValueTransformOptions {\n  /** The current form field value */\n  value: string | number;\n  /** Input type for special number handling */\n  type?: 'text' | 'number' | 'password';\n  /** Value transformation functions */\n  transformValue?: InputValueTransform;\n}\n\nexport interface UseInputValueTransformReturn {\n  /** The current display value for the input */\n  displayValue: string | number;\n  /** Input change handler (pass directly to onChange) */\n  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  /** Gets the form value from current display value */\n  getFormValue: () => string | number;\n}\n\n/**\n * Custom hook for handling input value transformations between display and form values.\n *\n * This hook manages the separation between what the user sees (display value) and what gets\n * stored in the form (form value). It's particularly useful for:\n * - Currency formatting ($1,000 display vs 1000 stored)\n * - Number inputs with special handling\n * - Date formatting (MM/DD/YYYY display vs ISO date stored)\n * - Phone number formatting ((555) 123-4567 display vs 5551234567 stored)\n *\n * **Key Features:**\n * - Immediate display value updates for responsive UI\n * - Automatic external value synchronization (form resets, setValue calls)\n * - Special number input handling (empty string preservation)\n * - Bidirectional value transformations\n *\n * @param options Configuration for value transformation\n * @returns Display value management and form value conversion\n *\n * @example\n * ```tsx\n * // Currency formatting\n * const currencyTransform = {\n *   displayValue: (val) => val ? `$${Number(val).toLocaleString()}` : '',\n *   formValue: (val) => parseFloat(val.replace(/[$,]/g, '')) || 0\n * };\n *\n * const { displayValue, handleInputChange, getFormValue } = useInputValueTransform({\n *   value: 1000,\n *   transformValue: currencyTransform\n * });\n * // displayValue = \"$1,000\"\n * // getFormValue() = 1000\n * ```\n *\n * @example\n * ```tsx\n * // Phone number formatting\n * const phoneTransform = {\n *   displayValue: (val) => {\n *     const cleaned = val.toString().replace(/\\D/g, '');\n *     const match = cleaned.match(/^(\\d{3})(\\d{3})(\\d{4})$/);\n *     return match ? `(${match[1]}) ${match[2]}-${match[3]}` : val;\n *   },\n *   formValue: (val) => val.replace(/\\D/g, '')\n * };\n *\n * const { displayValue, handleInputChange, getFormValue } = useInputValueTransform({\n *   value: '5551234567',\n *   transformValue: phoneTransform\n * });\n * // displayValue = \"(555) 123-4567\"\n * // getFormValue() = \"5551234567\"\n * ```\n *\n * @example\n * ```tsx\n * // Number input (no transforms needed)\n * const { displayValue, handleInputChange, getFormValue } = useInputValueTransform({\n *   value: 42,\n *   type: 'number'\n * });\n * // Handles empty string → empty string (not NaN)\n * // Handles \"123\" → 123 (string to number conversion)\n * ```\n *\n * @example\n * ```tsx\n * // Usage in a form component\n * const MyInput = ({ field, transformValue }) => {\n *   const { displayValue, handleInputChange, getFormValue } = useInputValueTransform({\n *     value: field.value,\n *     transformValue\n *   });\n *\n *   // Debounce the form updates (optional)\n *   useInputValueDebounce({\n *     value: getFormValue(),\n *     onChange: field.onChange,\n *     debounceDelay: 300\n *   });\n *\n *   return (\n *     <input\n *       value={displayValue}\n *       onChange={handleInputChange}\n *     />\n *   );\n * };\n * ```\n */\nexport const useInputValueTransform = ({\n  value,\n  type,\n  transformValue,\n}: UseInputValueTransformOptions): UseInputValueTransformReturn => {\n  // Track previous external value to detect real external changes\n  const prevExternalValue = useRef(value);\n\n  // Local state for immediate display updates\n  const [displayValue, setDisplayValue] = useState(() => {\n    return transformValue?.displayValue\n      ? transformValue.displayValue(value ?? '')\n      : (value ?? '');\n  });\n\n  /**\n   * Synchronizes display value when form value changes externally.\n   *\n   * This handles cases like:\n   * - Form resets: reset() or setValue('field', '')\n   * - External updates: setValue('field', 'new value')\n   * - Default value initialization from form state\n   * - Programmatic field updates from other components\n   *\n   * Uses a ref to track the previous value and only updates when the external\n   * value actually changes, preventing infinite re-renders.\n   */\n  useEffect(() => {\n    // Only process if the external value actually changed\n    if (value !== prevExternalValue.current) {\n      prevExternalValue.current = value;\n\n      const newDisplayValue = transformValue?.displayValue\n        ? transformValue.displayValue(value ?? '')\n        : (value ?? '');\n\n      setDisplayValue(newDisplayValue);\n    }\n  }, [value, transformValue]);\n\n  /**\n   * Converts the current display value to the appropriate form value.\n   *\n   * **Conversion Logic:**\n   * 1. **Number inputs**:\n   *    - Empty string → empty string (preserves empty state, prevents NaN)\n   *    - Non-empty string → Number(value) (converts to numeric form)\n   *    - Example: \"\" → \"\", \"42\" → 42, \"3.14\" → 3.14\n   *\n   * 2. **Transform inputs**:\n   *    - Applies custom formValue transform function\n   *    - Used for converting display format back to storage format\n   *    - Example: \"$1,000\" → 1000, \"(555) 123-4567\" → \"5551234567\"\n   *\n   * 3. **Regular inputs**:\n   *    - Passes through the display value unchanged\n   *    - Example: \"hello\" → \"hello\", \"test@example.com\" → \"test@example.com\"\n   *\n   * @returns The form value ready for storage/submission\n   */\n  const getFormValue = (): string | number => {\n    if (type === 'number') {\n      return displayValue === '' ? '' : Number(displayValue);\n    }\n\n    return transformValue?.formValue\n      ? transformValue.formValue(displayValue as string)\n      : displayValue;\n  };\n\n  return {\n    displayValue,\n    handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => {\n      setDisplayValue(e.target.value);\n    },\n    getFormValue,\n  };\n};\n"],"mappings":";AAAA,SAAS,WAAW,QAAQ,gBAAgB;AAsHrC,IAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AACF,MAAmE;AAEjE,QAAM,oBAAoB,OAAO,KAAK;AAGtC,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,MAAM;AACrD,YAAO,iDAAgB,gBACnB,eAAe,aAAa,wBAAS,EAAE,IACtC,wBAAS;AAAA,EAChB,CAAC;AAcD,YAAU,MAAM;AAEd,QAAI,UAAU,kBAAkB,SAAS;AACvC,wBAAkB,UAAU;AAE5B,YAAM,mBAAkB,iDAAgB,gBACpC,eAAe,aAAa,wBAAS,EAAE,IACtC,wBAAS;AAEd,sBAAgB,eAAe;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,OAAO,cAAc,CAAC;AAsB1B,QAAM,eAAe,MAAuB;AAC1C,QAAI,SAAS,UAAU;AACrB,aAAO,iBAAiB,KAAK,KAAK,OAAO,YAAY;AAAA,IACvD;AAEA,YAAO,iDAAgB,aACnB,eAAe,UAAU,YAAsB,IAC/C;AAAA,EACN;AAEA,SAAO;AAAA,IACL;AAAA,IACA,mBAAmB,CAAC,MAA2C;AAC7D,sBAAgB,EAAE,OAAO,KAAK;AAAA,IAChC;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/chunk-I2PJDXWB.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-I2PJDXWB.cjs","../src/hooks/useInputValueDebounce/useInputValueDebounce.ts"],"names":["_a"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-I2PJDXWB.cjs","sourcesContent":[null,"import type { InputValueTransform } from '../useInputValueTransform/useInputValueTransform';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useInputValueTransform } from '../useInputValueTransform/useInputValueTransform';\n\nexport interface UseInputValueDebounceOptions {\n  /** Debounce delay in milliseconds (default: 300) */\n  debounceDelay?: number;\n  /** The onBlur function to call after flushing debounced value */\n  onBlur: () => void;\n  /** The onChange function to call with debounced value */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange: (...event: any[]) => void;\n  /** Value transformation functions */\n  transformValue?: InputValueTransform;\n  /** Input type to handle number conversion (optional) */\n  type?: 'text' | 'number' | 'password';\n  /** The value to debounce */\n  value: string | number;\n}\n\nexport interface UseInputValueDebounceReturn {\n  /** Enhanced onChange function with debouncing */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange: (...event: any[]) => void;\n  /** Enhanced onBlur function that flushes current value immediately */\n  onBlur: () => void;\n  /** The field value that is displayed - updates immediately */\n  value: string | number;\n}\n\n/**\n * Custom hook for debouncing input value changes with immediate blur support.\n *\n * Provides immediate visual feedback by updating the display value instantly,\n * while debouncing the actual form state changes. When the input loses focus,\n * any pending debounced changes are immediately flushed.\n *\n * **Key Features:**\n * - **Debouncing**: Delays form updates until user stops typing\n * - **Transform support**: Optional value transformation between display and form values\n * - **Number conversion**: Automatic conversion for number inputs\n * - **Immediate display updates**: UI stays responsive during debouncing\n * - **Blur flushing**: Immediately applies pending changes on blur\n *\n * @param options Configuration for debounced value handling\n * @param options.debounceDelay Delay in milliseconds (default: 300)\n * @param options.onBlur Function to call after flushing debounced value\n * @param options.onChange Function to call with debounced value\n * @param options.transformValue Optional transform functions for display ↔ form value conversion\n * @param options.type Input type for number conversion ('text' | 'number' | 'password')\n * @param options.value The value to debounce\n * @returns Object containing enhanced onChange, onBlur, and immediate display value\n *\n * @example\n * Basic usage with debouncing:\n * ```tsx\n * const { onChange, onBlur, value } = useInputValueDebounce({\n *   debounceDelay: 300,\n *   onBlur: field.onBlur,\n *   onChange: field.onChange,\n *   value: field.value,\n * });\n * ```\n *\n * @example\n * Number input with automatic conversion:\n * ```tsx\n * const { onChange, onBlur, value } = useInputValueDebounce({\n *   debounceDelay: 300,\n *   onBlur: field.onBlur,\n *   onChange: field.onChange,\n *   type: 'number',\n *   value: field.value, // Display: 123 (number), Form: 123 (number)\n * });\n * ```\n *\n * @example\n * Currency formatting with transforms:\n * ```tsx\n * const currencyTransform = {\n *   displayValue: (val) => val ? `$${Number(val).toFixed(2)}` : '',\n *   formValue: (val) => Number(val.replace(/[$,]/g, '')) || 0\n * };\n *\n * const { onChange, onBlur, value } = useInputValueDebounce({\n *   debounceDelay: 300,\n *   onBlur: field.onBlur,\n *   onChange: field.onChange,\n *   transformValue: currencyTransform,\n *   value: field.value, // Display: \"$100.00\", Form: 100\n * });\n * ```\n */\nexport const useInputValueDebounce = ({\n  debounceDelay = 300,\n  onBlur,\n  onChange,\n  transformValue,\n  type,\n  value,\n}: UseInputValueDebounceOptions): UseInputValueDebounceReturn => {\n  // Use transform hook if transformValue is provided\n  const transform = useInputValueTransform({\n    transformValue,\n    type,\n    value,\n  });\n\n  // Helper function to convert any value to the appropriate form value\n  const getFormValue = useCallback(\n    (rawValue: string | number) => {\n      const stringValue = String(rawValue);\n\n      if (transformValue) {\n        return transformValue.formValue(stringValue);\n      }\n\n      if (type === 'number' && stringValue !== '') {\n        const numValue = Number(stringValue);\n        return Number.isNaN(numValue) ? rawValue : numValue;\n      }\n\n      return rawValue;\n    },\n    [transformValue, type],\n  );\n\n  // Use transform display value if available, otherwise use original value\n  const displayValue = transformValue ? transform.displayValue : value;\n  const [currentDisplayValue, setCurrentDisplayValue] = useState(displayValue);\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n  // Sync display value when external value changes\n  useEffect(() => {\n    setCurrentDisplayValue(displayValue);\n  }, [displayValue]);\n\n  // Enhanced onChange handler\n  const handleChange = useCallback(\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (...event: any[]) => {\n      const newValue = event[0]?.target?.value ?? event[0];\n\n      // Convert display value to number if type is number and no transform\n      let displayVal = newValue;\n      if (!transformValue && type === 'number' && newValue !== '') {\n        const numValue = Number(newValue);\n        displayVal = Number.isNaN(numValue) ? newValue : numValue;\n      }\n\n      // Update display immediately\n      setCurrentDisplayValue(displayVal);\n\n      // Update transform if needed\n      if (transformValue && event[0]?.target) {\n        transform.handleInputChange(event[0]);\n      }\n\n      // Get form value using helper\n      const formValue = getFormValue(newValue);\n\n      // Clear existing timeout\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n\n      const executeOnChange = () => {\n        // Preserve event structure if original was an event\n        if (event[0]?.target) {\n          const convertedEvent = {\n            ...event[0],\n            target: {\n              ...event[0].target,\n              value: formValue,\n            },\n          };\n          onChange(convertedEvent, ...event.slice(1));\n        } else {\n          onChange(formValue);\n        }\n      };\n\n      // Execute immediately or after delay\n      if (debounceDelay <= 0) {\n        executeOnChange();\n      } else {\n        timeoutRef.current = setTimeout(executeOnChange, debounceDelay);\n      }\n    },\n    [onChange, debounceDelay, transformValue, transform, type, getFormValue],\n  );\n\n  // Enhanced blur handler\n  const handleBlur = useCallback(() => {\n    // Flush pending changes\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n\n      // Get form value using helper\n      const formValue = getFormValue(currentDisplayValue);\n      onChange(formValue);\n    }\n    onBlur();\n  }, [currentDisplayValue, onChange, onBlur, getFormValue]);\n\n  return {\n    onChange: handleChange,\n    onBlur: handleBlur,\n    value: currentDisplayValue,\n  };\n};\n"]}

package/dist/chunk-KMDTMBYI.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hooks/useInputValueDebounce/useInputValueDebounce.ts"],"sourcesContent":["import type { InputValueTransform } from '../useInputValueTransform/useInputValueTransform';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useInputValueTransform } from '../useInputValueTransform/useInputValueTransform';\n\nexport interface UseInputValueDebounceOptions {\n  /** Debounce delay in milliseconds (default: 300) */\n  debounceDelay?: number;\n  /** The onBlur function to call after flushing debounced value */\n  onBlur: () => void;\n  /** The onChange function to call with debounced value */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange: (...event: any[]) => void;\n  /** Value transformation functions */\n  transformValue?: InputValueTransform;\n  /** Input type to handle number conversion (optional) */\n  type?: 'text' | 'number' | 'password';\n  /** The value to debounce */\n  value: string | number;\n}\n\nexport interface UseInputValueDebounceReturn {\n  /** Enhanced onChange function with debouncing */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange: (...event: any[]) => void;\n  /** Enhanced onBlur function that flushes current value immediately */\n  onBlur: () => void;\n  /** The field value that is displayed - updates immediately */\n  value: string | number;\n}\n\n/**\n * Custom hook for debouncing input value changes with immediate blur support.\n *\n * Provides immediate visual feedback by updating the display value instantly,\n * while debouncing the actual form state changes. When the input loses focus,\n * any pending debounced changes are immediately flushed.\n *\n * **Key Features:**\n * - **Debouncing**: Delays form updates until user stops typing\n * - **Transform support**: Optional value transformation between display and form values\n * - **Number conversion**: Automatic conversion for number inputs\n * - **Immediate display updates**: UI stays responsive during debouncing\n * - **Blur flushing**: Immediately applies pending changes on blur\n *\n * @param options Configuration for debounced value handling\n * @param options.debounceDelay Delay in milliseconds (default: 300)\n * @param options.onBlur Function to call after flushing debounced value\n * @param options.onChange Function to call with debounced value\n * @param options.transformValue Optional transform functions for display ↔ form value conversion\n * @param options.type Input type for number conversion ('text' | 'number' | 'password')\n * @param options.value The value to debounce\n * @returns Object containing enhanced onChange, onBlur, and immediate display value\n *\n * @example\n * Basic usage with debouncing:\n * ```tsx\n * const { onChange, onBlur, value } = useInputValueDebounce({\n *   debounceDelay: 300,\n *   onBlur: field.onBlur,\n *   onChange: field.onChange,\n *   value: field.value,\n * });\n * ```\n *\n * @example\n * Number input with automatic conversion:\n * ```tsx\n * const { onChange, onBlur, value } = useInputValueDebounce({\n *   debounceDelay: 300,\n *   onBlur: field.onBlur,\n *   onChange: field.onChange,\n *   type: 'number',\n *   value: field.value, // Display: 123 (number), Form: 123 (number)\n * });\n * ```\n *\n * @example\n * Currency formatting with transforms:\n * ```tsx\n * const currencyTransform = {\n *   displayValue: (val) => val ? `$${Number(val).toFixed(2)}` : '',\n *   formValue: (val) => Number(val.replace(/[$,]/g, '')) || 0\n * };\n *\n * const { onChange, onBlur, value } = useInputValueDebounce({\n *   debounceDelay: 300,\n *   onBlur: field.onBlur,\n *   onChange: field.onChange,\n *   transformValue: currencyTransform,\n *   value: field.value, // Display: \"$100.00\", Form: 100\n * });\n * ```\n */\nexport const useInputValueDebounce = ({\n  debounceDelay = 300,\n  onBlur,\n  onChange,\n  transformValue,\n  type,\n  value,\n}: UseInputValueDebounceOptions): UseInputValueDebounceReturn => {\n  // Use transform hook if transformValue is provided\n  const transform = useInputValueTransform({\n    transformValue,\n    type,\n    value,\n  });\n\n  // Helper function to convert any value to the appropriate form value\n  const getFormValue = useCallback(\n    (rawValue: string | number) => {\n      const stringValue = String(rawValue);\n\n      if (transformValue) {\n        return transformValue.formValue(stringValue);\n      }\n\n      if (type === 'number' && stringValue !== '') {\n        const numValue = Number(stringValue);\n        return Number.isNaN(numValue) ? rawValue : numValue;\n      }\n\n      return rawValue;\n    },\n    [transformValue, type],\n  );\n\n  // Use transform display value if available, otherwise use original value\n  const displayValue = transformValue ? transform.displayValue : value;\n  const [currentDisplayValue, setCurrentDisplayValue] = useState(displayValue);\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n  // Sync display value when external value changes\n  useEffect(() => {\n    setCurrentDisplayValue(displayValue);\n  }, [displayValue]);\n\n  // Enhanced onChange handler\n  const handleChange = useCallback(\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (...event: any[]) => {\n      const newValue = event[0]?.target?.value ?? event[0];\n\n      // Convert display value to number if type is number and no transform\n      let displayVal = newValue;\n      if (!transformValue && type === 'number' && newValue !== '') {\n        const numValue = Number(newValue);\n        displayVal = Number.isNaN(numValue) ? newValue : numValue;\n      }\n\n      // Update display immediately\n      setCurrentDisplayValue(displayVal);\n\n      // Update transform if needed\n      if (transformValue && event[0]?.target) {\n        transform.handleInputChange(event[0]);\n      }\n\n      // Get form value using helper\n      const formValue = getFormValue(newValue);\n\n      // Clear existing timeout\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n\n      const executeOnChange = () => {\n        // Preserve event structure if original was an event\n        if (event[0]?.target) {\n          const convertedEvent = {\n            ...event[0],\n            target: {\n              ...event[0].target,\n              value: formValue,\n            },\n          };\n          onChange(convertedEvent, ...event.slice(1));\n        } else {\n          onChange(formValue);\n        }\n      };\n\n      // Execute immediately or after delay\n      if (debounceDelay <= 0) {\n        executeOnChange();\n      } else {\n        timeoutRef.current = setTimeout(executeOnChange, debounceDelay);\n      }\n    },\n    [onChange, debounceDelay, transformValue, transform, type, getFormValue],\n  );\n\n  // Enhanced blur handler\n  const handleBlur = useCallback(() => {\n    // Flush pending changes\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n\n      // Get form value using helper\n      const formValue = getFormValue(currentDisplayValue);\n      onChange(formValue);\n    }\n    onBlur();\n  }, [currentDisplayValue, onChange, onBlur, getFormValue]);\n\n  return {\n    onChange: handleChange,\n    onBlur: handleBlur,\n    value: currentDisplayValue,\n  };\n};\n"],"mappings":";;;;;;;;;AAEA,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AA6FlD,IAAM,wBAAwB,CAAC;AAAA,EACpC,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAiE;AAE/D,QAAM,YAAY,uBAAuB;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAGD,QAAM,eAAe;AAAA,IACnB,CAAC,aAA8B;AAC7B,YAAM,cAAc,OAAO,QAAQ;AAEnC,UAAI,gBAAgB;AAClB,eAAO,eAAe,UAAU,WAAW;AAAA,MAC7C;AAEA,UAAI,SAAS,YAAY,gBAAgB,IAAI;AAC3C,cAAM,WAAW,OAAO,WAAW;AACnC,eAAO,OAAO,MAAM,QAAQ,IAAI,WAAW;AAAA,MAC7C;AAEA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,gBAAgB,IAAI;AAAA,EACvB;AAGA,QAAM,eAAe,iBAAiB,UAAU,eAAe;AAC/D,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAS,YAAY;AAC3E,QAAM,aAAa,OAA8B,IAAI;AAGrD,YAAU,MAAM;AACd,2BAAuB,YAAY;AAAA,EACrC,GAAG,CAAC,YAAY,CAAC;AAGjB,QAAM,eAAe;AAAA;AAAA,IAEnB,IAAI,UAAiB;AA9IzB;AA+IM,YAAM,YAAW,uBAAM,CAAC,MAAP,mBAAU,WAAV,mBAAkB,UAAlB,YAA2B,MAAM,CAAC;AAGnD,UAAI,aAAa;AACjB,UAAI,CAAC,kBAAkB,SAAS,YAAY,aAAa,IAAI;AAC3D,cAAM,WAAW,OAAO,QAAQ;AAChC,qBAAa,OAAO,MAAM,QAAQ,IAAI,WAAW;AAAA,MACnD;AAGA,6BAAuB,UAAU;AAGjC,UAAI,oBAAkB,WAAM,CAAC,MAAP,mBAAU,SAAQ;AACtC,kBAAU,kBAAkB,MAAM,CAAC,CAAC;AAAA,MACtC;AAGA,YAAM,YAAY,aAAa,QAAQ;AAGvC,UAAI,WAAW,SAAS;AACtB,qBAAa,WAAW,OAAO;AAAA,MACjC;AAEA,YAAM,kBAAkB,MAAM;AAxKpC,YAAAA;AA0KQ,aAAIA,MAAA,MAAM,CAAC,MAAP,gBAAAA,IAAU,QAAQ;AACpB,gBAAM,iBAAiB,iCAClB,MAAM,CAAC,IADW;AAAA,YAErB,QAAQ,iCACH,MAAM,CAAC,EAAE,SADN;AAAA,cAEN,OAAO;AAAA,YACT;AAAA,UACF;AACA,mBAAS,gBAAgB,GAAG,MAAM,MAAM,CAAC,CAAC;AAAA,QAC5C,OAAO;AACL,mBAAS,SAAS;AAAA,QACpB;AAAA,MACF;AAGA,UAAI,iBAAiB,GAAG;AACtB,wBAAgB;AAAA,MAClB,OAAO;AACL,mBAAW,UAAU,WAAW,iBAAiB,aAAa;AAAA,MAChE;AAAA,IACF;AAAA,IACA,CAAC,UAAU,eAAe,gBAAgB,WAAW,MAAM,YAAY;AAAA,EACzE;AAGA,QAAM,aAAa,YAAY,MAAM;AAEnC,QAAI,WAAW,SAAS;AACtB,mBAAa,WAAW,OAAO;AAC/B,iBAAW,UAAU;AAGrB,YAAM,YAAY,aAAa,mBAAmB;AAClD,eAAS,SAAS;AAAA,IACpB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,qBAAqB,UAAU,QAAQ,YAAY,CAAC;AAExD,SAAO;AAAA,IACL,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AACF;","names":["_a"]}

package/dist/chunk-TSB65253.cjs

@@ -1,37 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/hooks/useInputValueTransform/useInputValueTransform.ts
-var _react = require('react');
-var useInputValueTransform = ({
-  value,
-  type,
-  transformValue
-}) => {
-  const prevExternalValue = _react.useRef.call(void 0, value);
-  const [displayValue, setDisplayValue] = _react.useState.call(void 0, () => {
-    return (transformValue == null ? void 0 : transformValue.displayValue) ? transformValue.displayValue(value != null ? value : "") : value != null ? value : "";
-  });
-  _react.useEffect.call(void 0, () => {
-    if (value !== prevExternalValue.current) {
-      prevExternalValue.current = value;
-      const newDisplayValue = (transformValue == null ? void 0 : transformValue.displayValue) ? transformValue.displayValue(value != null ? value : "") : value != null ? value : "";
-      setDisplayValue(newDisplayValue);
-    }
-  }, [value, transformValue]);
-  const getFormValue = () => {
-    if (type === "number") {
-      return displayValue === "" ? "" : Number(displayValue);
-    }
-    return (transformValue == null ? void 0 : transformValue.formValue) ? transformValue.formValue(displayValue) : displayValue;
-  };
-  return {
-    displayValue,
-    handleInputChange: (e) => {
-      setDisplayValue(e.target.value);
-    },
-    getFormValue
-  };
-};
-
-
-
-exports.useInputValueTransform = useInputValueTransform;
-//# sourceMappingURL=chunk-TSB65253.cjs.map

package/dist/chunk-TSB65253.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-TSB65253.cjs","../src/hooks/useInputValueTransform/useInputValueTransform.ts"],"names":[],"mappings":"AAAA;ACAA,8BAA4C;AAsHrC,IAAM,uBAAA,EAAyB,CAAC;AAAA,EACrC,KAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAA,EAAA,GAAmE;AAEjE,EAAA,MAAM,kBAAA,EAAoB,2BAAA,KAAY,CAAA;AAGtC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,EAAA,EAAI,6BAAA,CAAS,EAAA,GAAM;AACrD,IAAA,OAAA,CAAO,eAAA,GAAA,KAAA,EAAA,KAAA,EAAA,EAAA,cAAA,CAAgB,YAAA,EAAA,EACnB,cAAA,CAAe,YAAA,CAAa,MAAA,GAAA,KAAA,EAAA,MAAA,EAAS,EAAE,EAAA,EACtC,MAAA,GAAA,KAAA,EAAA,MAAA,EAAS,EAAA;AAAA,EAChB,CAAC,CAAA;AAcD,EAAA,8BAAA,CAAU,EAAA,GAAM;AAEd,IAAA,GAAA,CAAI,MAAA,IAAU,iBAAA,CAAkB,OAAA,EAAS;AACvC,MAAA,iBAAA,CAAkB,QAAA,EAAU,KAAA;AAE5B,MAAA,MAAM,gBAAA,EAAA,CAAkB,eAAA,GAAA,KAAA,EAAA,KAAA,EAAA,EAAA,cAAA,CAAgB,YAAA,EAAA,EACpC,cAAA,CAAe,YAAA,CAAa,MAAA,GAAA,KAAA,EAAA,MAAA,EAAS,EAAE,EAAA,EACtC,MAAA,GAAA,KAAA,EAAA,MAAA,EAAS,EAAA;AAEd,MAAA,eAAA,CAAgB,eAAe,CAAA;AAAA,IACjC;AAAA,EACF,CAAA,EAAG,CAAC,KAAA,EAAO,cAAc,CAAC,CAAA;AAsB1B,EAAA,MAAM,aAAA,EAAe,CAAA,EAAA,GAAuB;AAC1C,IAAA,GAAA,CAAI,KAAA,IAAS,QAAA,EAAU;AACrB,MAAA,OAAO,aAAA,IAAiB,GAAA,EAAK,GAAA,EAAK,MAAA,CAAO,YAAY,CAAA;AAAA,IACvD;AAEA,IAAA,OAAA,CAAO,eAAA,GAAA,KAAA,EAAA,KAAA,EAAA,EAAA,cAAA,CAAgB,SAAA,EAAA,EACnB,cAAA,CAAe,SAAA,CAAU,YAAsB,EAAA,EAC/C,YAAA;AAAA,EACN,CAAA;AAEA,EAAA,OAAO;AAAA,IACL,YAAA;AAAA,IACA,iBAAA,EAAmB,CAAC,CAAA,EAAA,GAA2C;AAC7D,MAAA,eAAA,CAAgB,CAAA,CAAE,MAAA,CAAO,KAAK,CAAA;AAAA,IAChC,CAAA;AAAA,IACA;AAAA,EACF,CAAA;AACF,CAAA;ADnKA;AACA;AACE;AACF,wDAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-TSB65253.cjs","sourcesContent":[null,"import { useEffect, useRef, useState } from 'react';\n\nexport interface InputValueTransform {\n  /** Transforms the form value to display value (e.g., 1000 → \"$1,000\") */\n  displayValue: (value: string | number) => string | number;\n  /** Transforms the display value to form value (e.g., \"$1,000\" → 1000) */\n  formValue: (value: string) => string | number;\n}\n\nexport interface UseInputValueTransformOptions {\n  /** The current form field value */\n  value: string | number;\n  /** Input type for special number handling */\n  type?: 'text' | 'number' | 'password';\n  /** Value transformation functions */\n  transformValue?: InputValueTransform;\n}\n\nexport interface UseInputValueTransformReturn {\n  /** The current display value for the input */\n  displayValue: string | number;\n  /** Input change handler (pass directly to onChange) */\n  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  /** Gets the form value from current display value */\n  getFormValue: () => string | number;\n}\n\n/**\n * Custom hook for handling input value transformations between display and form values.\n *\n * This hook manages the separation between what the user sees (display value) and what gets\n * stored in the form (form value). It's particularly useful for:\n * - Currency formatting ($1,000 display vs 1000 stored)\n * - Number inputs with special handling\n * - Date formatting (MM/DD/YYYY display vs ISO date stored)\n * - Phone number formatting ((555) 123-4567 display vs 5551234567 stored)\n *\n * **Key Features:**\n * - Immediate display value updates for responsive UI\n * - Automatic external value synchronization (form resets, setValue calls)\n * - Special number input handling (empty string preservation)\n * - Bidirectional value transformations\n *\n * @param options Configuration for value transformation\n * @returns Display value management and form value conversion\n *\n * @example\n * ```tsx\n * // Currency formatting\n * const currencyTransform = {\n *   displayValue: (val) => val ? `$${Number(val).toLocaleString()}` : '',\n *   formValue: (val) => parseFloat(val.replace(/[$,]/g, '')) || 0\n * };\n *\n * const { displayValue, handleInputChange, getFormValue } = useInputValueTransform({\n *   value: 1000,\n *   transformValue: currencyTransform\n * });\n * // displayValue = \"$1,000\"\n * // getFormValue() = 1000\n * ```\n *\n * @example\n * ```tsx\n * // Phone number formatting\n * const phoneTransform = {\n *   displayValue: (val) => {\n *     const cleaned = val.toString().replace(/\\D/g, '');\n *     const match = cleaned.match(/^(\\d{3})(\\d{3})(\\d{4})$/);\n *     return match ? `(${match[1]}) ${match[2]}-${match[3]}` : val;\n *   },\n *   formValue: (val) => val.replace(/\\D/g, '')\n * };\n *\n * const { displayValue, handleInputChange, getFormValue } = useInputValueTransform({\n *   value: '5551234567',\n *   transformValue: phoneTransform\n * });\n * // displayValue = \"(555) 123-4567\"\n * // getFormValue() = \"5551234567\"\n * ```\n *\n * @example\n * ```tsx\n * // Number input (no transforms needed)\n * const { displayValue, handleInputChange, getFormValue } = useInputValueTransform({\n *   value: 42,\n *   type: 'number'\n * });\n * // Handles empty string → empty string (not NaN)\n * // Handles \"123\" → 123 (string to number conversion)\n * ```\n *\n * @example\n * ```tsx\n * // Usage in a form component\n * const MyInput = ({ field, transformValue }) => {\n *   const { displayValue, handleInputChange, getFormValue } = useInputValueTransform({\n *     value: field.value,\n *     transformValue\n *   });\n *\n *   // Debounce the form updates (optional)\n *   useInputValueDebounce({\n *     value: getFormValue(),\n *     onChange: field.onChange,\n *     debounceDelay: 300\n *   });\n *\n *   return (\n *     <input\n *       value={displayValue}\n *       onChange={handleInputChange}\n *     />\n *   );\n * };\n * ```\n */\nexport const useInputValueTransform = ({\n  value,\n  type,\n  transformValue,\n}: UseInputValueTransformOptions): UseInputValueTransformReturn => {\n  // Track previous external value to detect real external changes\n  const prevExternalValue = useRef(value);\n\n  // Local state for immediate display updates\n  const [displayValue, setDisplayValue] = useState(() => {\n    return transformValue?.displayValue\n      ? transformValue.displayValue(value ?? '')\n      : (value ?? '');\n  });\n\n  /**\n   * Synchronizes display value when form value changes externally.\n   *\n   * This handles cases like:\n   * - Form resets: reset() or setValue('field', '')\n   * - External updates: setValue('field', 'new value')\n   * - Default value initialization from form state\n   * - Programmatic field updates from other components\n   *\n   * Uses a ref to track the previous value and only updates when the external\n   * value actually changes, preventing infinite re-renders.\n   */\n  useEffect(() => {\n    // Only process if the external value actually changed\n    if (value !== prevExternalValue.current) {\n      prevExternalValue.current = value;\n\n      const newDisplayValue = transformValue?.displayValue\n        ? transformValue.displayValue(value ?? '')\n        : (value ?? '');\n\n      setDisplayValue(newDisplayValue);\n    }\n  }, [value, transformValue]);\n\n  /**\n   * Converts the current display value to the appropriate form value.\n   *\n   * **Conversion Logic:**\n   * 1. **Number inputs**:\n   *    - Empty string → empty string (preserves empty state, prevents NaN)\n   *    - Non-empty string → Number(value) (converts to numeric form)\n   *    - Example: \"\" → \"\", \"42\" → 42, \"3.14\" → 3.14\n   *\n   * 2. **Transform inputs**:\n   *    - Applies custom formValue transform function\n   *    - Used for converting display format back to storage format\n   *    - Example: \"$1,000\" → 1000, \"(555) 123-4567\" → \"5551234567\"\n   *\n   * 3. **Regular inputs**:\n   *    - Passes through the display value unchanged\n   *    - Example: \"hello\" → \"hello\", \"test@example.com\" → \"test@example.com\"\n   *\n   * @returns The form value ready for storage/submission\n   */\n  const getFormValue = (): string | number => {\n    if (type === 'number') {\n      return displayValue === '' ? '' : Number(displayValue);\n    }\n\n    return transformValue?.formValue\n      ? transformValue.formValue(displayValue as string)\n      : displayValue;\n  };\n\n  return {\n    displayValue,\n    handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => {\n      setDisplayValue(e.target.value);\n    },\n    getFormValue,\n  };\n};\n"]}