### Install @maskito/core and @maskito/react

Source: https://github.com/taiga-family/maskito/blob/main/projects/react/README.md

Use npm to install the core Maskito library along with the React integration package. This is the initial setup step for using Maskito in a React project.

```bash
npm i @maskito/{core,react}
```

--------------------------------

### Install @maskito/core and @maskito/vue

Source: https://github.com/taiga-family/maskito/blob/main/projects/vue/README.md

Install the core Maskito library along with the Vue-specific package using npm. This is the initial setup step for using Maskito directives in your Vue project.

```bash
npm i @maskito/{core,vue}
```

--------------------------------

### Install @maskito/core and @maskito/kit

Source: https://github.com/taiga-family/maskito/blob/main/projects/kit/README.md

Install the core Maskito library along with the kit package, which contains pre-built masks. This command installs both packages using npm.

```bash
npm i @maskito/{core,kit}
```

--------------------------------

### Install Maskito for React

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/frameworks/react/react-doc.template.html

Install the necessary Maskito libraries for React integration. This is the first step before using Maskito in your React application.

```bash
npm install @maskito/core @maskito/react
```

--------------------------------

### Install @maskito/core

Source: https://github.com/taiga-family/maskito/blob/main/projects/core/README.md

Install the core Maskito package using npm. This package is framework-agnostic and can be used standalone.

```bash
npm i @maskito/core
```

--------------------------------

### Install @maskito/phone Package

Source: https://github.com/taiga-family/maskito/blob/main/projects/phone/README.md

Install the @maskito/core and @maskito/phone packages using npm. These are required for phone masking functionality.

```bash
npm i @maskito/{core,phone}
```

--------------------------------

### Install @maskito/angular

Source: https://github.com/taiga-family/maskito/blob/main/projects/angular/README.md

Installs the core Maskito library along with the Angular-specific package. Use this command to add Maskito to your Angular project.

```bash
npm i @maskito/{core,angular}
```

--------------------------------

### Custom Element Predicate for Maskito

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/frameworks/react/react-doc.template.html

Shows how to provide a custom `elementPredicate` function to `useMaskito` when the input element is not directly accessible, for example, when using UI kit components.

```tsx
import React from 'react';
import { useMaskito } from '@maskito/react';
import { createNumberMask } from 'maskito';

function MyComponent() {
  const maskito = useMaskito(createNumberMask(), {
    elementPredicate: (host) => host.querySelector('.my-custom-input'),
  });

  return (
    <div ref={maskito}>
      {/* ... other elements ... */}
      <input className="my-custom-input" />
      {/* ... other elements ... */}
    </div>
  );
}
```

--------------------------------

### Vue Basic Usage with Number Mask

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/frameworks/vue/examples/use-maskito-basic-usage.md

Integrates Maskito into a Vue.js application to format an input field as a number with a custom thousand separator. Ensure `@maskito/vue` and `@maskito/kit` are installed.

```typescript
import {createApp} from 'vue';
import {maskitoNumber} from '@maskito/kit';
import {maskito} from '@maskito/vue';

createApp({
  template: '<input v-model="value" v-maskito="options" />',
  directives: {maskito},
  data: () => ({
    value: '123_456',
    options: maskitoNumber({
      thousandSeparator: '_',
    }),
  }),
}).mount('#vue');
```

--------------------------------

### Handle Leading Zeros in Number Input

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/documentation/processors/examples/postprocessor-in-action.md

This postprocessor prevents multiple leading zeros, ensuring the input starts with a single '0' if necessary. It adjusts the cursor position accordingly.

```typescript
import {
	Maskito
} from '@maskito/core';

const numberInput = new Maskito(element, {
	mask: /^\d+(,\d*)?$/,
	postprocessors: [
		({value, selection}, initialElementState) => {
			const [from, to] = selection;
			const noRepeatedLeadingZeroesValue = value.replace(/^0+/, '0');
			const removedCharacters = value.length - noRepeatedLeadingZeroesValue.length;

			return {
				value: noRepeatedLeadingZeroesValue, // User types "000000" => 0|
				selection: [Math.max(from - removedCharacters, 0), Math.max(to - removedCharacters, 0)],
			};
		},
	],
});
```

--------------------------------

### Pattern Mask for HH:MM Time Format

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/documentation/mask-expression/mask-expression.template.html

Define a fixed-size time format using a pattern array. Fixed characters like ':' are automatically managed and cannot be erased. This example ensures only digits are accepted and limits the input length.

