use-mask-input 3.11.1 → 3.12.0

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+## 3.12.0
+
+### Minor Changes
+
+- 0b5757d: Add Vue 3 support via a new `use-mask-input/vue` entry point.
+
+  Two exports: a `vMaskInput` directive and a `useMaskInput` composable. In `<script setup>` the directive needs no registration and no plugin — Vue resolves `vMaskInput` to `v-mask-input` on its own.
+
+  ```vue
+  <script setup>
+  import { vMaskInput } from "use-mask-input/vue";
+  </script>
+
+  <template>
+    <input v-mask-input="'cpf'" />
+    <input
+      v-model="cpf"
+      v-mask-input="{ mask: 'cpf', options: { autoUnmask: true } }"
+    />
+  </template>
+  ```
+
+  `v-model` works with no adapter, and vee-validate 4 needs no integration code at all: with `autoUnmask`, field state and submit values receive the raw value while the input keeps displaying the mask.
+
+  Also: `react` and `react-dom` are now optional peer dependencies, so installing the package in a Vue project no longer warns about missing React. `vue` and `vee-validate` are optional peers. The Vue entry never imports React.
+
+### Patch Changes
+
+- 0b5757d: Vue: binding `null` to `v-mask-input` now removes a mask that is already on the element.
+
+  The binding is reactive, so `v-mask-input="enabled ? 'cpf' : null"` reads as a toggle. Previously switching it off left the previous Inputmask instance attached and the field kept formatting.
+
 ## 3.11.1
 
 ### Patch Changes

package/README.md

@@ -1,6 +1,6 @@
 <div align="center">
   <h1>🥸 use-mask-input</h1>
