@fuf-stack/uniform 0.22.0 → 0.22.1

package/dist/chunk-Q2BOMFJ5.js

@@ -0,0 +1,41 @@
+// src/hooks/useInputValueTransform/useInputValueTransform.ts
+import { useCallback } from "react";
+var useInputValueTransform = ({
+  type,
+  transform
+}) => {
+  const toDisplayValue = useCallback(
+    (formValue) => {
+      if (transform == null ? void 0 : transform.toDisplayValue) {
+        return transform.toDisplayValue(formValue != null ? formValue : "");
+      }
+      if (type === "number") {
+        if (formValue === "") return "";
+        const numValue = Number(formValue);
+        return Number.isNaN(numValue) ? formValue : numValue;
+      }
+      return formValue != null ? formValue : "";
+    },
+    [type, transform]
+  );
+  const toFormValue = useCallback(
+    (displayValue) => {
+      if (type === "number") {
+        if (displayValue === "") return "";
+        const numValue = Number(displayValue);
+        return Number.isNaN(numValue) ? displayValue : numValue;
+      }
+      return (transform == null ? void 0 : transform.toFormValue) ? transform.toFormValue(displayValue) : displayValue;
+    },
+    [type, transform]
+  );
+  return {
+    toDisplayValue,
+    toFormValue
+  };
+};
+
+export {
+  useInputValueTransform
+};
+//# sourceMappingURL=chunk-Q2BOMFJ5.js.map