```typescript
mask: ['H', 'H', ':', 'M', 'M']
```

--------------------------------

### Incorrect Usage of maskitoParseNumber

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/kit/number/helpers/parse-number-invalid-usage.md

Shows examples of how maskitoParseNumber might produce unexpected results when parsing strings that do not conform to expected number formats, especially with prefixes.

```typescript
maskitoParseNumber('-42'); // -42 ✅
maskitoParseNumber('> -42'); // 42 ❌
maskitoParseNumber('> -42', {prefix: '> '}); // -42 ✅
```

--------------------------------

### Vue Custom Nested Input with Maskito

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/frameworks/vue/examples/query-nested-input.md

Applies Maskito number masking to a nested input element within a custom Vue component. Ensure `@maskito/vue` and `@maskito/kit` are installed. The `elementPredicate` option is crucial for targeting the correct input.

```typescript
import {createApp} from 'vue';
import {maskitoNumber} from '@maskito/kit';
import {maskito} from '@maskito/vue';

createApp({
  template: '<CustomInput v-model="value" v-maskito="options" />',
  directives: {maskito},
  data: () => ({
    value: '123456',
    options: {
      ...maskitoNumber(),
      elementPredicate: (host) => host.querySelector('input')!,
    },
  }),
}).mount('#vue');
```

--------------------------------

### ElementState Interface Definition

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/documentation/element-state/examples/element-state-demo.md

Defines the structure for the value and selection range of a masked input or textarea. The 'value' property holds the masked string, and 'selection' is a tuple representing the start and end indices of the selected text.

```typescript
interface ElementState {
  // the value of a masked <input> or <textarea>
  readonly value: string;
  readonly selection: readonly [
    // The 0-based index of the first selected character
    from: number,
    // Index of the character after the last selected character
    to: number,
  ];
}
```

--------------------------------

### Initialize Maskito with Custom Options

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/documentation/core-concepts-overview/examples/maskito-public-api-demo.md

Demonstrates initializing Maskito with various configuration options including a regex mask, custom preprocessors and postprocessors, plugins, and an overwrite mode. Call `destroy()` when the element is removed.

```typescript
import {Maskito, maskitoInitialCalibrationPlugin} from '@maskito/core';

const maskedInput = new Maskito(element, {
  mask: /^\d+$/,
  preprocessors: [preprocessor1, preprocessor2],
  postprocessors: [
    ({value, selection}) => {
      // ...
    },
  ],
  plugins: [myCustomPlugin, maskitoInitialCalibrationPlugin()],
  overwriteMode: 'shift',
});

// Call it when the element is destroyed
maskedInput.destroy();
```

--------------------------------

### Initialize Maskito with Basic Options

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/stackblitz/files/starter.ts.md

Use this snippet to initialize Maskito on an input or textarea element. It requires importing Maskito and defining the desired mask options. The `destroy` method is available for cleanup.

```typescript
import './styles.css';

import type {MaskitoElement, MaskitoOptions} from '@maskito/core';
import {Maskito} from '@maskito/core';

const options: MaskitoOptions = {
  mask: /^\d+$/,
};

const element: MaskitoElement = document.querySelector('input,textarea')!;
const mask = new Maskito(element, options);

console.info('Call this function when the element is detached from DOM', mask.destroy);
```

--------------------------------

### React Maskito Best Practice

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/frameworks/react/examples/best-bad-practice.md

Use the `useMaskito` hook with predefined options and a clear element predicate for optimal performance and maintainability.

```typescript
// Best Practice ✅
useMaskito({
  options: maskitoOptions,
  elementPredicate: predicate,
});
```

```typescript
// Anti-Pattern ❌
useMaskito({
  options: {mask: /^.*$/},
  elementPredicate: () => e.querySelector('input#my-input'),
});
```

--------------------------------

### Initialize Maskito Core

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/stackblitz/files/example.ts.md

Import Maskito and apply it to an input or textarea element using predefined options. Call `mask.destroy` when the element is detached from the DOM.

```typescript
import './styles.css';

import type {MaskitoElement} from '@maskito/core';
import {Maskito} from '@maskito/core';
import options from './mask';

const element: MaskitoElement = document.querySelector('input,textarea')!;
const mask = new Maskito(element, options);

console.info('Call this function when the element is detached from DOM', mask.destroy);
```

--------------------------------

### Passing Named Variables to Maskito

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/frameworks/react/react-doc.template.html

Illustrates the best practice of passing named variables to Maskito configurations to prevent unnecessary hook re-runs and Maskito instance recreation.

