use-mask-input 3.8.0 → 3.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-mask-input",
-  "version": "3.8.0",
+  "version": "3.10.0",
   "private": false,
   "description": "A react Hook for build elegant input masks. Compatible with React Hook Form",
   "author": "Eduardo Borges<euduardoborges@gmail.com>",
@@ -42,18 +42,18 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/inputmask": "5.0.7",
-    "@types/node": "25",
+    "@types/node": "^25.5.0",
     "@types/react": ">=19",
     "@types/react-dom": ">=19",
-    "@vitest/coverage-v8": "4.0.18",
-    "antd": "^6.3.2",
-    "oxlint": "1.53.0",
+    "@vitest/coverage-v8": "4.1.1",
+    "antd": "^6.3.4",
+    "oxlint": "1.57.0",
     "inputmask": "5.0.10-beta.61",
     "jsdom": "^28.1.0",
-    "react-hook-form": "7.71.2",
+    "react-hook-form": "7.72.0",
     "tsup": "8.5.1",
     "typescript": "5.9",
-    "vitest": "4.0.18"
+    "vitest": "4.1.1"
   },
   "scripts": {
     "build": "tsup",

package/src/antd/useMaskInputAntd.spec.tsx

@@ -31,6 +31,7 @@ describe('useMaskInputAntd', () => {
   it('returns a ref callback function', () => {
     const { result } = renderHook(() => useMaskInputAntd({ mask: '999-999' }));
     expect(typeof result.current).toBe('function');
+    expect(typeof result.current.unmaskedValue).toBe('function');
   });
 
   it('handles null input ref', () => {
@@ -62,6 +63,27 @@ describe('useMaskInputAntd', () => {
     expect(inputmask).toHaveBeenCalled();
   });
 
+  it('exposes the unmasked value from the masked Ant Design input', () => {
+    const inputElement = document.createElement('input');
+    vi.mocked(inputmask).mockReturnValue({
+      mask: vi.fn(),
+    } as any);
+
+    const { result } = renderHook(
+      () => useMaskInputAntd({ mask: '999-999' }),
+    );
+
+    act(() => {
+      result.current({ input: inputElement } as unknown as InputRef);
+    });
+
+    inputElement.inputmask = {
+      unmaskedvalue: vi.fn(() => '2026-04-01'),
+    } as any;
+
+    expect(result.current.unmaskedValue()).toBe('2026-04-01');
+  });
+
   it('works with custom options', () => {
     const inputElement = document.createElement('input');
     vi.mocked(inputmask).mockReturnValue({

package/src/antd/useMaskInputAntd.ts

@@ -3,10 +3,13 @@ import { useCallback, useEffect, useRef } from 'react';
 import withMask from '../api/withMask';
 import { resolveInputRef } from '../core';
 import isServer from '../utils/isServer';
+import { getUnmaskedValue, setUnmaskedValue } from '../utils';
 
 import type { InputRef } from 'antd';
 
-import type { Mask, Options } from '../types';
+import type { Mask, Options, UnmaskedValueApi } from '../types';
+
+type UseMaskInputAntdReturn = ((input: InputRef | null) => void) & UnmaskedValueApi;
 
 interface UseMaskInputOptions {
   mask: Mask;
@@ -23,14 +26,13 @@ interface UseMaskInputOptions {
  * @param props.options - Optional mask configuration options
  * @returns A ref callback function to attach to the Ant Design Input element
  */
-export default function useMaskInputAntd(props: UseMaskInputOptions): (
-  input: InputRef | null
-) => void {
+export default function useMaskInputAntd(props: UseMaskInputOptions): UseMaskInputAntdReturn {
   const { mask, register, options } = props;
   const ref = useRef<HTMLInputElement | null>(null);
   const maskRef = useRef(mask);
   const optionsRef = useRef(options);
   const maskedElementRef = useRef<HTMLInputElement | null>(null);
+  const unmaskedValue = useCallback(() => getUnmaskedValue(ref.current), []);
 
   maskRef.current = mask;
   optionsRef.current = options;
@@ -55,10 +57,12 @@ export default function useMaskInputAntd(props: UseMaskInputOptions): (
   }, [register]);
 
   if (isServer) {
-    return (): void => {
+    const noop = (() => {
       // server doesn't have dom, so just do nothing
-    };
+    }) as unknown as UseMaskInputAntdReturn;
+
+    return setUnmaskedValue(noop, () => '');
   }
 
-  return refCallback;
+  return setUnmaskedValue(refCallback as UseMaskInputAntdReturn, unmaskedValue);
 }

package/src/api/index.ts

@@ -1,4 +1,6 @@
 export { default as useMaskInput } from './useMaskInput';
 export { default as useHookFormMask } from './useHookFormMask';
+export { default as useTanStackFormMask } from './useTanStackFormMask';
 export { default as withMask } from './withMask';
 export { default as withHookFormMask } from './withHookFormMask';
+export { default as withTanStackFormMask } from './withTanStackFormMask';

package/src/api/useHookFormMask.ts

@@ -1,7 +1,9 @@
 import { useLayoutEffect, useMemo, useRef } from 'react';
 
 import { applyMaskToElement } from '../core';
-import { flow, makeMaskCacheKey, setPrevRef } from '../utils';
+import {
+  flow, getUnmaskedValue, makeMaskCacheKey, setPrevRef, setUnmaskedValue,
+} from '../utils';
 
 import type { RefCallback } from 'react';
 import type {
@@ -93,6 +95,7 @@ export default function useHookFormMask<
         ...registerReturn,
         ref: entry.stableRef,
       } as UseHookFormMaskReturn<T>;
+      setUnmaskedValue(result, () => getUnmaskedValue(entry?.element ?? null));
 
       setPrevRef(result, ref);
 

package/src/api/useMaskInput.spec.tsx

@@ -29,6 +29,7 @@ describe('useMaskInput', () => {
   it('returns a ref callback function', () => {
     const { result } = renderHook(() => useMaskInput({ mask: '999-999' }));
     expect(typeof result.current).toBe('function');
+    expect(typeof result.current.unmaskedValue).toBe('function');
   });
 
   it('handles null input', () => {
@@ -56,6 +57,23 @@ describe('useMaskInput', () => {
     expect(inputmask).toHaveBeenCalled();
   });
 
+  it('exposes the unmasked value from the masked input', () => {
+    const input = document.createElement('input');
+    vi.mocked(inputmask).mockReturnValue({ mask: vi.fn() } as any);
+
+    const { result } = renderHook(() => useMaskInput({ mask: '999-999' }));
+
+    act(() => {
+      result.current(input);
+    });
+
+    input.inputmask = {
+      unmaskedvalue: vi.fn(() => '2026-04-01'),
+    } as any;
+
+    expect(result.current.unmaskedValue()).toBe('2026-04-01');
+  });
+
   it('handles ref object', () => {
     const input = document.createElement('input');
     const ref = { current: input };

package/src/api/useMaskInput.ts

@@ -5,8 +5,11 @@ import {
 import { resolveInputRef } from '../core';
 import withMask from './withMask';
 import isServer from '../utils/isServer';
+import { getUnmaskedValue, setUnmaskedValue } from '../utils';
 
-import type { Input, Mask, Options } from '../types';
+import type {
+  Input, Mask, Options, UseMaskInputReturn,
+} from '../types';
 
 interface UseMaskInputOptions {
   mask: Mask;
@@ -24,11 +27,12 @@ interface UseMaskInputOptions {
  * @param props.options - Optional mask configuration options
  * @returns A ref callback function to attach to the input element
  */
-export default function useMaskInput(props: UseMaskInputOptions): ((input: Input | null) => void) {
+export default function useMaskInput(props: UseMaskInputOptions): UseMaskInputReturn {
   const { mask, register, options } = props;
   const ref = useRef<HTMLInputElement | null>(null);
   const maskRef = useRef(mask);
   const optionsRef = useRef(options);
+  const unmaskedValue = useCallback(() => getUnmaskedValue(ref.current), []);
 
   const refCallback = useCallback((input: Input | null): void => {
     if (!input) {
@@ -46,10 +50,12 @@ export default function useMaskInput(props: UseMaskInputOptions): ((input: Input
   }, [register]);
 
   if (isServer) {
-    return (): void => {
+    const noop = (() => {
       // server doesn't have dom, so just do nothing
-    };
+    }) as unknown as UseMaskInputReturn;
+
+    return setUnmaskedValue(noop, () => '');
   }
 
-  return refCallback;
+  return setUnmaskedValue(refCallback, unmaskedValue);
 }

package/src/api/useTanStackFormMask.ts

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+
+import withTanStackFormMask from './withTanStackFormMask';
+
+import type { Mask, Options, TanStackFormInputProps, UseTanStackFormMaskReturn } from '../types';
+
+/**
+ * Creates a helper to mask TanStack Form-compatible input props.
+ * Designed for objects returned by field.getInputProps().
+ */
+export default function useTanStackFormMask(): <T extends TanStackFormInputProps>(
+  mask: Mask,
+  inputProps: T,
+  options?: Options,
+) => UseTanStackFormMaskReturn<T> {
+  return useMemo(
+    () => <T extends TanStackFormInputProps>(
+      mask: Mask,
+      inputProps: T,
+      options?: Options,
+    ): UseTanStackFormMaskReturn<T> => withTanStackFormMask(inputProps, mask, options),
+    [],
+  );
+}

package/src/api/withHookFormMask.spec.ts

@@ -18,6 +18,18 @@ vi.mock('inputmask', () => ({
   })),
 }));
 
+const createRegister = (
+  overrides: Partial<UseHookFormMaskReturn<FieldValues>> = {},
+): UseHookFormMaskReturn<FieldValues> => ({
+  prevRef: vi.fn(),
+  ref: vi.fn(),
+  onChange: vi.fn(),
+  onBlur: vi.fn(),
+  name: 'phone',
+  unmaskedValue: vi.fn(() => ''),
+  ...overrides,
+});
+
 describe('withHookFormMask', () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -25,13 +37,7 @@ describe('withHookFormMask', () => {
 
   it('returns register object with masked ref', () => {
     const originalRef = vi.fn();
-    const register: UseHookFormMaskReturn<FieldValues> = {
-      prevRef: vi.fn(),
-      ref: originalRef,
-      onChange: vi.fn(),
-      onBlur: vi.fn(),
-      name: 'phone',
-    };
+    const register = createRegister({ ref: originalRef });
     const maskFn = vi.fn();
     vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as any);
 
@@ -42,18 +48,13 @@ describe('withHookFormMask', () => {
     expect(result.onChange).toBe(register.onChange);
     expect(result.onBlur).toBe(register.onBlur);
     expect(result.name).toBe(register.name);
+    expect(typeof result.unmaskedValue).toBe('function');
   });
 
   it('applies mask when ref is called', () => {
     const input = document.createElement('input');
     const originalRef = vi.fn();
-    const register: UseHookFormMaskReturn<FieldValues> = {
-      prevRef: vi.fn(),
-      ref: originalRef,
-      onChange: vi.fn(),
-      onBlur: vi.fn(),
-      name: 'phone',
-    };
+    const register = createRegister({ ref: originalRef });
     const maskFn = vi.fn();
     vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as any);
 
@@ -63,16 +64,27 @@ describe('withHookFormMask', () => {
     expect(maskFn).toHaveBeenCalled();
   });
 
+  it('exposes the unmasked value from the masked input', () => {
+    const input = document.createElement('input');
+    const originalRef = vi.fn();
+    const register = createRegister({ ref: originalRef });
+    const maskFn = vi.fn();
+    vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as any);
+
+    const result = withHookFormMask(register, '999-999');
+    result.ref?.(input);
+
+    input.inputmask = {
+      unmaskedvalue: vi.fn(() => '2026-04-01'),
+    } as any;
+
+    expect(result.unmaskedValue()).toBe('2026-04-01');
+  });
+
   it('calls original ref after applying mask', () => {
     const input = document.createElement('input');
     const originalRef = vi.fn();
-    const register: UseHookFormMaskReturn<FieldValues> = {
-      ref: originalRef,
-      prevRef: vi.fn(),
-      onChange: vi.fn(),
-      onBlur: vi.fn(),
-      name: 'phone',
-    };
+    const register = createRegister({ ref: originalRef });
     const maskFn = vi.fn();
     vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as any);
 
@@ -85,13 +97,7 @@ describe('withHookFormMask', () => {
   it('works with alias masks', () => {
     const input = document.createElement('input');
     const originalRef = vi.fn();
-    const register: UseHookFormMaskReturn<FieldValues> = {
-      ref: originalRef,
-      prevRef: vi.fn(),
-      onChange: vi.fn(),
-      onBlur: vi.fn(),
-      name: 'cpf',
-    };
+    const register = createRegister({ ref: originalRef, name: 'cpf' });
     const maskFn = vi.fn();
     vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as any);
 
@@ -104,13 +110,7 @@ describe('withHookFormMask', () => {
   it('works with custom options', () => {
     const input = document.createElement('input');
     const originalRef = vi.fn();
-    const register: UseHookFormMaskReturn<FieldValues> = {
-      prevRef: vi.fn(),
-      ref: originalRef,
-      onChange: vi.fn(),
-      onBlur: vi.fn(),
-      name: 'phone',
-    };
+    const register = createRegister({ ref: originalRef });
     const maskFn = vi.fn();
     vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as any);
 
@@ -121,13 +121,10 @@ describe('withHookFormMask', () => {
   });
 
   it('handles null ref gracefully', () => {
-    const register: UseHookFormMaskReturn<FieldValues> = {
+    const register = createRegister({
       prevRef: null as unknown as RefCallback<HTMLElement | null>,
       ref: null as unknown as RefCallback<HTMLElement | null>,
-      onChange: vi.fn(),
-      onBlur: vi.fn(),
-      name: 'phone',
-    };
+    });
 
     const result = withHookFormMask(register, '999-999');
     expect(result.ref).toBeNull();
@@ -137,13 +134,7 @@ describe('withHookFormMask', () => {
 
   it('handles null input in ref callback', () => {
     const originalRef = vi.fn();
-    const register: UseHookFormMaskReturn<FieldValues> = {
-      prevRef: vi.fn(),
-      ref: originalRef,
-      onChange: vi.fn(),
-      onBlur: vi.fn(),
-      name: 'phone',
-    };
+    const register = createRegister({ ref: originalRef });
     const maskFn = vi.fn();
     vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as any);
 
@@ -155,13 +146,7 @@ describe('withHookFormMask', () => {
 
   it('returns the same ref callback reference across multiple calls (stable identity)', () => {
     const originalRef = vi.fn();
-    const register: UseHookFormMaskReturn<FieldValues> = {
-      prevRef: vi.fn(),
-      ref: originalRef,
-      onChange: vi.fn(),
-      onBlur: vi.fn(),
-      name: 'phone',
-    };
+    const register = createRegister({ ref: originalRef });
 
     const first = withHookFormMask(register, '999-999');
     const second = withHookFormMask(register, '999-999');
@@ -171,20 +156,8 @@ describe('withHookFormMask', () => {
 
   it('returns different ref callbacks for different field/mask combinations', () => {
     const originalRef = vi.fn();
-    const registerPhone: UseHookFormMaskReturn<FieldValues> = {
-      prevRef: vi.fn(),
-      ref: originalRef,
-      onChange: vi.fn(),
-      onBlur: vi.fn(),
-      name: 'phone',
-    };
-    const registerCpf: UseHookFormMaskReturn<FieldValues> = {
-      prevRef: vi.fn(),
-      ref: originalRef,
-      onChange: vi.fn(),
-      onBlur: vi.fn(),
-      name: 'cpf',
-    };
+    const registerPhone = createRegister({ ref: originalRef, name: 'phone' });
+    const registerCpf = createRegister({ ref: originalRef, name: 'cpf' });
 
     const phone = withHookFormMask(registerPhone, '999-999');
     const cpf = withHookFormMask(registerCpf, 'cpf');
@@ -195,12 +168,8 @@ describe('withHookFormMask', () => {
   it('returns a new ref callback when the original ref changes', () => {
     const ref1 = vi.fn();
     const ref2 = vi.fn();
-    const register1: UseHookFormMaskReturn<FieldValues> = {
-      prevRef: vi.fn(), ref: ref1, onChange: vi.fn(), onBlur: vi.fn(), name: 'phone',
-    };
-    const register2: UseHookFormMaskReturn<FieldValues> = {
-      prevRef: vi.fn(), ref: ref2, onChange: vi.fn(), onBlur: vi.fn(), name: 'phone',
-    };
+    const register1 = createRegister({ prevRef: vi.fn(), ref: ref1 });
+    const register2 = createRegister({ prevRef: vi.fn(), ref: ref2 });
 
     const result1 = withHookFormMask(register1, '999-999');
     const result2 = withHookFormMask(register2, '999-999');

package/src/api/withHookFormMask.ts

@@ -1,5 +1,7 @@
 import { applyMaskToElement } from '../core';
-import { flow, makeMaskCacheKey, setPrevRef } from '../utils';
+import {
+  getUnmaskedValue, makeMaskCacheKey, setPrevRef, setUnmaskedValue,
+} from '../utils';
 
 import type { RefCallback } from 'react';
 import type { FieldValues } from 'react-hook-form';
@@ -8,6 +10,10 @@ import type {
   Mask, Options, UseFormRegisterReturn, UseHookFormMaskReturn,
 } from '../types';
 
+type MaskedRefCallback = RefCallback<HTMLElement | null> & {
+  currentElement?: HTMLElement | null;
+};
+
 const refCache = new WeakMap<
   RefCallback<HTMLElement | null>,
   Map<string, RefCallback<HTMLElement | null>>
@@ -36,6 +42,7 @@ export default function withHookFormMask(
       ...register,
       ref: null as unknown as RefCallback<HTMLElement | null>,
     } as UseHookFormMaskReturn<FieldValues>;
+    setUnmaskedValue(result, () => '');
     setPrevRef(result, ref);
     return result;
   }
@@ -47,20 +54,21 @@ export default function withHookFormMask(
   const cacheKey = makeMaskCacheKey(register.name, mask);
 
   if (!maskCache?.has(cacheKey)) {
-    const applyMaskToRef = (_ref: HTMLElement | null) => {
-      if (_ref) applyMaskToElement(_ref, mask, options);
-      return _ref;
-    };
-    maskCache?.set(
-      cacheKey,
-      flow(applyMaskToRef, ref) as RefCallback<HTMLElement | null>,
-    );
+    const maskedRef = ((input: HTMLElement | null) => {
+      maskedRef.currentElement = input;
+      if (input) applyMaskToElement(input, mask, options);
+      return ref(input);
+    }) as MaskedRefCallback;
+
+    maskCache?.set(cacheKey, maskedRef);
   }
 
+  const maskedRef = maskCache?.get(cacheKey) as MaskedRefCallback | undefined;
   const result = {
     ...register,
-    ref: maskCache?.get(cacheKey),
+    ref: maskedRef,
   } as UseHookFormMaskReturn<FieldValues>;
+  setUnmaskedValue(result, () => getUnmaskedValue(maskedRef?.currentElement ?? null));
 
   setPrevRef(result, ref);
 

package/src/api/withMask.spec.ts

@@ -24,6 +24,7 @@ describe('withMask', () => {
   it('returns a function', () => {
     const result = withMask('999-999');
     expect(typeof result).toBe('function');
+    expect(typeof result.unmaskedValue).toBe('function');
   });
 
   it('applies mask to input element', () => {
@@ -37,6 +38,21 @@ describe('withMask', () => {
     expect(maskFn).toHaveBeenCalledWith(input);
   });
 
+  it('exposes the unmasked value from the masked input', () => {
+    const input = document.createElement('input');
+    const maskFn = vi.fn();
+    vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as any);
+
+    const refCallback = withMask('999-999');
+    refCallback(input);
+
+    input.inputmask = {
+      unmaskedvalue: vi.fn(() => '2026-04-01'),
+    } as any;
+
+    expect(refCallback.unmaskedValue()).toBe('2026-04-01');
+  });
+
   it('does nothing if input is null', () => {
     const maskFn = vi.fn();
     vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as any);

package/src/api/withMask.ts

@@ -2,13 +2,13 @@
 import inputmask from 'inputmask';
 
 import { getMaskOptions } from '../core/maskConfig';
-import { makeMaskCacheKey } from '../utils';
+import { getUnmaskedValue, makeMaskCacheKey, setUnmaskedValue } from '../utils';
 import isServer from '../utils/isServer';
 import interopDefaultSync from '../utils/moduleInterop';
 
-import type { Input, Mask, Options } from '../types';
+import type { Input, Mask, Options, UseMaskInputReturn } from '../types';
 
-const callbackCache = new Map<string, (input: Input | null) => void>();
+const callbackCache = new Map<string, UseMaskInputReturn>();
 
 /**
  * Higher-order function that creates a ref callback for applying input masks.
@@ -18,26 +18,29 @@ const callbackCache = new Map<string, (input: Input | null) => void>();
  * @param options - Optional mask configuration options
  * @returns A ref callback function that applies the mask
  */
-export default function withMask(mask: Mask, options?: Options): ((input: Input | null) => void) {
+export default function withMask(mask: Mask, options?: Options): UseMaskInputReturn {
   // without options, we cant cache, so we always return a fresh callback. :P
   if (!options) {
     const cacheKey = makeMaskCacheKey('', mask);
     if (callbackCache.has(cacheKey)) {
-      return callbackCache.get(cacheKey) as (input: Input | null) => void;
+      return callbackCache.get(cacheKey) as UseMaskInputReturn;
     }
   }
 
-  const callback = (input: Input | null): void => {
+  let currentInput: Input | null = null;
+
+  const callback = ((input: Input | null): void => {
     if (isServer || mask === null || !input) return;
 
+    currentInput = input;
     const maskInput = interopDefaultSync(inputmask)(getMaskOptions(mask, options));
     maskInput.mask(input as HTMLElement);
-  };
+  }) as UseMaskInputReturn;
 
   if (!options) {
     const cacheKey = makeMaskCacheKey('', mask);
     callbackCache.set(cacheKey, callback);
   }
 
-  return callback;
+  return setUnmaskedValue(callback, () => getUnmaskedValue(currentInput));
 }

package/src/api/withTanStackFormMask.spec.ts

@@ -0,0 +1,76 @@
+import inputmask from 'inputmask';
+import {
+  beforeEach,
+  describe, expect, it, vi,
+} from 'vitest';
+
+import withTanStackFormMask from './withTanStackFormMask';
+
+import type { TanStackFormInputProps } from '../types';
+
+vi.mock('inputmask', () => ({
+  default: vi.fn((options) => ({
+    mask: vi.fn(),
+    options,
+  })),
+}));
+
+describe('withTanStackFormMask', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('returns masked input props with stable structure', () => {
+    const inputProps: TanStackFormInputProps = {
+      name: 'cpf',
+      ref: vi.fn(),
+      onBlur: vi.fn(),
+      onChange: vi.fn(),
+      value: '',
+    };
+
+    const result = withTanStackFormMask(inputProps, 'cpf');
+
+    expect(typeof result.ref).toBe('function');
+    expect(result.onBlur).toBe(inputProps.onBlur);
+    expect(result.onChange).toBe(inputProps.onChange);
+    expect(result.name).toBe('cpf');
+  });
+
+  it('applies mask when ref callback receives an input', () => {
+    const maskFn = vi.fn();
+    vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as any);
+
+    const input = document.createElement('input');
+    const originalRef = vi.fn();
+    const inputProps: TanStackFormInputProps = {
+      name: 'phone',
+      ref: originalRef,
+      onBlur: vi.fn(),
+      onChange: vi.fn(),
+      value: '',
+    };
+
+    const result = withTanStackFormMask(inputProps, '(99) 99999-9999');
+    result.ref(input);
+
+    expect(maskFn).toHaveBeenCalled();
+    expect(originalRef).toHaveBeenCalledWith(input);
+  });
+
+  it('keeps ref cache stable for same ref and mask', () => {
+    const originalRef = vi.fn();
+    const inputProps: TanStackFormInputProps = {
+      name: 'cpf',
+      ref: originalRef,
+      onBlur: vi.fn(),
+      onChange: vi.fn(),
+      value: '',
+    };
+
+    const first = withTanStackFormMask(inputProps, 'cpf');
+    const second = withTanStackFormMask(inputProps, 'cpf');
+
+    expect(first.ref).toBe(second.ref);
+  });
+});