package/dist/chunk-Q2BOMFJ5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useInputValueTransform/useInputValueTransform.ts"],"sourcesContent":["import { useCallback } from 'react';\n\nexport interface InputValueTransform {\n  /** Transforms the form value to display value (e.g., 1000 → \"$1,000\") */\n  toDisplayValue: (value: string | number) => string | number;\n  /** Transforms the display value to form value (e.g., \"$1,000\" → 1000) */\n  toFormValue: (value: string) => string | number;\n}\n\nexport interface UseInputValueTransformOptions {\n  /** Input type for special number handling */\n  type?: 'text' | 'number' | 'password';\n  /** Value transformation functions */\n  transform?: InputValueTransform;\n}\n\nexport interface UseInputValueTransformReturn {\n  /** Converts any form value to display value */\n  toDisplayValue: (formValue: string | number) => string | number;\n  /** Converts any display value to form value */\n  toFormValue: (displayValue: string | number) => string | number;\n}\n\n/**\n * Custom hook providing utility functions for value transformations between display and form values.\n *\n * This hook provides pure conversion functions without any state management. It's 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 * - Pure conversion functions (no state)\n * - Special number input handling (empty string preservation)\n * - Bidirectional value transformations\n * - Memoized functions for performance\n *\n * @param options Configuration for value transformation\n * @returns Pure conversion utility functions\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 { toDisplayValue, toFormValue } = useInputValueTransform({\n *   transform: currencyTransform\n * });\n *\n * const displayVal = toDisplayValue(1000); // \"$1,000\"\n * const formVal = toFormValue(\"$1,500\"); // 1500\n * ```\n *\n * @example\n * ```tsx\n * // Number input (no transforms needed)\n * const { toDisplayValue, toFormValue } = useInputValueTransform({\n *   type: 'number'\n * });\n *\n * // Handles empty string → empty string (not NaN)\n * // Handles \"123\" → 123 (string to number conversion)\n * ```\n *\n * @example\n * ```tsx\n * // Integration with debouncing\n * const MyInput = ({ field, transform }) => {\n *   const transform = useInputValueTransform({ transform });\n *\n *   const { onChange, onBlur, value } = useInputValueDebounce({\n *     ...transform,\n *     initialValue: field.value,\n *     debounceDelay: 300,\n *     onBlur: field.onBlur,\n *     onChange: field.onChange,\n *   });\n *\n *   return <input value={value} onChange={onChange} onBlur={onBlur} />;\n * };\n * ```\n */\nexport const useInputValueTransform = ({\n  type,\n  transform,\n}: UseInputValueTransformOptions): UseInputValueTransformReturn => {\n  /**\n   * Converts any form value to display value\n   */\n  const toDisplayValue = useCallback(\n    (formValue: string | number): string | number => {\n      if (transform?.toDisplayValue) {\n        return transform.toDisplayValue(formValue ?? '');\n      }\n\n      // For number type, convert valid strings to numbers for display\n      if (type === 'number') {\n        if (formValue === '') return '';\n        const numValue = Number(formValue);\n        return Number.isNaN(numValue) ? formValue : numValue;\n      }\n\n      return formValue ?? '';\n    },\n    [type, transform],\n  );\n\n  /**\n   * Converts any display value to form value\n   */\n  const toFormValue = useCallback(\n    (displayValue: string | number): string | number => {\n      if (type === 'number') {\n        if (displayValue === '') return '';\n        const numValue = Number(displayValue);\n        return Number.isNaN(numValue) ? displayValue : numValue;\n      }\n\n      return transform?.toFormValue\n        ? transform.toFormValue(displayValue as string)\n        : displayValue;\n    },\n    [type, transform],\n  );\n\n  return {\n    toDisplayValue,\n    toFormValue,\n  };\n};\n"],"mappings":";AAAA,SAAS,mBAAmB;AAsFrB,IAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AACF,MAAmE;AAIjE,QAAM,iBAAiB;AAAA,IACrB,CAAC,cAAgD;AAC/C,UAAI,uCAAW,gBAAgB;AAC7B,eAAO,UAAU,eAAe,gCAAa,EAAE;AAAA,MACjD;AAGA,UAAI,SAAS,UAAU;AACrB,YAAI,cAAc,GAAI,QAAO;AAC7B,cAAM,WAAW,OAAO,SAAS;AACjC,eAAO,OAAO,MAAM,QAAQ,IAAI,YAAY;AAAA,MAC9C;AAEA,aAAO,gCAAa;AAAA,IACtB;AAAA,IACA,CAAC,MAAM,SAAS;AAAA,EAClB;AAKA,QAAM,cAAc;AAAA,IAClB,CAAC,iBAAmD;AAClD,UAAI,SAAS,UAAU;AACrB,YAAI,iBAAiB,GAAI,QAAO;AAChC,cAAM,WAAW,OAAO,YAAY;AACpC,eAAO,OAAO,MAAM,QAAQ,IAAI,eAAe;AAAA,MACjD;AAEA,cAAO,uCAAW,eACd,UAAU,YAAY,YAAsB,IAC5C;AAAA,IACN;AAAA,IACA,CAAC,MAAM,SAAS;AAAA,EAClB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/{chunk-EPY6UDD3.js → chunk-QDFIRRB5.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk-7QWLAPOT.js";
 import {
   useInputValueDebounce
-} from "./chunk-KMDTMBYI.js";
+} from "./chunk-U5WBLGZV.js";
 
 // src/Input/Input.tsx
 import { Input as HeroInput } from "@heroui/input";
@@ -27,7 +27,7 @@ var Input = ({
   size = void 0,
   startContent = void 0,
   testId: _testId = void 0,
-  transformValue = void 0,
+  transform = void 0,
   type = void 0
 }) => {
   const { control, debugMode, getFieldState } = useFormContext();
@@ -48,7 +48,7 @@ var Input = ({
     debounceDelay,
     onBlur: fieldOnBlur,
     onChange: fieldOnChange,
-    transformValue,
+    transform,
     type,
     value: fieldValue
   });
@@ -95,4 +95,4 @@ export {
   Input_default,
   Input_default2
 };
-//# sourceMappingURL=chunk-EPY6UDD3.js.map
+//# sourceMappingURL=chunk-QDFIRRB5.js.map

package/dist/chunk-QDFIRRB5.js.map

@@ -0,0 +1 @@
+{"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  transform?: 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  transform = 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    transform,\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,YAAY;AAAA,EACZ,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-2EYP66KF.cjs → chunk-SG6PWCRL.cjs}

@@ -10,7 +10,7 @@ var _chunkGNYQC5IJcjs = require('./chunk-GNYQC5IJ.cjs');
 var _chunkY6EAPURVcjs = require('./chunk-Y6EAPURV.cjs');
 
 
-var _chunkI2PJDXWBcjs = require('./chunk-I2PJDXWB.cjs');
+var _chunkOWWUTKGYcjs = require('./chunk-OWWUTKGY.cjs');
 
 // src/Input/Input.tsx
 var _input = require('@heroui/input');
@@ -27,7 +27,7 @@ var Input = ({
   size = void 0,
   startContent = void 0,
   testId: _testId = void 0,
-  transformValue = void 0,
+  transform = void 0,
   type = void 0
 }) => {
   const { control, debugMode, getFieldState } = _chunkY6EAPURVcjs.useFormContext.call(void 0, );
@@ -44,11 +44,11 @@ var Input = ({
     value: fieldValue,
     ref
   } = field;
-  const { onChange, onBlur, value } = _chunkI2PJDXWBcjs.useInputValueDebounce.call(void 0, {
+  const { onChange, onBlur, value } = _chunkOWWUTKGYcjs.useInputValueDebounce.call(void 0, {
     debounceDelay,
     onBlur: fieldOnBlur,
     onChange: fieldOnChange,
-    transformValue,
+    transform,
     type,
     value: fieldValue
   });
@@ -95,4 +95,4 @@ var Input_default2 = Input_default;
 
 
 exports.Input_default = Input_default; exports.Input_default2 = Input_default2;
-//# sourceMappingURL=chunk-2EYP66KF.cjs.map
+//# sourceMappingURL=chunk-SG6PWCRL.cjs.map

package/dist/chunk-SG6PWCRL.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-SG6PWCRL.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-SG6PWCRL.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  transform?: 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  transform = 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    transform,\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-KMDTMBYI.js → chunk-U5WBLGZV.js}

@@ -1,6 +1,6 @@
 import {
   useInputValueTransform
-} from "./chunk-G5UX55XC.js";
+} from "./chunk-Q2BOMFJ5.js";
 import {
   __spreadProps,
   __spreadValues
@@ -12,50 +12,27 @@ var useInputValueDebounce = ({
   debounceDelay = 300,
   onBlur,
   onChange,
-  transformValue,
+  transform,
   type,
   value
 }) => {
-  const transform = useInputValueTransform({
-    transformValue,
-    type,
-    value
+  const { toDisplayValue, toFormValue } = useInputValueTransform({
+    transform,
+    type
   });
-  const getFormValue = useCallback(
-    (rawValue) => {
-      const stringValue = String(rawValue);
-      if (transformValue) {
-        return transformValue.formValue(stringValue);
-      }
-      if (type === "number" && stringValue !== "") {
-        const numValue = Number(stringValue);
-        return Number.isNaN(numValue) ? rawValue : numValue;
-      }
-      return rawValue;
-    },
-    [transformValue, type]
-  );
-  const displayValue = transformValue ? transform.displayValue : value;
-  const [currentDisplayValue, setCurrentDisplayValue] = useState(displayValue);
+  const [displayValue, setDisplayValue] = useState(() => toDisplayValue(value));
   const timeoutRef = useRef(null);
   useEffect(() => {
-    setCurrentDisplayValue(displayValue);
-  }, [displayValue]);
+    setDisplayValue(toDisplayValue(value));
+  }, [value, toDisplayValue]);
   const handleChange = useCallback(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (...event) => {
-      var _a, _b, _c, _d;
-      const newValue = (_c = (_b = (_a = event[0]) == null ? void 0 : _a.target) == null ? void 0 : _b.value) != null ? _c : event[0];
-      let displayVal = newValue;
-      if (!transformValue && type === "number" && newValue !== "") {
-        const numValue = Number(newValue);
-        displayVal = Number.isNaN(numValue) ? newValue : numValue;
-      }
-      setCurrentDisplayValue(displayVal);
-      if (transformValue && ((_d = event[0]) == null ? void 0 : _d.target)) {
-        transform.handleInputChange(event[0]);
-      }
-      const formValue = getFormValue(newValue);
+      var _a, _b, _c;
+      const rawValue = (_c = (_b = (_a = event[0]) == null ? void 0 : _a.target) == null ? void 0 : _b.value) != null ? _c : event[0];
+      const newDisplayValue = transform ? rawValue : toDisplayValue(rawValue);
+      setDisplayValue(newDisplayValue);
+      const formValue = toFormValue(newDisplayValue);
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
@@ -78,25 +55,25 @@ var useInputValueDebounce = ({
         timeoutRef.current = setTimeout(executeOnChange, debounceDelay);
       }
     },
-    [onChange, debounceDelay, transformValue, transform, type, getFormValue]
+    [onChange, debounceDelay, toDisplayValue, toFormValue, transform]
   );
   const handleBlur = useCallback(() => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
-      const formValue = getFormValue(currentDisplayValue);
+      const formValue = toFormValue(displayValue);
       onChange(formValue);
     }
     onBlur();
-  }, [currentDisplayValue, onChange, onBlur, getFormValue]);
+  }, [onChange, onBlur, toFormValue, displayValue]);
   return {
     onChange: handleChange,
     onBlur: handleBlur,
-    value: currentDisplayValue
+    value: displayValue
   };
 };
 
 export {
   useInputValueDebounce
 };
-//# sourceMappingURL=chunk-KMDTMBYI.js.map
+//# sourceMappingURL=chunk-U5WBLGZV.js.map

package/dist/chunk-U5WBLGZV.js.map

@@ -0,0 +1 @@
+{"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  transform?: InputValueTransform;\n  /** Input type to handle number conversion (optional) */\n  type?: 'text' | 'number' | 'password';\n  /** The initial form value */\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.transform 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 initial form value\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 *   transform: currencyTransform,\n *   value: field.value, // Display: \"$100.00\", Form: 100\n * });\n * ```\n */\nexport const useInputValueDebounce = ({\n  debounceDelay = 300,\n  onBlur,\n  onChange,\n  transform,\n  type,\n  value,\n}: UseInputValueDebounceOptions): UseInputValueDebounceReturn => {\n  // Get conversion utilities from transform hook\n  const { toDisplayValue, toFormValue } = useInputValueTransform({\n    transform,\n    type,\n  });\n\n  // Track display value for synchronous updates\n  const [displayValue, setDisplayValue] = useState(() => toDisplayValue(value));\n\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n  // Sync with external value changes\n  useEffect(() => {\n    setDisplayValue(toDisplayValue(value));\n  }, [value, toDisplayValue]);\n\n  // Enhanced onChange handler with debouncing\n  const handleChange = useCallback(\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (...event: any[]) => {\n      // Extract the raw input value\n      const rawValue = event[0]?.target?.value ?? event[0];\n\n      // For transforms, user input is already in display format\n      // For number types, convert strings to numbers for display\n      const newDisplayValue = transform ? rawValue : toDisplayValue(rawValue);\n      setDisplayValue(newDisplayValue);\n\n      // Convert to form value using transform utilities\n      const formValue = toFormValue(newDisplayValue);\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, toDisplayValue, toFormValue, transform],\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 from current display value\n      const formValue = toFormValue(displayValue);\n      onChange(formValue);\n    }\n    onBlur();\n  }, [onChange, onBlur, toFormValue, displayValue]);\n\n  return {\n    onChange: handleChange,\n    onBlur: handleBlur,\n    value: displayValue,\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,EAAE,gBAAgB,YAAY,IAAI,uBAAuB;AAAA,IAC7D;AAAA,IACA;AAAA,EACF,CAAC;AAGD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,MAAM,eAAe,KAAK,CAAC;AAE5E,QAAM,aAAa,OAA8B,IAAI;AAGrD,YAAU,MAAM;AACd,oBAAgB,eAAe,KAAK,CAAC;AAAA,EACvC,GAAG,CAAC,OAAO,cAAc,CAAC;AAG1B,QAAM,eAAe;AAAA;AAAA,IAEnB,IAAI,UAAiB;AA1HzB;AA4HM,YAAM,YAAW,uBAAM,CAAC,MAAP,mBAAU,WAAV,mBAAkB,UAAlB,YAA2B,MAAM,CAAC;AAInD,YAAM,kBAAkB,YAAY,WAAW,eAAe,QAAQ;AACtE,sBAAgB,eAAe;AAG/B,YAAM,YAAY,YAAY,eAAe;AAG7C,UAAI,WAAW,SAAS;AACtB,qBAAa,WAAW,OAAO;AAAA,MACjC;AAEA,YAAM,kBAAkB,MAAM;AA3IpC,YAAAA;AA6IQ,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,aAAa,SAAS;AAAA,EAClE;AAGA,QAAM,aAAa,YAAY,MAAM;AAEnC,QAAI,WAAW,SAAS;AACtB,mBAAa,WAAW,OAAO;AAC/B,iBAAW,UAAU;AAGrB,YAAM,YAAY,YAAY,YAAY;AAC1C,eAAS,SAAS;AAAA,IACpB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,QAAQ,aAAa,YAAY,CAAC;AAEhD,SAAO;AAAA,IACL,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AACF;","names":["_a"]}

package/dist/hooks/index.cjs

@@ -9,10 +9,10 @@ var _chunkY6EAPURVcjs = require('../chunk-Y6EAPURV.cjs');
 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');
 
 
@@ -23,5 +23,5 @@ require('../chunk-555JRYCS.cjs');
 
 
 
-exports.checkFieldIsRequired = _chunkY6EAPURVcjs.checkFieldIsRequired; 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.checkFieldIsRequired = _chunkY6EAPURVcjs.checkFieldIsRequired; 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/hooks/index.js

@@ -9,10 +9,10 @@ import {
 import "../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 {
   checkFieldIsRequired,

package/dist/hooks/useInputValueDebounce/index.cjs

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkI2PJDXWBcjs = require('../../chunk-I2PJDXWB.cjs');
-require('../../chunk-TSB65253.cjs');
+var _chunkOWWUTKGYcjs = require('../../chunk-OWWUTKGY.cjs');
+require('../../chunk-P6HJOG7D.cjs');
 require('../../chunk-555JRYCS.cjs');
 
 
-exports.useInputValueDebounce = _chunkI2PJDXWBcjs.useInputValueDebounce;
+exports.useInputValueDebounce = _chunkOWWUTKGYcjs.useInputValueDebounce;
 //# sourceMappingURL=index.cjs.map

package/dist/hooks/useInputValueDebounce/index.d.cts

@@ -8,10 +8,10 @@ interface UseInputValueDebounceOptions {
     /** The onChange function to call with debounced value */
     onChange: (...event: any[]) => void;
     /** Value transformation functions */
-    transformValue?: InputValueTransform;
+    transform?: InputValueTransform;
     /** Input type to handle number conversion (optional) */
     type?: 'text' | 'number' | 'password';
-    /** The value to debounce */
+    /** The initial form value */
     value: string | number;
 }
 interface UseInputValueDebounceReturn {
@@ -40,9 +40,9 @@ interface UseInputValueDebounceReturn {
  * @param options.debounceDelay Delay in milliseconds (default: 300)
  * @param options.onBlur Function to call after flushing debounced value
  * @param options.onChange Function to call with debounced value
- * @param options.transformValue Optional transform functions for display ↔ form value conversion
+ * @param options.transform Optional transform functions for display ↔ form value conversion
  * @param options.type Input type for number conversion ('text' | 'number' | 'password')
- * @param options.value The value to debounce
+ * @param options.value The initial form value
  * @returns Object containing enhanced onChange, onBlur, and immediate display value
  *
  * @example
@@ -80,11 +80,11 @@ interface UseInputValueDebounceReturn {
  *   debounceDelay: 300,
  *   onBlur: field.onBlur,
  *   onChange: field.onChange,
- *   transformValue: currencyTransform,
+ *   transform: currencyTransform,
  *   value: field.value, // Display: "$100.00", Form: 100
  * });
  * ```
  */
-declare const useInputValueDebounce: ({ debounceDelay, onBlur, onChange, transformValue, type, value, }: UseInputValueDebounceOptions) => UseInputValueDebounceReturn;
+declare const useInputValueDebounce: ({ debounceDelay, onBlur, onChange, transform, type, value, }: UseInputValueDebounceOptions) => UseInputValueDebounceReturn;
 
 export { type UseInputValueDebounceOptions, type UseInputValueDebounceReturn, useInputValueDebounce };

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

@@ -8,10 +8,10 @@ interface UseInputValueDebounceOptions {
     /** The onChange function to call with debounced value */
     onChange: (...event: any[]) => void;
     /** Value transformation functions */
-    transformValue?: InputValueTransform;
+    transform?: InputValueTransform;
     /** Input type to handle number conversion (optional) */
     type?: 'text' | 'number' | 'password';
-    /** The value to debounce */
+    /** The initial form value */
     value: string | number;
 }
 interface UseInputValueDebounceReturn {
@@ -40,9 +40,9 @@ interface UseInputValueDebounceReturn {
  * @param options.debounceDelay Delay in milliseconds (default: 300)
  * @param options.onBlur Function to call after flushing debounced value
  * @param options.onChange Function to call with debounced value
- * @param options.transformValue Optional transform functions for display ↔ form value conversion
+ * @param options.transform Optional transform functions for display ↔ form value conversion
  * @param options.type Input type for number conversion ('text' | 'number' | 'password')
- * @param options.value The value to debounce
+ * @param options.value The initial form value
  * @returns Object containing enhanced onChange, onBlur, and immediate display value
  *
  * @example
@@ -80,11 +80,11 @@ interface UseInputValueDebounceReturn {
  *   debounceDelay: 300,
  *   onBlur: field.onBlur,
  *   onChange: field.onChange,
- *   transformValue: currencyTransform,
+ *   transform: currencyTransform,
  *   value: field.value, // Display: "$100.00", Form: 100
  * });
  * ```
  */
-declare const useInputValueDebounce: ({ debounceDelay, onBlur, onChange, transformValue, type, value, }: UseInputValueDebounceOptions) => UseInputValueDebounceReturn;
+declare const useInputValueDebounce: ({ debounceDelay, onBlur, onChange, transform, type, value, }: UseInputValueDebounceOptions) => UseInputValueDebounceReturn;
 
 export { type UseInputValueDebounceOptions, type UseInputValueDebounceReturn, useInputValueDebounce };

package/dist/hooks/useInputValueDebounce/index.js

@@ -1,7 +1,7 @@
 import {
   useInputValueDebounce
-} from "../../chunk-KMDTMBYI.js";
-import "../../chunk-G5UX55XC.js";
+} from "../../chunk-U5WBLGZV.js";
+import "../../chunk-Q2BOMFJ5.js";
 import "../../chunk-K2V4ULA2.js";
 export {
   useInputValueDebounce

package/dist/hooks/useInputValueTransform/index.cjs

@@ -1,8 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkTSB65253cjs = require('../../chunk-TSB65253.cjs');
+var _chunkP6HJOG7Dcjs = require('../../chunk-P6HJOG7D.cjs');
 require('../../chunk-555JRYCS.cjs');
 
 
-exports.useInputValueTransform = _chunkTSB65253cjs.useInputValueTransform;
+exports.useInputValueTransform = _chunkP6HJOG7Dcjs.useInputValueTransform;
 //# sourceMappingURL=index.cjs.map

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

@@ -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 };