```tsx
import React from 'react';
import { useMaskito } from '@maskito/react';
import { createNumberMask } from 'maskito';

const numberMaskOptions = {
  decimalSeparator: '.',
  thousandsSeparator: ',',
  precision: 2,
  max: 1000000,
};

function App() {
  const maskito = useMaskito(createNumberMask(numberMaskOptions));

  return <input ref={maskito} />;
}
```

--------------------------------

### Create a Custom Plugin for Padding Leading Zeros

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/documentation/plugins/plugins.template.html

This plugin pads a leading decimal point with a zero on blur if the integer part is empty. It's useful for ensuring a consistent numerical format.

```typescript
import maskito from '@maskito/core';

const plugins = [
  maskito.plugins.create(
    (element) => {
      const onBlur = () => {
        const value = element.value;
        if (value.startsWith('.')) {
          element.value = '0' + value;
        }
      };
      element.addEventListener('blur', onBlur);
      return () => element.removeEventListener('blur', onBlur);
    },
  ),
];

maskito(document.getElementById('my-textfield')!, {
  mask: /^[0-9]*\.?[0-9]*$/,
  plugins,
});
```

--------------------------------

### Merging Maskito Ref with Third-Party Refs

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/frameworks/react/react-doc.template.html

Demonstrates how to use a ref callback to merge the ref provided by Maskito's `useMaskito` hook with other refs, such as those from third-party libraries or custom components.

```tsx
import React, { useRef } from 'react';
import { useMaskito } from '@maskito/react';
import { createNumberMask } from 'maskito';

function App() {
  const inputRef = useRef<HTMLInputElement>(null);
  const maskito = useMaskito(createNumberMask(), {
    elementPredicate: inputRef,
  });

  return (
    <input
      ref={(el) => {
        inputRef.current = el;
        maskito(el); // Call Maskito's ref callback
      }}
    />
  );
}
```

--------------------------------

### Basic Maskito Usage in React

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/frameworks/react/react-doc.template.html

Demonstrates a basic controlled masked input using Maskito in a React component. It highlights the use of the `useMaskito` hook and native `onInput` event.

```tsx
import React, { useState } from 'react';
import { useMaskito } from '@maskito/react';
import { createNumberMask } from 'maskito';

function App() {
  const [value, setValue] = useState('');
  const maskito = useMaskito(createNumberMask({
    decimalSeparator: '.',
    thousandsSeparator: ',',
    precision: 2,
    max: 1000000,
  }));

  return (
    <input
      value={value}
      onInput={(e) => setValue(e.currentTarget.value)}
      ref={maskito}
    />
  );
}
```

--------------------------------

### Using React's onChange with Maskito

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/frameworks/react/react-doc.template.html

While `onInput` is recommended, this shows how Maskito also supports React's `onChange` event handler for controlled inputs. Ensure you understand the implications for robustness.

```tsx
import React, { useState } from 'react';
import { useMaskito } from '@maskito/react';
import { createNumberMask } from 'maskito';

function App() {
  const [value, setValue] = useState('');
  const maskito = useMaskito(createNumberMask({
    decimalSeparator: '.',
    thousandsSeparator: ',',
    precision: 2,
    max: 1000000,
  }));

  return (
    <input
      value={value}
      onChange={(e) => setValue(e.currentTarget.value)}
      ref={maskito}
    />
  );
}
```

--------------------------------

### Enable Maskito with Initial Value

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/documentation/plugins/examples/1-initial-calibration/index.md

Use this code to enable Maskito on an input element with a pre-defined initial value. Ensure the element is selected and the maskitoOptions are imported.

```typescript
import {Maskito} from '@maskito/core';

import maskitoOptions from './mask';

const element = document.querySelector('input')!;

element.value = '12345'; // patch with invalid initial value

// enable mask
const maskedInput = new Maskito(element, maskitoOptions);

console.info(element.value); // 123

// Call this function when the element is detached from DOM
maskedInput.destroy();
```

--------------------------------

### Initialize Maskito with Reject Functionality

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/kit/plugins/examples/4-reject/index.md

Initializes Maskito on an input element and provides a destroy method for cleanup. Call the destroy method when the element is detached from the DOM.

```typescript
import './animation.css';

import {Maskito} from '@maskito/core';

import maskitoOptions from './mask';

const element = document.querySelector('input')!;
const maskedInput = new Maskito(element, maskitoOptions);

console.info('Call this function when the element is detached from DOM', maskedInput.destroy);
```

--------------------------------