-  <p>Input masks for React. Works with React Hook Form, <strong>TanStack Form</strong>, Ant Design, and plain inputs.</p>
+  <p>Input masks for <strong>React</strong> and <strong>Vue 3</strong>. Works with React Hook Form, TanStack Form, vee-validate, Ant Design, and plain inputs.</p>
 
   [![npm](https://img.shields.io/npm/v/use-mask-input)](https://www.npmjs.com/package/use-mask-input)
   [![npm downloads](https://img.shields.io/npm/dw/use-mask-input)](https://www.npmjs.com/package/use-mask-input)
@@ -108,6 +108,102 @@ function EmailInput() {
 }
 ```
 
+## Vue 3
+
+Everything above is React. Vue 3 has its own entry point:
+
+```ts
+import { vMaskInput, useMaskInput } from 'use-mask-input/vue';
+```
+
+### The directive
+
+In `<script setup>`, importing `vMaskInput` is enough. Vue resolves a `vFoo` binding to `v-foo`, so there is no registration step and no plugin.
+
+```vue
+<script setup>
+import { vMaskInput } from 'use-mask-input/vue';
+</script>
+
+<template>
+  <input v-mask-input="'cpf'" />
+  <input v-mask-input="'(99) 99999-9999'" />
+  <input v-mask-input="['999-999', '999-999-999']" />
+  <input v-mask-input="{ mask: 'currency', options: { prefix: 'R$ ' } }" />
+</template>
+```
+
+Outside `<script setup>`, register it yourself: `app.directive('mask-input', vMaskInput)`.
+
+### With `v-model`
+
+`v-model` works with no extra code. Add `autoUnmask` and the bound value is the raw one, while the input keeps showing the mask:
+
+```vue
+<input v-model="cpf" v-mask-input="{ mask: 'cpf', options: { autoUnmask: true } }" />
+<!-- displays 123.456.789-01, and cpf === '12345678901' -->
+```
+
+Without `autoUnmask`, `v-model` receives the masked string. Directive order does not matter: `v-model` before or after `v-mask-input` behaves identically.
+
+Binding `null` turns masking off and removes any mask already applied, so `v-mask-input="enabled ? 'cpf' : null"` works as a toggle.
+
+### With vee-validate
+
+No helper, no wrapper. `useField` plus `v-model` plus the directive is the whole integration, and `handleSubmit` receives the unmasked value:
+
+```vue
+<script setup>
+import { useField, useForm } from 'vee-validate';
+import { vMaskInput } from 'use-mask-input/vue';
+
+const { handleSubmit } = useForm();
+const { value, errorMessage } = useField('cpf', (v) => v?.length === 11 || 'Invalid CPF');
+
+const onSubmit = handleSubmit((values) => console.log(values)); // { cpf: '12345678901' }
+</script>
+
+<template>
+  <form @submit="onSubmit">
+    <input v-model="value" v-mask-input="{ mask: 'cpf', options: { autoUnmask: true } }" />
+    <span>{{ errorMessage }}</span>
+  </form>
+</template>
+```
+
+### With component libraries
+
+Put the directive on the component. Vue applies it to the root element and the mask finds the inner input, so PrimeVue, Element Plus and Ant Design Vue work as-is:
+
+```vue
+<InputText v-mask-input="'cpf'" />
+```
+
+### The composable
+
+For imperative reads, or when you want the raw value without `autoUnmask`:
+
+```vue
+<script setup>
+import { useMaskInput } from 'use-mask-input/vue';
+
+const { maskRef, unmaskedValue } = useMaskInput('cpf');
+const submit = () => console.log(unmaskedValue());
+</script>
+
+<template>
+  <input :ref="maskRef" />
+</template>
+```
+
+### Vue caveats
+
+- **`unmaskedValue()` is not reactive.** `{{ unmaskedValue() }}` renders once and never updates, because reading the DOM registers no reactive dependency. Use it in event handlers and imperative code. For a value the template tracks, use `v-model` with `autoUnmask: true`.
+- **`noValuePatching: true` is unsupported.** It disables the property accessor that the whole `v-model` integration relies on.
+- **Replace the options object, don't mutate it.** Options are compared shallowly, so an in-place mutation may not re-apply the mask.
+
+There is deliberately no `<MaskInput>` component and no vee-validate helper, because `v-model` plus the directive already covers both.
+
 ## APIs
 
 | API | Description |
@@ -122,6 +218,8 @@ function EmailInput() {
 | `useHookFormMaskAntd` | Hook. `useHookFormMask` for Ant Design. |
 | `formatWithMask` | Function. Formats a raw value using a mask, without a mounted element. |
 | `unformatWithMask` | Function. Removes the mask from a formatted value, without a mounted element. |
+| `vMaskInput` | Vue directive. `use-mask-input/vue`. The Vue default choice. |
+| `useMaskInput` (Vue) | Composable. `use-mask-input/vue`. Returns `{ maskRef, unmaskedValue }`. |
 
 ## Built-in Aliases
 
@@ -134,6 +232,9 @@ function EmailInput() {
 - Ant Design (`use-mask-input/antd`)
 - React Final Form
 - Next.js / SSR
+- **Vue 3** (`use-mask-input/vue`)
+- **vee-validate** (no adapter needed)
+- Vue component libraries: PrimeVue, Element Plus, Ant Design Vue
 
 ## License
 

package/dist/antd.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./withMask-BQpBm8zG.cjs");let t=require("react");function n(n){return(0,t.useMemo)(()=>{let t=new Map;return(r,i,a)=>{if(!n)throw Error(`registerFn is required`);let o=n(r,a),{ref:s}=o,c=e.o(r,i);t.has(c)||t.set(c,t=>{let n=t?e.u(t.input):null;n&&e.n(n,i,a),s&&s(n)});let l={...o,ref:t.get(c)};return e.s(l,s),l}},[n])}function r(n){let{mask:r,register:i,options:a}=n,o=(0,t.useRef)(null),s=(0,t.useRef)(r),c=(0,t.useRef)(a),l=(0,t.useRef)(null),u=(0,t.useCallback)(()=>e.a(o.current),[]);s.current=r,c.current=a;let d=(0,t.useCallback)(t=>{if(!t){o.current=null;return}o.current=e.u(t.input),o.current&&o.current!==l.current&&(e.t(s.current,c.current)(o.current),l.current=o.current)},[]);return(0,t.useEffect)(()=>{e.l||!o.current||!i||i(o.current)},[i]),e.l?e.c((()=>{}),()=>``):e.c(d,u)}exports.useHookFormMaskAntd=n,exports.useMaskInputAntd=r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core-BopfTGvA.cjs"),t=require("./withMask--iSmiRbB.cjs");let n=require("react");function r(t){return(0,n.useMemo)(()=>{let n=new Map;return(r,i,a)=>{if(!t)throw Error(`registerFn is required`);let o=t(r,a),{ref:s}=o,c=e.o(r,i);n.has(c)||n.set(c,t=>{let n=t?e.h(t.input):null;n&&e.t(n,i,a),s&&s(n)});let l={...o,ref:n.get(c)};return e.s(l,s),l}},[t])}function i(r){let{mask:i,register:a,options:o}=r,s=(0,n.useRef)(null),c=(0,n.useRef)(i),l=(0,n.useRef)(o),u=(0,n.useRef)(null),d=(0,n.useCallback)(()=>e.a(s.current),[]);c.current=i,l.current=o;let f=(0,n.useCallback)(n=>{if(!n){s.current=null;return}s.current=e.h(n.input),s.current&&s.current!==u.current&&(t.t(c.current,l.current)(s.current),u.current=s.current)},[]);return(0,n.useEffect)(()=>{e.u||!s.current||!a||a(s.current)},[a]),e.u?e.c((()=>{}),()=>``):e.c(f,d)}exports.useHookFormMaskAntd=r,exports.useMaskInputAntd=i;
 //# sourceMappingURL=antd.cjs.map

package/dist/antd.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"antd.cjs","names":["makeMaskCacheKey","resolveInputRef","getUnmaskedValue","resolveInputRef","isServer","setUnmaskedValue"],"sources":["../src/antd/useHookFormMaskAntd.ts","../src/antd/useMaskInputAntd.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { applyMaskToElement, resolveInputRef } from '../core';\nimport { makeMaskCacheKey, setPrevRef } from '../utils';\n\nimport type { InputRef } from 'antd';\nimport type { RefCallback } from 'react';\nimport type {\n  FieldValues, Path,\n  RegisterOptions,\n  UseFormRegister,\n} from 'react-hook-form';\n\nimport type { Mask, Options, UseHookFormMaskReturn } from '../types';\n\nexport type UseHookFormMaskAntdReturn<T extends FieldValues> = Omit<\n  UseHookFormMaskReturn<T>,\n  'ref'\n> & { ref: RefCallback<InputRef | null> };\n\n/**\n * Ant Design version of useHookFormMask.\n * Creates a masked register that works with Ant Design Input (ref receives InputRef).\n *\n * @template T - The form data type\n * @template D - The register options type\n * @param registerFn - The register function from useForm hook\n * @returns A function that registers a field with mask support for Ant Design Input\n */\nexport default function useHookFormMaskAntd<\n  T extends FieldValues, D extends RegisterOptions,\n>(registerFn: UseFormRegister<T>): ((fieldName: Path<T>, mask: Mask, options?: (\n  D & Options) | Options | D) => UseHookFormMaskAntdReturn<T>) {\n  //\n  return useMemo(() => {\n    const refCache = new Map<string, RefCallback<InputRef | null>>();\n\n    return (fieldName: Path<T>, mask: Mask, options?: (\n      D & Options) | Options | D): UseHookFormMaskAntdReturn<T> => {\n      if (!registerFn) throw new Error('registerFn is required');\n\n      const registerReturn = registerFn(fieldName, options as Options);\n      const { ref } = registerReturn as UseHookFormMaskReturn<T>;\n\n      const cacheKey = makeMaskCacheKey(fieldName, mask);\n\n      if (!refCache.has(cacheKey)) {\n        const refWithMask: RefCallback<InputRef | null> = (inputRef) => {\n          const element = inputRef ? resolveInputRef(inputRef.input) : null;\n          if (element) applyMaskToElement(element, mask, options as Options);\n          if (ref) ref(element);\n        };\n        refCache.set(cacheKey, refWithMask);\n      }\n\n      const result = {\n        ...registerReturn,\n        ref: refCache.get(cacheKey),\n      } as UseHookFormMaskAntdReturn<T>;\n\n      setPrevRef(result, ref);\n\n      return result;\n    };\n  }, [registerFn]);\n}\n","import { useCallback, useEffect, useRef } from 'react';\n\nimport withMask from '../api/withMask';\nimport { resolveInputRef } from '../core';\nimport isServer from '../utils/isServer';\nimport { getUnmaskedValue, setUnmaskedValue } from '../utils';\n\nimport type { InputRef } from 'antd';\n\nimport type { Mask, Options, UnmaskedValueApi } from '../types';\n\ntype UseMaskInputAntdReturn = ((input: InputRef | null) => void) & UnmaskedValueApi;\n\ninterface UseMaskInputOptions {\n  mask: Mask;\n  register?: (element: HTMLElement) => void;\n  options?: Options;\n}\n\n/**\n * React hook for applying input masks to Ant Design form elements.\n *\n * @param props - Configuration object\n * @param props.mask - The mask pattern to apply\n * @param props.register - Optional callback that receives the element\n * @param props.options - Optional mask configuration options\n * @returns A ref callback function to attach to the Ant Design Input element\n */\nexport default function useMaskInputAntd(props: UseMaskInputOptions): UseMaskInputAntdReturn {\n  const { mask, register, options } = props;\n  const ref = useRef<HTMLInputElement | null>(null);\n  const maskRef = useRef(mask);\n  const optionsRef = useRef(options);\n  const maskedElementRef = useRef<HTMLInputElement | null>(null);\n  const unmaskedValue = useCallback(() => getUnmaskedValue(ref.current), []);\n\n  maskRef.current = mask;\n  optionsRef.current = options;\n\n  const refCallback = useCallback((input: InputRef | null): void => {\n    if (!input) {\n      ref.current = null;\n      return;\n    }\n\n    ref.current = resolveInputRef(input.input);\n\n    if (ref.current && ref.current !== maskedElementRef.current) {\n      withMask(maskRef.current, optionsRef.current)(ref.current);\n      maskedElementRef.current = ref.current;\n    }\n  }, []);\n\n  useEffect(() => {\n    if (isServer || !ref.current || !register) return;\n    register(ref.current);\n  }, [register]);\n\n  if (isServer) {\n    const noop = (() => {\n      // server doesn't have dom, so just do nothing\n    }) as unknown as UseMaskInputAntdReturn;\n\n    return setUnmaskedValue(noop, () => '');\n  }\n\n  return setUnmaskedValue(refCallback as UseMaskInputAntdReturn, unmaskedValue);\n}\n"],"mappings":"qIA6BA,SAAwB,EAEtB,EAC6D,CAE7D,OAAA,EAAA,EAAA,QAAA,KAAqB,CACnB,IAAM,EAAW,IAAI,IAErB,OAAQ,EAAoB,EAAY,IACuB,CAC7D,GAAI,CAAC,EAAY,MAAU,MAAM,wBAAwB,EAEzD,IAAM,EAAiB,EAAW,EAAW,CAAkB,EACzD,CAAE,OAAQ,EAEV,EAAWA,EAAAA,EAAiB,EAAW,CAAI,EAE5C,EAAS,IAAI,CAAQ,GAMxB,EAAS,IAAI,EALsC,GAAa,CAC9D,IAAM,EAAU,EAAWC,EAAAA,EAAgB,EAAS,KAAK,EAAI,KACzD,GAAS,EAAA,EAAmB,EAAS,EAAM,CAAkB,EAC7D,GAAK,EAAI,CAAO,CACtB,CACkC,EAGpC,IAAM,EAAS,CACb,GAAG,EACH,IAAK,EAAS,IAAI,CAAQ,CAC5B,EAIA,OAFA,EAAA,EAAW,EAAQ,CAAG,EAEf,CACT,CACF,EAAG,CAAC,CAAU,CAAC,CACjB,CCrCA,SAAwB,EAAiB,EAAoD,CAC3F,GAAM,CAAE,OAAM,WAAU,WAAY,EAC9B,GAAA,EAAA,EAAA,OAAA,CAAsC,IAAI,EAC1C,GAAA,EAAA,EAAA,OAAA,CAAiB,CAAI,EACrB,GAAA,EAAA,EAAA,OAAA,CAAoB,CAAO,EAC3B,GAAA,EAAA,EAAA,OAAA,CAAmD,IAAI,EACvD,GAAA,EAAA,EAAA,YAAA,KAAkCC,EAAAA,EAAiB,EAAI,OAAO,EAAG,CAAC,CAAC,EAEzE,EAAQ,QAAU,EAClB,EAAW,QAAU,EAErB,IAAM,GAAA,EAAA,EAAA,YAAA,CAA2B,GAAiC,CAChE,GAAI,CAAC,EAAO,CACV,EAAI,QAAU,KACd,MACF,CAEA,EAAI,QAAUC,EAAAA,EAAgB,EAAM,KAAK,EAErC,EAAI,SAAW,EAAI,UAAY,EAAiB,UAClD,EAAA,EAAS,EAAQ,QAAS,EAAW,OAAO,CAAC,CAAC,EAAI,OAAO,EACzD,EAAiB,QAAU,EAAI,QAEnC,EAAG,CAAC,CAAC,EAeL,OAbA,EAAA,EAAA,UAAA,KAAgB,CACVC,EAAAA,GAAY,CAAC,EAAI,SAAW,CAAC,GACjC,EAAS,EAAI,OAAO,CACtB,EAAG,CAAC,CAAQ,CAAC,EAETA,EAAAA,EAKKC,EAAAA,OAJa,CAEpB,OAEoC,EAAE,EAGjCA,EAAAA,EAAiB,EAAuC,CAAa,CAC9E"}
+{"version":3,"file":"antd.cjs","names":["makeMaskCacheKey","resolveInputRef","getUnmaskedValue","resolveInputRef","isServer","setUnmaskedValue"],"sources":["../src/antd/useHookFormMaskAntd.ts","../src/antd/useMaskInputAntd.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { applyMaskToElement, resolveInputRef } from '../core';\nimport { makeMaskCacheKey, setPrevRef } from '../utils';\n\nimport type { InputRef } from 'antd';\nimport type { RefCallback } from 'react';\nimport type {\n  FieldValues, Path,\n  RegisterOptions,\n  UseFormRegister,\n} from 'react-hook-form';\n\nimport type { Mask, Options, UseHookFormMaskReturn } from '../types';\n\nexport type UseHookFormMaskAntdReturn<T extends FieldValues> = Omit<\n  UseHookFormMaskReturn<T>,\n  'ref'\n> & { ref: RefCallback<InputRef | null> };\n\n/**\n * Ant Design version of useHookFormMask.\n * Creates a masked register that works with Ant Design Input (ref receives InputRef).\n *\n * @template T - The form data type\n * @template D - The register options type\n * @param registerFn - The register function from useForm hook\n * @returns A function that registers a field with mask support for Ant Design Input\n */\nexport default function useHookFormMaskAntd<\n  T extends FieldValues, D extends RegisterOptions,\n>(registerFn: UseFormRegister<T>): ((fieldName: Path<T>, mask: Mask, options?: (\n  D & Options) | Options | D) => UseHookFormMaskAntdReturn<T>) {\n  //\n  return useMemo(() => {\n    const refCache = new Map<string, RefCallback<InputRef | null>>();\n\n    return (fieldName: Path<T>, mask: Mask, options?: (\n      D & Options) | Options | D): UseHookFormMaskAntdReturn<T> => {\n      if (!registerFn) throw new Error('registerFn is required');\n\n      const registerReturn = registerFn(fieldName, options as Options);\n      const { ref } = registerReturn as UseHookFormMaskReturn<T>;\n\n      const cacheKey = makeMaskCacheKey(fieldName, mask);\n\n      if (!refCache.has(cacheKey)) {\n        const refWithMask: RefCallback<InputRef | null> = (inputRef) => {\n          const element = inputRef ? resolveInputRef(inputRef.input) : null;\n          if (element) applyMaskToElement(element, mask, options as Options);\n          if (ref) ref(element);\n        };\n        refCache.set(cacheKey, refWithMask);\n      }\n\n      const result = {\n        ...registerReturn,\n        ref: refCache.get(cacheKey),\n      } as UseHookFormMaskAntdReturn<T>;\n\n      setPrevRef(result, ref);\n\n      return result;\n    };\n  }, [registerFn]);\n}\n","import { useCallback, useEffect, useRef } from 'react';\n\nimport withMask from '../api/withMask';\nimport { resolveInputRef } from '../core';\nimport isServer from '../utils/isServer';\nimport { getUnmaskedValue, setUnmaskedValue } from '../utils';\n\nimport type { InputRef } from 'antd';\n\nimport type { Mask, Options, UnmaskedValueApi } from '../types';\n\ntype UseMaskInputAntdReturn = ((input: InputRef | null) => void) & UnmaskedValueApi;\n\ninterface UseMaskInputOptions {\n  mask: Mask;\n  register?: (element: HTMLElement) => void;\n  options?: Options;\n}\n\n/**\n * React hook for applying input masks to Ant Design form elements.\n *\n * @param props - Configuration object\n * @param props.mask - The mask pattern to apply\n * @param props.register - Optional callback that receives the element\n * @param props.options - Optional mask configuration options\n * @returns A ref callback function to attach to the Ant Design Input element\n */\nexport default function useMaskInputAntd(props: UseMaskInputOptions): UseMaskInputAntdReturn {\n  const { mask, register, options } = props;\n  const ref = useRef<HTMLInputElement | null>(null);\n  const maskRef = useRef(mask);\n  const optionsRef = useRef(options);\n  const maskedElementRef = useRef<HTMLInputElement | null>(null);\n  const unmaskedValue = useCallback(() => getUnmaskedValue(ref.current), []);\n\n  maskRef.current = mask;\n  optionsRef.current = options;\n\n  const refCallback = useCallback((input: InputRef | null): void => {\n    if (!input) {\n      ref.current = null;\n      return;\n    }\n\n    ref.current = resolveInputRef(input.input);\n\n    if (ref.current && ref.current !== maskedElementRef.current) {\n      withMask(maskRef.current, optionsRef.current)(ref.current);\n      maskedElementRef.current = ref.current;\n    }\n  }, []);\n\n  useEffect(() => {\n    if (isServer || !ref.current || !register) return;\n    register(ref.current);\n  }, [register]);\n\n  if (isServer) {\n    const noop = (() => {\n      // server doesn't have dom, so just do nothing\n    }) as unknown as UseMaskInputAntdReturn;\n\n    return setUnmaskedValue(noop, () => '');\n  }\n\n  return setUnmaskedValue(refCallback as UseMaskInputAntdReturn, unmaskedValue);\n}\n"],"mappings":"sKA6BA,SAAwB,EAEtB,EAC6D,CAE7D,OAAA,EAAA,EAAA,QAAA,KAAqB,CACnB,IAAM,EAAW,IAAI,IAErB,OAAQ,EAAoB,EAAY,IACuB,CAC7D,GAAI,CAAC,EAAY,MAAU,MAAM,wBAAwB,EAEzD,IAAM,EAAiB,EAAW,EAAW,CAAkB,EACzD,CAAE,OAAQ,EAEV,EAAWA,EAAAA,EAAiB,EAAW,CAAI,EAE5C,EAAS,IAAI,CAAQ,GAMxB,EAAS,IAAI,EALsC,GAAa,CAC9D,IAAM,EAAU,EAAWC,EAAAA,EAAgB,EAAS,KAAK,EAAI,KACzD,GAAS,EAAA,EAAmB,EAAS,EAAM,CAAkB,EAC7D,GAAK,EAAI,CAAO,CACtB,CACkC,EAGpC,IAAM,EAAS,CACb,GAAG,EACH,IAAK,EAAS,IAAI,CAAQ,CAC5B,EAIA,OAFA,EAAA,EAAW,EAAQ,CAAG,EAEf,CACT,CACF,EAAG,CAAC,CAAU,CAAC,CACjB,CCrCA,SAAwB,EAAiB,EAAoD,CAC3F,GAAM,CAAE,OAAM,WAAU,WAAY,EAC9B,GAAA,EAAA,EAAA,OAAA,CAAsC,IAAI,EAC1C,GAAA,EAAA,EAAA,OAAA,CAAiB,CAAI,EACrB,GAAA,EAAA,EAAA,OAAA,CAAoB,CAAO,EAC3B,GAAA,EAAA,EAAA,OAAA,CAAmD,IAAI,EACvD,GAAA,EAAA,EAAA,YAAA,KAAkCC,EAAAA,EAAiB,EAAI,OAAO,EAAG,CAAC,CAAC,EAEzE,EAAQ,QAAU,EAClB,EAAW,QAAU,EAErB,IAAM,GAAA,EAAA,EAAA,YAAA,CAA2B,GAAiC,CAChE,GAAI,CAAC,EAAO,CACV,EAAI,QAAU,KACd,MACF,CAEA,EAAI,QAAUC,EAAAA,EAAgB,EAAM,KAAK,EAErC,EAAI,SAAW,EAAI,UAAY,EAAiB,UAClD,EAAA,EAAS,EAAQ,QAAS,EAAW,OAAO,CAAC,CAAC,EAAI,OAAO,EACzD,EAAiB,QAAU,EAAI,QAEnC,EAAG,CAAC,CAAC,EAeL,OAbA,EAAA,EAAA,UAAA,KAAgB,CACVC,EAAAA,GAAY,CAAC,EAAI,SAAW,CAAC,GACjC,EAAS,EAAI,OAAO,CACtB,EAAG,CAAC,CAAQ,CAAC,EAETA,EAAAA,EAKKC,EAAAA,OAJa,CAEpB,OAEoC,EAAE,EAGjCA,EAAAA,EAAiB,EAAuC,CAAa,CAC9E"}

package/dist/antd.d.cts

@@ -1,4 +1,4 @@
-import { a as UnmaskedValueApi, d as UseFormRegister, l as RegisterOptions, n as Mask, o as UseHookFormMaskReturn, p as Path, r as Options, u as FieldValues } from "./index-HfKPnOg0.cjs";
+import { c as UnmaskedValueApi, d as UseFormRegister, l as RegisterOptions, n as UseHookFormMaskReturn, o as Mask, p as Path, s as Options, u as FieldValues } from "./index-CqBLkcNO.cjs";
 import { InputRef } from "antd";
 import { RefCallback } from "react";
 //#region src/antd/useHookFormMaskAntd.d.ts

package/dist/antd.d.mts

@@ -1,4 +1,4 @@
-import { a as UnmaskedValueApi, d as UseFormRegister, l as RegisterOptions, n as Mask, o as UseHookFormMaskReturn, p as Path, r as Options, u as FieldValues } from "./index-HfKPnOg0.mjs";
+import { c as UnmaskedValueApi, d as UseFormRegister, l as RegisterOptions, n as UseHookFormMaskReturn, o as Mask, p as Path, s as Options, u as FieldValues } from "./index-CqBLkcNO.mjs";
 import { RefCallback } from "react";
 import { InputRef } from "antd";
 //#region src/antd/useHookFormMaskAntd.d.ts

package/dist/antd.mjs

@@ -1,2 +1,2 @@
-import{a as e,c as t,l as n,n as r,o as i,s as a,t as o,u as s}from"./withMask-DlC13MV7.mjs";import{useCallback as c,useEffect as l,useMemo as u,useRef as d}from"react";function f(e){return u(()=>{let t=new Map;return(n,o,c)=>{if(!e)throw Error(`registerFn is required`);let l=e(n,c),{ref:u}=l,d=i(n,o);t.has(d)||t.set(d,e=>{let t=e?s(e.input):null;t&&r(t,o,c),u&&u(t)});let f={...l,ref:t.get(d)};return a(f,u),f}},[e])}function p(r){let{mask:i,register:a,options:u}=r,f=d(null),p=d(i),m=d(u),h=d(null),g=c(()=>e(f.current),[]);p.current=i,m.current=u;let _=c(e=>{if(!e){f.current=null;return}f.current=s(e.input),f.current&&f.current!==h.current&&(o(p.current,m.current)(f.current),h.current=f.current)},[]);return l(()=>{n||!f.current||!a||a(f.current)},[a]),n?t((()=>{}),()=>``):t(_,g)}export{f as useHookFormMaskAntd,p as useMaskInputAntd};
+import{a as e,c as t,h as n,o as r,s as i,t as a,u as o}from"./core-CNGYEIpO.mjs";import{t as s}from"./withMask-DOmJHTJ4.mjs";import{useCallback as c,useEffect as l,useMemo as u,useRef as d}from"react";function f(e){return u(()=>{let t=new Map;return(o,s,c)=>{if(!e)throw Error(`registerFn is required`);let l=e(o,c),{ref:u}=l,d=r(o,s);t.has(d)||t.set(d,e=>{let t=e?n(e.input):null;t&&a(t,s,c),u&&u(t)});let f={...l,ref:t.get(d)};return i(f,u),f}},[e])}function p(r){let{mask:i,register:a,options:u}=r,f=d(null),p=d(i),m=d(u),h=d(null),g=c(()=>e(f.current),[]);p.current=i,m.current=u;let _=c(e=>{if(!e){f.current=null;return}f.current=n(e.input),f.current&&f.current!==h.current&&(s(p.current,m.current)(f.current),h.current=f.current)},[]);return l(()=>{o||!f.current||!a||a(f.current)},[a]),o?t((()=>{}),()=>``):t(_,g)}export{f as useHookFormMaskAntd,p as useMaskInputAntd};
 //# sourceMappingURL=antd.mjs.map

package/dist/antd.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"antd.mjs","names":[],"sources":["../src/antd/useHookFormMaskAntd.ts","../src/antd/useMaskInputAntd.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { applyMaskToElement, resolveInputRef } from '../core';\nimport { makeMaskCacheKey, setPrevRef } from '../utils';\n\nimport type { InputRef } from 'antd';\nimport type { RefCallback } from 'react';\nimport type {\n  FieldValues, Path,\n  RegisterOptions,\n  UseFormRegister,\n} from 'react-hook-form';\n\nimport type { Mask, Options, UseHookFormMaskReturn } from '../types';\n\nexport type UseHookFormMaskAntdReturn<T extends FieldValues> = Omit<\n  UseHookFormMaskReturn<T>,\n  'ref'\n> & { ref: RefCallback<InputRef | null> };\n\n/**\n * Ant Design version of useHookFormMask.\n * Creates a masked register that works with Ant Design Input (ref receives InputRef).\n *\n * @template T - The form data type\n * @template D - The register options type\n * @param registerFn - The register function from useForm hook\n * @returns A function that registers a field with mask support for Ant Design Input\n */\nexport default function useHookFormMaskAntd<\n  T extends FieldValues, D extends RegisterOptions,\n>(registerFn: UseFormRegister<T>): ((fieldName: Path<T>, mask: Mask, options?: (\n  D & Options) | Options | D) => UseHookFormMaskAntdReturn<T>) {\n  //\n  return useMemo(() => {\n    const refCache = new Map<string, RefCallback<InputRef | null>>();\n\n    return (fieldName: Path<T>, mask: Mask, options?: (\n      D & Options) | Options | D): UseHookFormMaskAntdReturn<T> => {\n      if (!registerFn) throw new Error('registerFn is required');\n\n      const registerReturn = registerFn(fieldName, options as Options);\n      const { ref } = registerReturn as UseHookFormMaskReturn<T>;\n\n      const cacheKey = makeMaskCacheKey(fieldName, mask);\n\n      if (!refCache.has(cacheKey)) {\n        const refWithMask: RefCallback<InputRef | null> = (inputRef) => {\n          const element = inputRef ? resolveInputRef(inputRef.input) : null;\n          if (element) applyMaskToElement(element, mask, options as Options);\n          if (ref) ref(element);\n        };\n        refCache.set(cacheKey, refWithMask);\n      }\n\n      const result = {\n        ...registerReturn,\n        ref: refCache.get(cacheKey),\n      } as UseHookFormMaskAntdReturn<T>;\n\n      setPrevRef(result, ref);\n\n      return result;\n    };\n  }, [registerFn]);\n}\n","import { useCallback, useEffect, useRef } from 'react';\n\nimport withMask from '../api/withMask';\nimport { resolveInputRef } from '../core';\nimport isServer from '../utils/isServer';\nimport { getUnmaskedValue, setUnmaskedValue } from '../utils';\n\nimport type { InputRef } from 'antd';\n\nimport type { Mask, Options, UnmaskedValueApi } from '../types';\n\ntype UseMaskInputAntdReturn = ((input: InputRef | null) => void) & UnmaskedValueApi;\n\ninterface UseMaskInputOptions {\n  mask: Mask;\n  register?: (element: HTMLElement) => void;\n  options?: Options;\n}\n\n/**\n * React hook for applying input masks to Ant Design form elements.\n *\n * @param props - Configuration object\n * @param props.mask - The mask pattern to apply\n * @param props.register - Optional callback that receives the element\n * @param props.options - Optional mask configuration options\n * @returns A ref callback function to attach to the Ant Design Input element\n */\nexport default function useMaskInputAntd(props: UseMaskInputOptions): UseMaskInputAntdReturn {\n  const { mask, register, options } = props;\n  const ref = useRef<HTMLInputElement | null>(null);\n  const maskRef = useRef(mask);\n  const optionsRef = useRef(options);\n  const maskedElementRef = useRef<HTMLInputElement | null>(null);\n  const unmaskedValue = useCallback(() => getUnmaskedValue(ref.current), []);\n\n  maskRef.current = mask;\n  optionsRef.current = options;\n\n  const refCallback = useCallback((input: InputRef | null): void => {\n    if (!input) {\n      ref.current = null;\n      return;\n    }\n\n    ref.current = resolveInputRef(input.input);\n\n    if (ref.current && ref.current !== maskedElementRef.current) {\n      withMask(maskRef.current, optionsRef.current)(ref.current);\n      maskedElementRef.current = ref.current;\n    }\n  }, []);\n\n  useEffect(() => {\n    if (isServer || !ref.current || !register) return;\n    register(ref.current);\n  }, [register]);\n\n  if (isServer) {\n    const noop = (() => {\n      // server doesn't have dom, so just do nothing\n    }) as unknown as UseMaskInputAntdReturn;\n\n    return setUnmaskedValue(noop, () => '');\n  }\n\n  return setUnmaskedValue(refCallback as UseMaskInputAntdReturn, unmaskedValue);\n}\n"],"mappings":"yKA6BA,SAAwB,EAEtB,EAC6D,CAE7D,OAAO,MAAc,CACnB,IAAM,EAAW,IAAI,IAErB,OAAQ,EAAoB,EAAY,IACuB,CAC7D,GAAI,CAAC,EAAY,MAAU,MAAM,wBAAwB,EAEzD,IAAM,EAAiB,EAAW,EAAW,CAAkB,EACzD,CAAE,OAAQ,EAEV,EAAW,EAAiB,EAAW,CAAI,EAE5C,EAAS,IAAI,CAAQ,GAMxB,EAAS,IAAI,EALsC,GAAa,CAC9D,IAAM,EAAU,EAAW,EAAgB,EAAS,KAAK,EAAI,KACzD,GAAS,EAAmB,EAAS,EAAM,CAAkB,EAC7D,GAAK,EAAI,CAAO,CACtB,CACkC,EAGpC,IAAM,EAAS,CACb,GAAG,EACH,IAAK,EAAS,IAAI,CAAQ,CAC5B,EAIA,OAFA,EAAW,EAAQ,CAAG,EAEf,CACT,CACF,EAAG,CAAC,CAAU,CAAC,CACjB,CCrCA,SAAwB,EAAiB,EAAoD,CAC3F,GAAM,CAAE,OAAM,WAAU,WAAY,EAC9B,EAAM,EAAgC,IAAI,EAC1C,EAAU,EAAO,CAAI,EACrB,EAAa,EAAO,CAAO,EAC3B,EAAmB,EAAgC,IAAI,EACvD,EAAgB,MAAkB,EAAiB,EAAI,OAAO,EAAG,CAAC,CAAC,EAEzE,EAAQ,QAAU,EAClB,EAAW,QAAU,EAErB,IAAM,EAAc,EAAa,GAAiC,CAChE,GAAI,CAAC,EAAO,CACV,EAAI,QAAU,KACd,MACF,CAEA,EAAI,QAAU,EAAgB,EAAM,KAAK,EAErC,EAAI,SAAW,EAAI,UAAY,EAAiB,UAClD,EAAS,EAAQ,QAAS,EAAW,OAAO,CAAC,CAAC,EAAI,OAAO,EACzD,EAAiB,QAAU,EAAI,QAEnC,EAAG,CAAC,CAAC,EAeL,OAbA,MAAgB,CACV,GAAY,CAAC,EAAI,SAAW,CAAC,GACjC,EAAS,EAAI,OAAO,CACtB,EAAG,CAAC,CAAQ,CAAC,EAET,EAKK,OAJa,CAEpB,OAEoC,EAAE,EAGjC,EAAiB,EAAuC,CAAa,CAC9E"}
+{"version":3,"file":"antd.mjs","names":[],"sources":["../src/antd/useHookFormMaskAntd.ts","../src/antd/useMaskInputAntd.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { applyMaskToElement, resolveInputRef } from '../core';\nimport { makeMaskCacheKey, setPrevRef } from '../utils';\n\nimport type { InputRef } from 'antd';\nimport type { RefCallback } from 'react';\nimport type {\n  FieldValues, Path,\n  RegisterOptions,\n  UseFormRegister,\n} from 'react-hook-form';\n\nimport type { Mask, Options, UseHookFormMaskReturn } from '../types';\n\nexport type UseHookFormMaskAntdReturn<T extends FieldValues> = Omit<\n  UseHookFormMaskReturn<T>,\n  'ref'\n> & { ref: RefCallback<InputRef | null> };\n\n/**\n * Ant Design version of useHookFormMask.\n * Creates a masked register that works with Ant Design Input (ref receives InputRef).\n *\n * @template T - The form data type\n * @template D - The register options type\n * @param registerFn - The register function from useForm hook\n * @returns A function that registers a field with mask support for Ant Design Input\n */\nexport default function useHookFormMaskAntd<\n  T extends FieldValues, D extends RegisterOptions,\n>(registerFn: UseFormRegister<T>): ((fieldName: Path<T>, mask: Mask, options?: (\n  D & Options) | Options | D) => UseHookFormMaskAntdReturn<T>) {\n  //\n  return useMemo(() => {\n    const refCache = new Map<string, RefCallback<InputRef | null>>();\n\n    return (fieldName: Path<T>, mask: Mask, options?: (\n      D & Options) | Options | D): UseHookFormMaskAntdReturn<T> => {\n      if (!registerFn) throw new Error('registerFn is required');\n\n      const registerReturn = registerFn(fieldName, options as Options);\n      const { ref } = registerReturn as UseHookFormMaskReturn<T>;\n\n      const cacheKey = makeMaskCacheKey(fieldName, mask);\n\n      if (!refCache.has(cacheKey)) {\n        const refWithMask: RefCallback<InputRef | null> = (inputRef) => {\n          const element = inputRef ? resolveInputRef(inputRef.input) : null;\n          if (element) applyMaskToElement(element, mask, options as Options);\n          if (ref) ref(element);\n        };\n        refCache.set(cacheKey, refWithMask);\n      }\n\n      const result = {\n        ...registerReturn,\n        ref: refCache.get(cacheKey),\n      } as UseHookFormMaskAntdReturn<T>;\n\n      setPrevRef(result, ref);\n\n      return result;\n    };\n  }, [registerFn]);\n}\n","import { useCallback, useEffect, useRef } from 'react';\n\nimport withMask from '../api/withMask';\nimport { resolveInputRef } from '../core';\nimport isServer from '../utils/isServer';\nimport { getUnmaskedValue, setUnmaskedValue } from '../utils';\n\nimport type { InputRef } from 'antd';\n\nimport type { Mask, Options, UnmaskedValueApi } from '../types';\n\ntype UseMaskInputAntdReturn = ((input: InputRef | null) => void) & UnmaskedValueApi;\n\ninterface UseMaskInputOptions {\n  mask: Mask;\n  register?: (element: HTMLElement) => void;\n  options?: Options;\n}\n\n/**\n * React hook for applying input masks to Ant Design form elements.\n *\n * @param props - Configuration object\n * @param props.mask - The mask pattern to apply\n * @param props.register - Optional callback that receives the element\n * @param props.options - Optional mask configuration options\n * @returns A ref callback function to attach to the Ant Design Input element\n */\nexport default function useMaskInputAntd(props: UseMaskInputOptions): UseMaskInputAntdReturn {\n  const { mask, register, options } = props;\n  const ref = useRef<HTMLInputElement | null>(null);\n  const maskRef = useRef(mask);\n  const optionsRef = useRef(options);\n  const maskedElementRef = useRef<HTMLInputElement | null>(null);\n  const unmaskedValue = useCallback(() => getUnmaskedValue(ref.current), []);\n\n  maskRef.current = mask;\n  optionsRef.current = options;\n\n  const refCallback = useCallback((input: InputRef | null): void => {\n    if (!input) {\n      ref.current = null;\n      return;\n    }\n\n    ref.current = resolveInputRef(input.input);\n\n    if (ref.current && ref.current !== maskedElementRef.current) {\n      withMask(maskRef.current, optionsRef.current)(ref.current);\n      maskedElementRef.current = ref.current;\n    }\n  }, []);\n\n  useEffect(() => {\n    if (isServer || !ref.current || !register) return;\n    register(ref.current);\n  }, [register]);\n\n  if (isServer) {\n    const noop = (() => {\n      // server doesn't have dom, so just do nothing\n    }) as unknown as UseMaskInputAntdReturn;\n\n    return setUnmaskedValue(noop, () => '');\n  }\n\n  return setUnmaskedValue(refCallback as UseMaskInputAntdReturn, unmaskedValue);\n}\n"],"mappings":"0MA6BA,SAAwB,EAEtB,EAC6D,CAE7D,OAAO,MAAc,CACnB,IAAM,EAAW,IAAI,IAErB,OAAQ,EAAoB,EAAY,IACuB,CAC7D,GAAI,CAAC,EAAY,MAAU,MAAM,wBAAwB,EAEzD,IAAM,EAAiB,EAAW,EAAW,CAAkB,EACzD,CAAE,OAAQ,EAEV,EAAW,EAAiB,EAAW,CAAI,EAE5C,EAAS,IAAI,CAAQ,GAMxB,EAAS,IAAI,EALsC,GAAa,CAC9D,IAAM,EAAU,EAAW,EAAgB,EAAS,KAAK,EAAI,KACzD,GAAS,EAAmB,EAAS,EAAM,CAAkB,EAC7D,GAAK,EAAI,CAAO,CACtB,CACkC,EAGpC,IAAM,EAAS,CACb,GAAG,EACH,IAAK,EAAS,IAAI,CAAQ,CAC5B,EAIA,OAFA,EAAW,EAAQ,CAAG,EAEf,CACT,CACF,EAAG,CAAC,CAAU,CAAC,CACjB,CCrCA,SAAwB,EAAiB,EAAoD,CAC3F,GAAM,CAAE,OAAM,WAAU,WAAY,EAC9B,EAAM,EAAgC,IAAI,EAC1C,EAAU,EAAO,CAAI,EACrB,EAAa,EAAO,CAAO,EAC3B,EAAmB,EAAgC,IAAI,EACvD,EAAgB,MAAkB,EAAiB,EAAI,OAAO,EAAG,CAAC,CAAC,EAEzE,EAAQ,QAAU,EAClB,EAAW,QAAU,EAErB,IAAM,EAAc,EAAa,GAAiC,CAChE,GAAI,CAAC,EAAO,CACV,EAAI,QAAU,KACd,MACF,CAEA,EAAI,QAAU,EAAgB,EAAM,KAAK,EAErC,EAAI,SAAW,EAAI,UAAY,EAAiB,UAClD,EAAS,EAAQ,QAAS,EAAW,OAAO,CAAC,CAAC,EAAI,OAAO,EACzD,EAAiB,QAAU,EAAI,QAEnC,EAAG,CAAC,CAAC,EAeL,OAbA,MAAgB,CACV,GAAY,CAAC,EAAI,SAAW,CAAC,GACjC,EAAS,EAAI,OAAO,CACtB,EAAG,CAAC,CAAQ,CAAC,EAET,EAKK,OAJa,CAEpB,OAEoC,EAAE,EAGjC,EAAiB,EAAuC,CAAa,CAC9E"}