mfk-mask-input 1.0.0

package/README.md

@@ -0,0 +1,283 @@
+# mfk-mask-input
+
+A lightweight and flexible vanilla React masked input component built with [IMask](https://imask.js.org/).
+
+## Features
+
+- 🎭 **Flexible Masking** - Supports various mask patterns (phone, credit card, date, custom)
+- 🪶 **Lightweight** - Vanilla React input, no UI framework dependencies
+- 📝 **TypeScript Support** - Full TypeScript support with type definitions
+- ⚡ **Minimal Dependencies** - Only React and IMask as peer dependencies
+- 🔧 **Customizable** - Extensive IMask options support
+- 🎯 **Developer Friendly** - Access both masked and unmasked values in onChange
+
+## Installation
+
+```bash
+npm install mfk-mask-input
+# or
+yarn add mfk-mask-input
+# or
+pnpm add mfk-mask-input
+# or
+bun add mfk-mask-input
+```
+
+### Peer Dependencies
+
+This package requires the following peer dependencies:
+
+```json
+{
+  "react": "^18.0.0 || ^19.0.0",
+  "react-dom": "^18.0.0 || ^19.0.0",
+  "imask": "^6.0.0 || ^7.0.0"
+}
+```
+
+## Quick Start
+
+```tsx
+import { InputMask } from "mfk-mask-input";
+
+function MyComponent() {
+  return (
+    <InputMask
+      mask="(000) 000-0000"
+      placeholder="Enter phone number"
+      onChange={(e) => {
+        console.log("Masked:", e.maskedValue); // "(555) 123-4567"
+        console.log("Unmasked:", e.unmaskedValue); // "5551234567"
+      }}
+    />
+  );
+}
+```
+
+## Usage Examples
+
+### Phone Number
+
+```tsx
+<InputMask mask="(000) 000-0000" placeholder="(555) 123-4567" />
+```
+
+### Credit Card
+
+```tsx
+<InputMask mask="0000 0000 0000 0000" placeholder="1234 5678 9012 3456" />
+```
+
+### Date
+
+```tsx
+<InputMask mask="00/00/0000" placeholder="DD/MM/YYYY" />
+```
+
+### Custom Patterns
+
+```tsx
+<InputMask
+  mask="AAA-000"
+  definitions={{
+    A: /[A-Z]/,
+    "0": /[0-9]/,
+  }}
+  placeholder="ABC-123"
+/>
+```
+
+### Multiple Masks (Dynamic)
+
+```tsx
+<InputMask
+  mask={[
+    { mask: "(000) 000-0000" },
+    { mask: "+0 (000) 000-0000" },
+    { mask: "+00 (000) 000-0000" },
+  ]}
+  placeholder="Phone number"
+/>
+```
+
+### Controlled Component
+
+```tsx
+import { useState } from "react";
+import { InputMask } from "mfk-mask-input";
+
+function ControlledExample() {
+  const [value, setValue] = useState("");
+
+  return (
+    <InputMask
+      mask="0000-0000-0000-0000"
+      value={value}
+      onChange={(e) => setValue(e.maskedValue)}
+    />
+  );
+}
+```
+
+### With Advanced IMask Options
+
+```tsx
+<InputMask
+  mask={Number}
+  maskOptions={{
+    scale: 2,
+    thousandsSeparator: ",",
+    radix: ".",
+    mapToRadix: ["."],
+    min: 0,
+    max: 999999,
+  }}
+  placeholder="0.00"
+/>
+```
+
+### With Custom Styling
+
+```tsx
+<InputMask
+  mask="(000) 000-0000"
+  className="my-input-class"
+  style={{ padding: "8px", border: "1px solid #ccc" }}
+/>
+```
+
+## API
+
+### Props
+
+All standard HTML input props are supported, plus the following:
+
+| Prop           | Type                             | Required | Description                                                                                              |
+| -------------- | -------------------------------- | -------- | -------------------------------------------------------------------------------------------------------- |
+| `mask`         | `MaskType`                       | Yes      | Mask pattern or configuration. Can be a string, RegExp, Date, Number, function, or array of mask objects |
+| `maskOptions`  | `InputMaskOptions`               | No       | Additional IMask configuration options                                                                   |
+| `definitions`  | `object`                         | No       | Custom character definitions (e.g., `{ 'A': /[A-Z]/ }`)                                                  |
+| `onChange`     | `(event: OnChangeEvent) => void` | No       | Change handler with extended event object                                                                |
+| `value`        | `string`                         | No       | Controlled component value                                                                               |
+| `defaultValue` | `string`                         | No       | Default value for uncontrolled usage                                                                     |
+
+### Types
+
+#### OnChangeEvent
+
+The extended onChange event includes:
+
+```tsx
+interface OnChangeEvent {
+  target: HTMLInputElement;
+  maskedValue: string; // Formatted value with mask
+  unmaskedValue: string; // Raw value without mask
+  // ... standard event properties
+}
+```
+
+#### MaskType
+
+```tsx
+type MaskType =
+  | string
+  | RegExp
+  | typeof Number
+  | typeof Date
+  | ((value: string) => string)
+  | Array<{ mask: string | RegExp /* other options */ }>;
+```
+
+## Advanced Usage
+
+### Custom Definitions
+
+Define custom placeholder characters:
+
+```tsx
+<InputMask
+  mask="00/00/0000"
+  definitions={{
+    "0": /[0-9]/, // Digit
+    A: /[A-Z]/, // Uppercase letter
+    a: /[a-z]/, // Lowercase letter
+    "*": /[A-Za-z0-9]/, // Alphanumeric
+  }}
+/>
+```
+
+### With Form Libraries
+
+#### React Hook Form
+
+```tsx
+import { useForm, Controller } from "react-hook-form";
+import { InputMask } from "mfk-mask-input";
+
+function FormExample() {
+  const { control } = useForm();
+
+  return (
+    <Controller
+      name="phone"
+      control={control}
+      render={({ field }) => (
+        <InputMask
+          mask="(000) 000-0000"
+          {...field}
+          onChange={(e) => field.onChange(e.maskedValue)}
+        />
+      )}
+    />
+  );
+}
+```
+
+#### Formik
+
+```tsx
+import { Formik, Field } from "formik";
+import { InputMask } from "mfk-mask-input";
+
+function FormikExample() {
+  return (
+    <Formik initialValues={{ phone: "" }}>
+      {({ setFieldValue }) => (
+        <Field name="phone">
+          {({ field }) => (
+            <InputMask
+              mask="(000) 000-0000"
+              value={field.value}
+              onChange={(e) => setFieldValue("phone", e.maskedValue)}
+            />
+          )}
+        </Field>
+      )}
+    </Formik>
+  );
+}
+```
+
+## IMask Documentation
+
+For complete IMask options and patterns, see the [official IMask documentation](https://imask.js.org/guide.html).
+
+## TypeScript
+
+This package includes TypeScript definitions. Import types as needed:
+
+```tsx
+import type {
+  MaskedInputProps,
+  OnChangeEvent,
+  InputMaskOptions,
+} from "mfk-mask-input";
+```
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react/jsx-runtime"),d=require("imask"),n=require("react"),E=n.forwardRef(function(y,a){const{mask:l,maskOptions:c,value:s,defaultValue:M,definitions:f,onChange:k,...I}=y,p=n.useRef(null),e=n.useRef(null),r=(typeof s=="string"?s:M)||"",[V,i]=n.useState(r),o=n.useMemo(()=>({mask:l,lazy:!0,definitions:{0:/[0-9]/,...c?.definitions,...f},...c}),[l,c,f]),m=n.useCallback(()=>{const t=p.current;if(!t)return;if(e.current){e.current.updateOptions(o);return}const u=d(t,o);e.current=u,u.on("accept",()=>{const v=u.value,h=u.unmaskedValue;i(v),k?.({target:t,maskedValue:v,unmaskedValue:h})}),r&&(u.value=r,t.value=u.value,i(u.value))},[o,k,r]);n.useEffect(()=>(m(),()=>{e.current?.destroy(),e.current=null}),[m]),n.useEffect(()=>{e.current&&s!==void 0&&e.current.value!==s&&(e.current.value=s,i(e.current.value))},[s]);const g=t=>{p.current=t,a&&(typeof a=="function"?a(t):a.current=t)};return O.jsx("input",{...I,ref:g,value:V,onChange:()=>{}})});exports.IMask=d;exports.InputMask=E;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/InputMask.tsx"],"sourcesContent":["import IMask from 'imask';\r\nimport { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\r\nimport type { IMaskOptions, MaskedInputProps, OnChangeEvent } from './types';\r\n\r\n/**\r\n * InputMask - A vanilla masked input component\r\n * \r\n * @example\r\n * ```tsx\r\n * <InputMask\r\n *   mask=\"(000) 000-0000\"\r\n *   placeholder=\"Phone number\"\r\n *   onChange={(e) => console.log(e.maskedValue, e.unmaskedValue)}\r\n * />\r\n * ```\r\n */\r\nconst InputMask = forwardRef<HTMLInputElement, MaskedInputProps>(function MaskedInput(props, forwardedRef) {\r\n  const {\r\n    mask,\r\n    maskOptions: _maskOptions,\r\n    value: controlledValue,\r\n    defaultValue,\r\n    definitions,\r\n    onChange,\r\n    ...defaultInputProps\r\n  } = props;\r\n\r\n  const inputRef = useRef<HTMLInputElement | null>(null);\r\n  const maskRef = useRef<ReturnType<typeof IMask> | null>(null);\r\n\r\n  const initialValue = (typeof controlledValue === 'string' ? controlledValue : defaultValue) || '';\r\n  const [value, setValue] = useState(initialValue);\r\n\r\n  const maskOptions = useMemo(() => {\r\n    return {\r\n      mask,\r\n      lazy: true,\r\n      definitions: {\r\n        0: /[0-9]/,\r\n        ..._maskOptions?.definitions,\r\n        ...definitions,\r\n      },\r\n      ..._maskOptions,\r\n    } as IMaskOptions;\r\n  }, [mask, _maskOptions, definitions]);\r\n\r\n  const initMask = useCallback(() => {\r\n    const el = inputRef.current;\r\n    if (!el) return;\r\n\r\n    if (maskRef.current) {\r\n      maskRef.current.updateOptions(maskOptions as any);\r\n      return;\r\n    }\r\n\r\n    const maskInstance = IMask(el, maskOptions as any);\r\n    maskRef.current = maskInstance;\r\n\r\n    maskInstance.on('accept', () => {\r\n      const masked = maskInstance.value;\r\n      const unmasked = maskInstance.unmaskedValue;\r\n      setValue(masked);\r\n\r\n      const syntheticEvent = {\r\n        target: el,\r\n        maskedValue: masked,\r\n        unmaskedValue: unmasked,\r\n      } as OnChangeEvent;\r\n      onChange?.(syntheticEvent);\r\n    });\r\n\r\n    if (initialValue) {\r\n      maskInstance.value = initialValue;\r\n      el.value = maskInstance.value;\r\n      setValue(maskInstance.value);\r\n    }\r\n  }, [maskOptions, onChange, initialValue]);\r\n\r\n  useEffect(() => {\r\n    initMask();\r\n    return () => {\r\n      maskRef.current?.destroy();\r\n      maskRef.current = null;\r\n    };\r\n  }, [initMask]);\r\n\r\n  useEffect(() => {\r\n    if (maskRef.current && controlledValue !== undefined) {\r\n      if (maskRef.current.value !== controlledValue) {\r\n        maskRef.current.value = controlledValue;\r\n        setValue(maskRef.current.value);\r\n      }\r\n    }\r\n  }, [controlledValue]);\r\n\r\n  const handleRef = (ref: HTMLInputElement | null) => {\r\n    inputRef.current = ref;\r\n    if (forwardedRef) {\r\n      if (typeof forwardedRef === 'function') forwardedRef(ref);\r\n      else forwardedRef.current = ref;\r\n    }\r\n  };\r\n\r\n  return <input {...defaultInputProps} ref={handleRef} value={value} onChange={() => {}} />;\r\n});\r\n\r\nexport default InputMask;\r\n"],"names":["InputMask","forwardRef","props","forwardedRef","mask","_maskOptions","controlledValue","defaultValue","definitions","onChange","defaultInputProps","inputRef","useRef","maskRef","initialValue","value","setValue","useState","maskOptions","useMemo","initMask","useCallback","el","maskInstance","IMask","masked","unmasked","useEffect","handleRef","ref","jsx"],"mappings":"2JAgBMA,EAAYC,EAAAA,WAA+C,SAAqBC,EAAOC,EAAc,CACzG,KAAM,CACJ,KAAAC,EACA,YAAaC,EACb,MAAOC,EACP,aAAAC,EACA,YAAAC,EACA,SAAAC,EACA,GAAGC,CAAA,EACDR,EAEES,EAAWC,EAAAA,OAAgC,IAAI,EAC/CC,EAAUD,EAAAA,OAAwC,IAAI,EAEtDE,GAAgB,OAAOR,GAAoB,SAAWA,EAAkBC,IAAiB,GACzF,CAACQ,EAAOC,CAAQ,EAAIC,EAAAA,SAASH,CAAY,EAEzCI,EAAcC,EAAAA,QAAQ,KACnB,CACL,KAAAf,EACA,KAAM,GACN,YAAa,CACX,EAAG,QACH,GAAGC,GAAc,YACjB,GAAGG,CAAA,EAEL,GAAGH,CAAA,GAEJ,CAACD,EAAMC,EAAcG,CAAW,CAAC,EAE9BY,EAAWC,EAAAA,YAAY,IAAM,CACjC,MAAMC,EAAKX,EAAS,QACpB,GAAI,CAACW,EAAI,OAET,GAAIT,EAAQ,QAAS,CACnBA,EAAQ,QAAQ,cAAcK,CAAkB,EAChD,MACF,CAEA,MAAMK,EAAeC,EAAMF,EAAIJ,CAAkB,EACjDL,EAAQ,QAAUU,EAElBA,EAAa,GAAG,SAAU,IAAM,CAC9B,MAAME,EAASF,EAAa,MACtBG,EAAWH,EAAa,cAC9BP,EAASS,CAAM,EAOfhB,IALuB,CACrB,OAAQa,EACR,YAAaG,EACb,cAAeC,CAAA,CAEQ,CAC3B,CAAC,EAEGZ,IACFS,EAAa,MAAQT,EACrBQ,EAAG,MAAQC,EAAa,MACxBP,EAASO,EAAa,KAAK,EAE/B,EAAG,CAACL,EAAaT,EAAUK,CAAY,CAAC,EAExCa,EAAAA,UAAU,KACRP,EAAA,EACO,IAAM,CACXP,EAAQ,SAAS,QAAA,EACjBA,EAAQ,QAAU,IACpB,GACC,CAACO,CAAQ,CAAC,EAEbO,EAAAA,UAAU,IAAM,CACVd,EAAQ,SAAWP,IAAoB,QACrCO,EAAQ,QAAQ,QAAUP,IAC5BO,EAAQ,QAAQ,MAAQP,EACxBU,EAASH,EAAQ,QAAQ,KAAK,EAGpC,EAAG,CAACP,CAAe,CAAC,EAEpB,MAAMsB,EAAaC,GAAiC,CAClDlB,EAAS,QAAUkB,EACf1B,IACE,OAAOA,GAAiB,WAAYA,EAAa0B,CAAG,IACtC,QAAUA,EAEhC,EAEA,OAAOC,EAAAA,IAAC,SAAO,GAAGpB,EAAmB,IAAKkB,EAAW,MAAAb,EAAc,SAAU,IAAM,CAAC,EAAG,CACzF,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,80 @@
+import { ForwardRefExoticComponent } from 'react';
+import { default as IMask } from 'imask';
+import { RefAttributes } from 'react';
+
+declare type GeneralInputProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+export { IMask }
+
+/**
+ * IMask options with mask field
+ */
+export declare interface IMaskOptions extends Omit<InputMaskOptions, 'mask'> {
+    mask: MaskFieldType;
+}
+
+declare type IMaskOptionsBase = any;
+
+/**
+ * InputMask - A vanilla masked input component
+ *
+ * @example
+ * ```tsx
+ * <InputMask
+ *   mask="(000) 000-0000"
+ *   placeholder="Phone number"
+ *   onChange={(e) => console.log(e.maskedValue, e.unmaskedValue)}
+ * />
+ * ```
+ */
+export declare const InputMask: ForwardRefExoticComponent<MaskedInputProps & RefAttributes<HTMLInputElement>>;
+
+/**
+ * IMask options configuration
+ */
+export declare type InputMaskOptions = {
+    [K in keyof IMaskOptionsBase]?: IMaskOptionsBase[K];
+};
+
+declare type InputOnChangeParam = Parameters<Exclude<React.InputHTMLAttributes<HTMLInputElement>['onChange'], undefined>>[0];
+
+/**
+ * Props for the InputMask component
+ */
+export declare interface MaskedInputProps extends Omit<GeneralInputProps, 'onChange' | 'value' | 'defaultValue'> {
+    /** Mask pattern or configuration */
+    mask: MaskType;
+    /** Custom character definitions for the mask */
+    definitions?: InputMaskOptions['definitions'];
+    /** Controlled value */
+    value?: string;
+    /** Default value for uncontrolled usage */
+    defaultValue?: string;
+    /** Additional IMask options */
+    maskOptions?: InputMaskOptions;
+    /** Change handler with masked and unmasked values */
+    onChange?: (event: OnChangeEvent) => void;
+}
+
+declare type MaskFieldType = string | RegExp | ((...args: never) => unknown) | Date | InputMaskOptions;
+
+declare type MaskOptionsList = Array<IMaskOptions>;
+
+/**
+ * Supported mask types
+ */
+export declare type MaskType = MaskFieldType | MaskOptionsList;
+
+/**
+ * Extended onChange event with masked and unmasked values
+ */
+export declare interface OnChangeEvent extends OnChangeParam {
+    /** The formatted value with mask applied */
+    maskedValue: string;
+    /** The raw value without mask */
+    unmaskedValue: string;
+}
+
+declare type OnChangeParam = InputOnChangeParam;
+
+export { }

package/dist/index.js

@@ -0,0 +1,53 @@
+import { jsx as g } from "react/jsx-runtime";
+import O from "imask";
+import { default as D } from "imask";
+import { forwardRef as x, useRef as d, useState as C, useMemo as E, useCallback as R, useEffect as v } from "react";
+const q = x(function(V, s) {
+  const {
+    mask: i,
+    maskOptions: r,
+    value: u,
+    defaultValue: h,
+    definitions: l,
+    onChange: f,
+    ...y
+  } = V, m = d(null), e = d(null), a = (typeof u == "string" ? u : h) || "", [I, o] = C(a), c = E(() => ({
+    mask: i,
+    lazy: !0,
+    definitions: {
+      0: /[0-9]/,
+      ...r?.definitions,
+      ...l
+    },
+    ...r
+  }), [i, r, l]), p = R(() => {
+    const t = m.current;
+    if (!t) return;
+    if (e.current) {
+      e.current.updateOptions(c);
+      return;
+    }
+    const n = O(t, c);
+    e.current = n, n.on("accept", () => {
+      const k = n.value, M = n.unmaskedValue;
+      o(k), f?.({
+        target: t,
+        maskedValue: k,
+        unmaskedValue: M
+      });
+    }), a && (n.value = a, t.value = n.value, o(n.value));
+  }, [c, f, a]);
+  return v(() => (p(), () => {
+    e.current?.destroy(), e.current = null;
+  }), [p]), v(() => {
+    e.current && u !== void 0 && e.current.value !== u && (e.current.value = u, o(e.current.value));
+  }, [u]), /* @__PURE__ */ g("input", { ...y, ref: (t) => {
+    m.current = t, s && (typeof s == "function" ? s(t) : s.current = t);
+  }, value: I, onChange: () => {
+  } });
+});
+export {
+  D as IMask,
+  q as InputMask
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/InputMask.tsx"],"sourcesContent":["import IMask from 'imask';\r\nimport { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\r\nimport type { IMaskOptions, MaskedInputProps, OnChangeEvent } from './types';\r\n\r\n/**\r\n * InputMask - A vanilla masked input component\r\n * \r\n * @example\r\n * ```tsx\r\n * <InputMask\r\n *   mask=\"(000) 000-0000\"\r\n *   placeholder=\"Phone number\"\r\n *   onChange={(e) => console.log(e.maskedValue, e.unmaskedValue)}\r\n * />\r\n * ```\r\n */\r\nconst InputMask = forwardRef<HTMLInputElement, MaskedInputProps>(function MaskedInput(props, forwardedRef) {\r\n  const {\r\n    mask,\r\n    maskOptions: _maskOptions,\r\n    value: controlledValue,\r\n    defaultValue,\r\n    definitions,\r\n    onChange,\r\n    ...defaultInputProps\r\n  } = props;\r\n\r\n  const inputRef = useRef<HTMLInputElement | null>(null);\r\n  const maskRef = useRef<ReturnType<typeof IMask> | null>(null);\r\n\r\n  const initialValue = (typeof controlledValue === 'string' ? controlledValue : defaultValue) || '';\r\n  const [value, setValue] = useState(initialValue);\r\n\r\n  const maskOptions = useMemo(() => {\r\n    return {\r\n      mask,\r\n      lazy: true,\r\n      definitions: {\r\n        0: /[0-9]/,\r\n        ..._maskOptions?.definitions,\r\n        ...definitions,\r\n      },\r\n      ..._maskOptions,\r\n    } as IMaskOptions;\r\n  }, [mask, _maskOptions, definitions]);\r\n\r\n  const initMask = useCallback(() => {\r\n    const el = inputRef.current;\r\n    if (!el) return;\r\n\r\n    if (maskRef.current) {\r\n      maskRef.current.updateOptions(maskOptions as any);\r\n      return;\r\n    }\r\n\r\n    const maskInstance = IMask(el, maskOptions as any);\r\n    maskRef.current = maskInstance;\r\n\r\n    maskInstance.on('accept', () => {\r\n      const masked = maskInstance.value;\r\n      const unmasked = maskInstance.unmaskedValue;\r\n      setValue(masked);\r\n\r\n      const syntheticEvent = {\r\n        target: el,\r\n        maskedValue: masked,\r\n        unmaskedValue: unmasked,\r\n      } as OnChangeEvent;\r\n      onChange?.(syntheticEvent);\r\n    });\r\n\r\n    if (initialValue) {\r\n      maskInstance.value = initialValue;\r\n      el.value = maskInstance.value;\r\n      setValue(maskInstance.value);\r\n    }\r\n  }, [maskOptions, onChange, initialValue]);\r\n\r\n  useEffect(() => {\r\n    initMask();\r\n    return () => {\r\n      maskRef.current?.destroy();\r\n      maskRef.current = null;\r\n    };\r\n  }, [initMask]);\r\n\r\n  useEffect(() => {\r\n    if (maskRef.current && controlledValue !== undefined) {\r\n      if (maskRef.current.value !== controlledValue) {\r\n        maskRef.current.value = controlledValue;\r\n        setValue(maskRef.current.value);\r\n      }\r\n    }\r\n  }, [controlledValue]);\r\n\r\n  const handleRef = (ref: HTMLInputElement | null) => {\r\n    inputRef.current = ref;\r\n    if (forwardedRef) {\r\n      if (typeof forwardedRef === 'function') forwardedRef(ref);\r\n      else forwardedRef.current = ref;\r\n    }\r\n  };\r\n\r\n  return <input {...defaultInputProps} ref={handleRef} value={value} onChange={() => {}} />;\r\n});\r\n\r\nexport default InputMask;\r\n"],"names":["InputMask","forwardRef","props","forwardedRef","mask","_maskOptions","controlledValue","defaultValue","definitions","onChange","defaultInputProps","inputRef","useRef","maskRef","initialValue","value","setValue","useState","maskOptions","useMemo","initMask","useCallback","el","maskInstance","IMask","masked","unmasked","useEffect","jsx","ref"],"mappings":";;;;AAgBA,MAAMA,IAAYC,EAA+C,SAAqBC,GAAOC,GAAc;AACzG,QAAM;AAAA,IACJ,MAAAC;AAAA,IACA,aAAaC;AAAA,IACb,OAAOC;AAAA,IACP,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDR,GAEES,IAAWC,EAAgC,IAAI,GAC/CC,IAAUD,EAAwC,IAAI,GAEtDE,KAAgB,OAAOR,KAAoB,WAAWA,IAAkBC,MAAiB,IACzF,CAACQ,GAAOC,CAAQ,IAAIC,EAASH,CAAY,GAEzCI,IAAcC,EAAQ,OACnB;AAAA,IACL,MAAAf;AAAA,IACA,MAAM;AAAA,IACN,aAAa;AAAA,MACX,GAAG;AAAA,MACH,GAAGC,GAAc;AAAA,MACjB,GAAGG;AAAA,IAAA;AAAA,IAEL,GAAGH;AAAA,EAAA,IAEJ,CAACD,GAAMC,GAAcG,CAAW,CAAC,GAE9BY,IAAWC,EAAY,MAAM;AACjC,UAAMC,IAAKX,EAAS;AACpB,QAAI,CAACW,EAAI;AAET,QAAIT,EAAQ,SAAS;AACnB,MAAAA,EAAQ,QAAQ,cAAcK,CAAkB;AAChD;AAAA,IACF;AAEA,UAAMK,IAAeC,EAAMF,GAAIJ,CAAkB;AACjD,IAAAL,EAAQ,UAAUU,GAElBA,EAAa,GAAG,UAAU,MAAM;AAC9B,YAAME,IAASF,EAAa,OACtBG,IAAWH,EAAa;AAC9B,MAAAP,EAASS,CAAM,GAOfhB,IALuB;AAAA,QACrB,QAAQa;AAAA,QACR,aAAaG;AAAA,QACb,eAAeC;AAAA,MAAA,CAEQ;AAAA,IAC3B,CAAC,GAEGZ,MACFS,EAAa,QAAQT,GACrBQ,EAAG,QAAQC,EAAa,OACxBP,EAASO,EAAa,KAAK;AAAA,EAE/B,GAAG,CAACL,GAAaT,GAAUK,CAAY,CAAC;AAExC,SAAAa,EAAU,OACRP,EAAA,GACO,MAAM;AACX,IAAAP,EAAQ,SAAS,QAAA,GACjBA,EAAQ,UAAU;AAAA,EACpB,IACC,CAACO,CAAQ,CAAC,GAEbO,EAAU,MAAM;AACd,IAAId,EAAQ,WAAWP,MAAoB,UACrCO,EAAQ,QAAQ,UAAUP,MAC5BO,EAAQ,QAAQ,QAAQP,GACxBU,EAASH,EAAQ,QAAQ,KAAK;AAAA,EAGpC,GAAG,CAACP,CAAe,CAAC,GAUb,gBAAAsB,EAAC,WAAO,GAAGlB,GAAmB,KARnB,CAACmB,MAAiC;AAClD,IAAAlB,EAAS,UAAUkB,GACf1B,MACE,OAAOA,KAAiB,aAAYA,EAAa0B,CAAG,MACtC,UAAUA;AAAA,EAEhC,GAEqD,OAAAd,GAAc,UAAU,MAAM;AAAA,EAAC,GAAG;AACzF,CAAC;"}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "mfk-mask-input",
+  "version": "1.0.0",
+  "description": "A vanilla React masked input component using IMask",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc && vite build",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "input",
+    "mask",
+    "masked-input",
+    "imask",
+    "form",
+    "component"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "peerDependencies": {
+    "imask": "^6.0.0 || ^7.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.1.0",
+    "typescript": "~5.9.3",
+    "vite": "^7.2.2",
+    "vite-plugin-dts": "^4.3.0"
+  }
+}