### Using maskitoInitialCalibrationPlugin

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/documentation/plugins/plugins.template.html

This plugin is useful when you need to ensure the textfield has a valid value programmatically upon mask initialization, even if the initial value might be incorrect.

```typescript
import maskito from '@maskito/core';
import {maskitoInitialCalibrationPlugin} from '@maskito/core';

maskito(document.getElementById('my-textfield')!, {
  mask: /^[0-9]*\.?[0-9]*$/,
  plugins: [maskitoInitialCalibrationPlugin],
});
```

--------------------------------

### Initialize Maskito for Content Editable Element

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/recipes/content-editable/examples/vanilla-js-tab.md

Initializes Maskito on a content editable element. Ensure the element is attached to the DOM before initialization. The `destroy` method is available for cleanup.

```typescript
import {Maskito, maskitoAdaptContentEditable} from '@maskito/core';

import maskitoOptions from './mask';

const element = document.querySelector<HTMLElement>('[contenteditable]')!;

const maskedInput = new Maskito(maskitoAdaptContentEditable(element), maskitoOptions);

console.info('Call this function when the element is detached from DOM', maskedInput.destroy);
```

--------------------------------

### Initialize Maskito on Textarea

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/recipes/textarea/examples/maskito-with-textarea.md

Applies a mask to a textarea element using Maskito. Ensure the element is available in the DOM before initialization. Call `destroy()` when the element is detached.

```typescript
import {Maskito} from '@maskito/core';

const element: HTMLTextAreaElement = document.querySelector('textarea')!;

const maskedTextarea = new Maskito(element, {
  mask: /^[a-z\s]+$/i,
});

// Call it when the element is detached from DOM
maskedTextarea.destroy();
```

--------------------------------

### Vue Best Practice: Using v-maskito Directive

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/frameworks/vue/examples/best-bad-practice.md

This is the recommended way to apply Maskito to an input element in Vue.js. Ensure your options object is correctly defined and passed to the directive.

```html
<!-- Best Practice ✅-->
<input v-maskito="options" />
```

--------------------------------

### Basic Time Input Mask

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/documentation/mask-expression/examples/basic-time-example.md

Use this snippet to initialize a Maskito instance for a time input field with HH:MM format. Ensure the element is available in the DOM before initializing.

```typescript
import {Maskito} from '@maskito/core';

const timeInput = new Maskito(element, {
  mask: [/\d/, /\d/, ':', /\d/, /\d/],
});
```

--------------------------------

### Basic Number Mask Configuration

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/documentation/plugins/examples/oversimplified-number-mask.md

Configure a MaskitoOptions object to create a mask that accepts only digits and an optional decimal point. This is useful for simple numeric inputs.

```typescript
import {MaskitoOptions} from '@maskito/core';

export default {
  /**
   * ^ – beginning of the string
   * \d – any digit
   * \d* – any number of digits
   * \.? – optional point to start decimal part
   * $ – ending of the string
   */
  mask: /^\d*\.?\d*$/,
} satisfies MaskitoOptions;
```

--------------------------------

### Using maskitoStrictCompositionPlugin

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/documentation/plugins/plugins.template.html

Enable mask validation on every keystroke, even during IME composition. This is useful for non-East Asian languages or when system autocomplete interferes with expected input behavior.

```typescript
import maskito from '@maskito/core';
import {maskitoStrictCompositionPlugin} from '@maskito/core';

maskito(document.getElementById('my-textfield')!, {
  mask: /^[0-9]*\.?[0-9]*$/,
  plugins: [maskitoStrictCompositionPlugin],
});
```

--------------------------------

### Initialize Phone Mask with Lazy Metadata

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/phone/examples/4-lazy-metadata/simple.md

Use this snippet to initialize a phone number input mask. It lazily loads metadata from libphonenumber-js, which is essential for accurate phone number formatting and validation based on country codes. Ensure the target element (input or textarea) exists in the DOM.

```javascript
import {Maskito, MASKITO_DEFAULT_OPTIONS} from '@maskito/core';
import {maskitoPhoneOptionsGenerator} from '@maskito/phone';

const element = document.querySelector('input,textarea');

let maskedInput;

(async function initMask() {
  const maskitoOptions = maskitoPhoneOptionsGenerator({
    countryIsoCode: 'RU',
    metadata: await import('libphonenumber-js/min/metadata').then((m) => m.default),
  });

  maskedInput = new Maskito(element, maskitoOptions);
})();

// Call this function when the element is detached from DOM
maskedInput.destroy();
```

--------------------------------

### Merge External and Maskito Refs in React

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/frameworks/react/examples/merge-ref.md

Use this pattern when you need to access the DOM node for both Maskito's functionality and for other purposes, such as managing focus or integrating with other libraries. Ensure `useMaskito` and `useRef` are imported.

```tsx
import {useMaskito} from '@maskito/react';
import {useRef} from 'react';

const options = {
  mask: /^\d+$/,
};

function App() {
  const anyExternalRef = useRef(null);
  const maskitoRef = useMaskito({options});

  return (
    <input
      ref={(node) => {
        maskitoRef(node);
        anyExternalRef.current = node;
      }}
    />
  );
}
```

--------------------------------

### Parse and Stringify Time with Maskito

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/kit/time/examples/maskito-parse-stringify-time-demo.md

Use `maskitoParseTime` to convert time strings to milliseconds and `maskitoStringifyTime` to convert milliseconds back to time strings. Supports various time formats based on provided parameters.

```typescript
import {maskitoParseTime, maskitoStringifyTime, MaskitoTimeParams} from '@maskito/kit';

const params: MaskitoTimeParams = {mode: 'HH:MM:SS.MSS'};

maskitoParseTime('23:59:59.999', params); // 86399999
maskitoParseTime('12:3', params); // 43380000 (parsed like '12:30:00.000')

maskitoStringifyTime(86399999, params); // '23:59:59.999'
```

--------------------------------

### Initialize Maskito for ContentEditable

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/recipes/content-editable/examples/maskito-with-content-editable.md

Use `maskitoAdaptContentEditable` to integrate Maskito with a contenteditable element. Ensure the element exists in the DOM before initialization.

```typescript
import {Maskito, maskitoAdaptContentEditable, MaskitoOptions} from '@maskito/core';

const maskitoOptions: MaskitoOptions = {
  mask: /^\d+$/,
};

const element = document.querySelector<HTMLElement>('[contenteditable]')!;

const maskedInput = new Maskito(
  maskitoAdaptContentEditable(element), // <-- This is the only difference
  maskitoOptions,
);

```

--------------------------------

### Stringify Numbers with Custom Options

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/kit/number/helpers/stringify-number.md

Use `maskitoStringifyNumber` to format numbers with custom thousand separators and prefixes. Handles null, NaN, numbers, and BigInt.

```typescript
import {
  maskitoStringifyNumber,
  type MaskitoNumberParams, // type for 2nd argument of maskitoStringifyNumber
  maskitoNumber,
} from '@maskito/kit';

const params: MaskitoNumberParams = {
  thousandSeparator: '_',
  prefix: '$',
};

maskitoNumber(params); // MaskitoOptions

maskitoStringifyNumber(null); // ''
maskitoStringifyNumber(NaN); // ''
maskitoStringifyNumber(1234, params); // '$1_234'
maskitoStringifyNumber(BigInt('1234'), params); // '$1_234'
```

--------------------------------

### Configure Number Mask for German Locale

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/kit/number/helpers/locale-number.md

Use the `maskitoNumber` helper with the 'de-DE' locale for German number formatting, which uses a dot for thousands separators and a comma for decimals. Specify `maximumFractionDigits` to control decimal places.

```typescript
import {maskitoNumber} from '@maskito/kit';

// German: dot thousands, comma decimal — e.g. 1.234,56
maskitoNumber({locale: 'de-DE', maximumFractionDigits: 2}); // MaskitoOptions
```

--------------------------------

### Configure Number Mask for Indian Locale with Prefix

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/kit/number/helpers/locale-number.md

Configure the number mask for the 'en-IN' locale to support Indian number grouping (2+3 digits). You can also add a currency prefix like '₹' using the `prefix` option.

```typescript
// Indian: 2+3 grouping — e.g. ₹12,34,567
maskitoNumber({locale: 'en-IN', prefix: '₹'}); // MaskitoOptions
```

--------------------------------

### Parse and Stringify Date-Time with Maskito

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/kit/date-time/examples/maskito-parse-stringify-date-time-demo.md

Use `maskitoParseDateTime` to convert a string into a Date object and `maskitoStringifyDateTime` to convert a Date object back into a string, according to specified date and time modes and separators.

```typescript
import {maskitoParseDateTime, maskitoStringifyDateTime, MaskitoDateTimeParams} from '@maskito/kit';

const params: MaskitoDateTimeParams = {
  dateMode: 'dd/mm/yyyy',
  timeMode: 'HH:MM',
  dateSeparator: ', ',
};

maskitoParseDateTime('07.11.2022, 13:17', params); // returns Date object
maskitoStringifyDateTime(new Date(2022, 10, 7, 13, 17), params); // '07.11.2022, 13:17'
```

--------------------------------

### Using maskitoChangeEventPlugin

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/documentation/plugins/plugins.template.html

This plugin dispatches a synthetic 'change' event when the user leaves the field and the value has been modified. This compensates for the native 'change' event not being dispatched by the browser when the 'beforeinput' event's default behavior is canceled.

```typescript
import maskito from '@maskito/core';
import {maskitoChangeEventPlugin} from '@maskito/core';

maskito(document.getElementById('my-textfield')!, {
  mask: /^[0-9]*\.?[0-9]*$/,
  plugins: [maskitoChangeEventPlugin],
});
```

--------------------------------

### Format Number with Thousand Separator

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/documentation/transformer/examples/utility-in-action-demo.md

Applies a number mask with a space as a thousand separator. Useful for displaying large numbers in a human-readable format. Ensure `@maskito/core` and `@maskito/kit` are imported.

```typescript
import {maskitoTransform} from '@maskito/core';
import {maskitoNumber} from '@maskito/kit';

const maskitoOptions = maskitoNumber({
  thousandSeparator: ' ',
});

const definitelyValidValue = maskitoTransform('1000000', maskitoOptions);

console.info(definitelyValidValue); // '1 000 000'

// Framework agnostic way | index.ts
inputElement.value = definitelyValidValue;

// Angular way | app.component.ts
this.formControl.patchValue(definitelyValidValue);
```

--------------------------------

### RegExp Mask for 4-Digit PIN

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/documentation/mask-expression/mask-expression.template.html

Use a RegExp mask that matches intermediate states, allowing users to type digits one by one until the desired length is reached. Avoid masks that only match the final value.

```typescript
mask: /^\d{0,4}$/
```

--------------------------------

### Configure Number Mask for French Locale

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/kit/number/helpers/locale-number.md

Use the 'fr-FR' locale for French number formatting, which employs a narrow non-breaking space for thousands separators and a comma for decimals. Control the number of decimal places with `maximumFractionDigits`.

```typescript
// French: narrow no-break space thousands — e.g. 1 234,56
maskitoNumber({locale: 'fr-FR', maximumFractionDigits: 2}); // MaskitoOptions
```

--------------------------------

### Vue Anti-Pattern: Inline Mask Configuration

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/frameworks/vue/examples/best-bad-practice.md

Avoid configuring the mask directly within the v-maskito directive using inline object literals, especially for complex masks. This can lead to less maintainable code.

```html
<!-- Anti-Pattern ❌-->
<input v-maskito="{ mask: /^\d+$/ }" />
```

--------------------------------

### Handle Empty or Invalid Number Inputs

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/kit/number/helpers/parse-number-as-number-type.md

Demonstrates how `maskitoParseNumber` handles empty strings or strings containing only a minus sign, returning `NaN` in such cases.

```typescript
// "Empty" values
maskitoParseNumber(''); // NaN
maskitoParseNumber('-'); // NaN
```

--------------------------------

### Parse and Stringify Dates with Custom Separator

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/kit/date/examples/maskito-parse-stringify-date-demo.md

Use `maskitoParseDate` to convert a string to a Date object and `maskitoStringifyDate` to convert a Date object back to a string. Customize the date format and separator using `MaskitoDateParams`.

```typescript
import {maskitoParseDate, maskitoStringifyDate, MaskitoDateParams} from '@maskito/kit';

const params: MaskitoDateParams = {
  mode: 'dd/mm/yyyy',
  separator: '/', // default is '.'
};

maskitoParseDate('05/02/2004', params); // returns Date object

maskitoStringifyDate(new Date('2004-02-05'), params); // '05/02/2004'
```

--------------------------------

### maskitoStringifyNumber

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/kit/number/helpers/stringify-number.md

Converts a number or BigInt into a formatted string based on provided parameters. Handles null and NaN by returning an empty string.

```APIDOC
## maskitoStringifyNumber

### Description
Converts a number or BigInt into a formatted string using the provided MaskitoNumberParams. Returns an empty string for null or NaN inputs.

### Signature
```typescript
function maskitoStringifyNumber(value: number | BigInt | null | undefined | typeof NaN, params?: MaskitoNumberParams): string
```

### Parameters
#### Value
- **value** (number | BigInt | null | undefined | typeof NaN) - The number or BigInt to stringify. If null, undefined, or NaN, an empty string is returned.

#### Params
- **params** (MaskitoNumberParams) - Optional. An object containing formatting options such as `thousandSeparator` and `prefix`.

### Examples
#### Basic Usage
```typescript
import { maskitoStringifyNumber } from '@maskito/kit';

maskitoStringifyNumber(12345);
// Expected output: "12345"

maskitoStringifyNumber(null);
// Expected output: ""

maskitoStringifyNumber(NaN);
// Expected output: ""
```

#### With Custom Separators and Prefix
```typescript
import { maskitoStringifyNumber } from '@maskito/kit';

const params = {
  thousandSeparator: '_',
  prefix: '$',
};

maskitoStringifyNumber(1234, params);
// Expected output: "$1_234"

maskitoStringifyNumber(BigInt('1234567'), params);
// Expected output: "$1_234_567"
```
```

--------------------------------

### Define firstArgDemo Type

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/documentation/processors/examples/preprocessor-first-arg-demo.md

This type defines the structure of the first argument passed to Maskito preprocessors. It includes the element's current state (value and selection) and the new data to be inserted.

```typescript
type firstArgDemo = {
  // current input's element state BEFORE any changes are applied
  elementState: {
    value: string;
    selection: [from: number, to: number];
  };
  // new typed characters which is going to be inserted to the element
  data: string; // can be empty string if it is deletion or validation
};
```

--------------------------------

### Handle Empty or Invalid Input for BigInt Parsing

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/kit/number/helpers/parse-number-as-bigint-type.md

When parsing empty strings or strings containing only a minus sign with `bigint: true`, `maskitoParseNumber` returns `null`. Ensure your application handles these null cases appropriately.

```typescript
// "Empty" values
maskitoParseNumber('', {bigint: true}); // null
maskitoParseNumber('-', {bigint: true}); // null
```

--------------------------------

### React Controlled Input with Maskito

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/frameworks/react/examples/controlled-input.md

This snippet shows a React component that implements a controlled input using `useState` and `useMaskito`. The `onInput` event handler updates the state, ensuring the input value is managed by React. The `useMaskito` hook applies a mask to the input element, configured to accept only digits.

```tsx
import {useState} from 'react';
import {useMaskito} from '@maskito/react';

const digitsOnlyMask: MaskitoOptions = {
  mask: /^\d+$/,
};

function App() {
  const inputRef = useMaskito({options: digitsOnlyMask});
  const [value, setValue] = useState('');

  // Use `onInput` handler to build controlled input
  return (
    <input
      ref={inputRef}
      value={value}
      onInput={(e) => setValue(e.currentTarget.value)}
    />
  );
}
```

--------------------------------

### Import MaskitoDirective in Angular

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/frameworks/angular/examples/import-maskito.md

Import the MaskitoDirective into your Angular component to enable Maskito functionality. Ensure it's included in the `imports` array of your `@Component` decorator.

```typescript
import {Component} from '@angular/core';
import {MaskitoDirective} from '@maskito/angular';

@Component({
  // ...
  imports: [
    MaskitoDirective,
    // ...
  ],
})
export class YourComponent {}
```

--------------------------------

### Mask Input with RegExp

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/documentation/mask-expression/examples/reg-exp-mask-expression-demo.md

Use a regular expression to define a mask that only allows digits. Ensure the element is correctly referenced.

```typescript
import {Maskito} from '@maskito/core';

const onlyDigitsInput = new Maskito(element, {
  mask: /^\d+$/,
});
```

--------------------------------

### Angular Custom Input with Maskito

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/frameworks/angular/examples/custom-input-example.md

Use MaskitoDirective with a custom input wrapper. Configure MaskitoOptions for input masking and MaskitoElementPredicate to target a specific input element within your custom component.

```typescript
import {Component} from '@angular/core';
import {MaskitoDirective} from '@maskito/angular';
import {MaskitoOptions, MaskitoElementPredicate} from '@maskito/core';

@Component({
  selector: 'your-component',
  template:
    `
    <custom-input-wrapper
      [maskito]="maskitoOptions"
      [maskitoElement]="predicate"
    >
      Using maskito with another library
    </custom-input-wrapper>
  `,
  imports: [MaskitoDirective],
})
export class YourComponent {
  readonly maskitoOptions: MaskitoOptions = {
    mask: /^\d+$/,
  };

  readonly predicate: MaskitoElementPredicate = (element) => element.querySelector('input[id="my-input"]')!;
}
```

--------------------------------

### Dynamic Mask Expression Function

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/documentation/mask-expression/mask-expression.template.html

Implement a dynamic mask by providing a function that generates the mask expression based on the element's state. Be mindful of performance and consider memoization for frequently changing masks.

```typescript
mask: (elementState) => {
  // Generate mask based on elementState
  return /^\d{0,10}$/;
}
```

--------------------------------

### Dynamic Word Count Mask

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/documentation/mask-expression/examples/dynamic-mask-expression-demo.md

Configure Maskito to limit the number of words allowed in an input field. The `howManyWordsAllowed` variable controls the maximum word count, making the mask dynamic.

```typescript
import {Maskito} from '@maskito/core';

let howManyWordsAllowed = 5;

const maxWordInput = new Maskito(element, {
  mask: (elementState) => new RegExp('^(\w+\s?){0,' + howManyWordsAllowed + '}$')
});
```

--------------------------------

### Numeric Input with Comma Decimal Separator

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/documentation/processors/examples/preprocessor-in-action-demo.md

Use this preprocessor to enforce a comma as the decimal separator for numeric inputs. It replaces any periods with commas before processing.

```typescript
import {Maskito} from '@maskito/core';

const numberInput = new Maskito(element, {
  mask: /^\d+(,\d*)?$/, // digits and comma (as decimal separator)
  preprocessors: [
    ({elementState, data}, actionType) => {
      const {value, selection} = elementState;

      return {
        elementState: {
          selection,
          value: value.replace('.', ','),
        },
        data: data.replace('.', ','),
      };
    },
  ],
});
```

--------------------------------

### Parse String to BigInt with Maskito

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/kit/number/helpers/parse-number-as-bigint-type.md

Use `maskitoParseNumber` with the `bigint: true` option to convert a string into a BigInt. This handles large numbers that exceed `Number.MAX_SAFE_INTEGER`. The `thousandSeparator` option from `maskitoNumber` can be passed via spread syntax.

```typescript
import {
  maskitoParseNumber,
  type MaskitoNumberParams, // type for 2nd argument of maskitoParseNumber
  maskitoNumber,
} from '@maskito/kit';

const params: MaskitoNumberParams = {
  thousandSeparator: '_',
};

maskitoNumber(params); // MaskitoOptions

const value: bigint | null = maskitoParseNumber('1_234_567_890_123_456_789', {
  ...params,
  bigint: true,
}); // 1234567890123456789n

value > Number.MAX_SAFE_INTEGER; // true
typeof value === 'bigint'; // true
```

--------------------------------

### ElementState Interface

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/documentation/element-state/examples/element-state-demo.md

The ElementState interface defines the structure for the state of a masked input or textarea, including its current value and selection range.

```APIDOC
## ElementState

### Description
Represents the state of a masked `<input>` or `<textarea>` element.

### Properties
- **value** (string) - The current masked value of the input.
- **selection** (readonly [number, number]) - The selection range within the input.
  - **from** (number) - The 0-based index of the first selected character.
  - **to** (number) - The index of the character after the last selected character.
```

--------------------------------

### Parse String to Number with Custom Separator

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/kit/number/helpers/parse-number-as-number-type.md

Use `maskitoParseNumber` to convert a string into a number, specifying custom decimal separators via `MaskitoNumberParams`. The function returns a `number` type or `NaN` for invalid inputs.

```typescript
import {
  maskitoParseNumber,
  type MaskitoNumberParams, // type for 2nd argument of maskitoParseNumber
  maskitoNumber,
} from '@maskito/kit';

const params: MaskitoNumberParams = {
  decimalSeparator: ',', // default is '.'
};

maskitoNumber(params); // MaskitoOptions

const value: number = maskitoParseNumber('10 000,42', params); // 10000.42

typeof value === 'number'; // true
```

--------------------------------

### Angular Component with MaskitoDirective

Source: https://github.com/taiga-family/maskito/blob/main/projects/demo/src/pages/frameworks/angular/examples/basic-directive-approach.md

Use this snippet to apply a basic numeric mask to an input field in your Angular component. Ensure MaskitoDirective is imported into your component or module.

```typescript
import {Component} from '@angular/core';
import {MaskitoDirective} from '@maskito/angular';
import {MaskitoOptions} from '@maskito/core';

@Component({
  selector: 'your-component',
  template: `
    <input [maskito]="maskitoOptions" />
  `,
  imports: [MaskitoDirective],
})
export class YourComponent {
  readonly maskitoOptions: MaskitoOptions = {
    mask: /^\d+$/,
  };
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.