From c659a3d5859cccfc3d5cf3f984d1f766fb67f406 Mon Sep 17 00:00:00 2001
From: Alexander Shabunevich <loonar@gmail.com>
Date: Tue, 28 May 2024 22:24:39 +0300
Subject: [PATCH] docs: updated docs for v3

---
 .github/workflows/build.yml                   |  15 +-
 README.md                                     |   2 +-
 Taskfile.yml                                  |   3 +
 docs/.nojekyll                                |   0
 docs/index.html                               |   6 +
 {packages/docs/docs => docs}/maska.svg        |   0
 {packages/docs/docs => docs/v2}/README.md     |   7 +-
 {packages/docs/docs => docs/v2}/index.html    |  11 +-
 docs/v3/README.md                             |  23 +
 docs/v3/_sidebar.md                           |  12 +
 docs/v3/alpine.md                             |  88 +++
 docs/v3/hooks.md                              | 116 ++++
 {packages/docs/docs/v2 => docs/v3}/index.html |  38 +-
 docs/v3/issues.md                             |  22 +
 docs/v3/options.md                            | 206 +++++++
 docs/v3/svelte.md                             |  61 ++
 docs/v3/tokens.md                             |  91 +++
 docs/v3/upgrade.md                            |  76 +++
 docs/v3/vanilla.md                            | 116 ++++
 docs/v3/vue.md                                | 252 ++++++++
 package.json                                  |   3 +-
 packages/docs/docs/v2/README.md               | 572 ------------------
 packages/docs/package.json                    |  20 -
 packages/docs/src/App.vue                     | 117 ----
 packages/docs/src/index.ts                    |  55 --
 packages/docs/src/v2/index.ts                 |  54 --
 packages/docs/tsconfig.json                   |   4 -
 packages/docs/vite.config.mts                 |  21 -
 28 files changed, 1107 insertions(+), 884 deletions(-)
 create mode 100644 docs/.nojekyll
 create mode 100644 docs/index.html
 rename {packages/docs/docs => docs}/maska.svg (100%)
 rename {packages/docs/docs => docs/v2}/README.md (98%)
 rename {packages/docs/docs => docs/v2}/index.html (87%)
 create mode 100644 docs/v3/README.md
 create mode 100644 docs/v3/_sidebar.md
 create mode 100644 docs/v3/alpine.md
 create mode 100644 docs/v3/hooks.md
 rename {packages/docs/docs/v2 => docs/v3}/index.html (71%)
 create mode 100644 docs/v3/issues.md
 create mode 100644 docs/v3/options.md
 create mode 100644 docs/v3/svelte.md
 create mode 100644 docs/v3/tokens.md
 create mode 100644 docs/v3/upgrade.md
 create mode 100644 docs/v3/vanilla.md
 create mode 100644 docs/v3/vue.md
 delete mode 100644 packages/docs/docs/v2/README.md
 delete mode 100644 packages/docs/package.json
 delete mode 100644 packages/docs/src/App.vue
 delete mode 100644 packages/docs/src/index.ts
 delete mode 100644 packages/docs/src/v2/index.ts
 delete mode 100644 packages/docs/tsconfig.json
 delete mode 100644 packages/docs/vite.config.mts

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index f9d3b32..57a61e4 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -32,14 +32,6 @@ jobs:
         with:
           cmd: 'jq .total.statements.pct packages/maska/coverage/coverage-summary.json'
 
-      - name: Build demo
-        run: npm run build --workspace=docs
-
-      - name: Upload demo artifact
-        uses: actions/upload-pages-artifact@v1
-        with:
-          path: ./packages/docs/docs
-
   badge:
     runs-on: ubuntu-latest
     needs: build
@@ -70,6 +62,11 @@ jobs:
       url: ${{ steps.deployment.outputs.page_url }}
 
     steps:
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./docs
+
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v4
diff --git a/README.md b/README.md
index b8d4e63..6113df6 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,7 @@
 
 ## Support ☕️
 
-Do you like **Maska**? Please support me via [Boosty](https://boosty.to/beholdr).
+> ❤️ [Please support](https://boosty.to/beholdr) Maska future development!
 
 ## Features ✨
 
diff --git a/Taskfile.yml b/Taskfile.yml
index 41653c4..4abea57 100644
--- a/Taskfile.yml
+++ b/Taskfile.yml
@@ -10,6 +10,9 @@ tasks:
   dev:maska-build-watch: npm run build:watch --workspace=packages/maska
   dev:svelte: npm run dev --workspace=packages/svelte
   dev:vue: npm run dev --workspace=packages/vue
+  dev:docs:
+    dir: docs
+    cmd: http-server
 
   code:test: npm run test --workspaces
   code:coverage: npm run test:coverage --workspaces
diff --git a/docs/.nojekyll b/docs/.nojekyll
new file mode 100644
index 0000000..e69de29
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..3b5459b
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="refresh" content="0;URL=/v3" />
+</head>
+</html>
diff --git a/packages/docs/docs/maska.svg b/docs/maska.svg
similarity index 100%
rename from packages/docs/docs/maska.svg
rename to docs/maska.svg
diff --git a/packages/docs/docs/README.md b/docs/v2/README.md
similarity index 98%
rename from packages/docs/docs/README.md
rename to docs/v2/README.md
index 4def345..912ba83 100644
--- a/packages/docs/docs/README.md
+++ b/docs/v2/README.md
@@ -1,8 +1,8 @@
-<object data="/maska.svg" type="image/svg+xml" style="max-width: 90%"></object>
+<object data="../maska.svg" type="image/svg+xml" style="max-width: 90%"></object>
 
 ---
 
-# Maska {{versionLabel}}
+# Maska
 
 Do you like **Maska**? Please support me via [Boosty](https://boosty.to/beholdr).
 
@@ -11,9 +11,6 @@ Do you like **Maska**? Please support me via [Boosty](https://boosty.to/beholdr)
 Here are several examples of basic masks that you could create with **Maska**.
 This demo is interactive: feel free to edit the examples.
 
-<div id="demo-app"></div>
-<script type="module" src="dist/demo.js"></script>
-
 # Install
 
 <!-- tabs:start -->
diff --git a/packages/docs/docs/index.html b/docs/v2/index.html
similarity index 87%
rename from packages/docs/docs/index.html
rename to docs/v2/index.html
index 4983fff..50187ca 100644
--- a/packages/docs/docs/index.html
+++ b/docs/v2/index.html
@@ -4,17 +4,15 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
-  <title>maska v3 docs</title>
+  <title>maska v2 docs</title>
 
-  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%220.9em%22 font-size=%22128%22>*️⃣</text></svg>">
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%220.9em%22 font-size=%22120%22>*️⃣</text></svg>">
 
   <!-- Themes (light + dark) -->
   <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css">
   <link rel="stylesheet" media="(prefers-color-scheme: light)" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-versioned-plugin@0.0.1/styles.css">
 
-  <link rel="stylesheet" href="dist/style.css">
-
   <style>
     :root {
       --theme-hue: 281;
@@ -55,8 +53,8 @@
     maxLevel: 2,
     versionSelectorLabel: 'Version',
     versions: [
-      { folder: '#', label: 'v3.x', default: true },
-      { folder: 'v2', label: 'v2.x', default: false }
+      { folder: 'v3', label: 'v3', default: true },
+      { folder: 'v2', label: 'v2', default: false }
     ]
   }
   </script>
@@ -70,6 +68,5 @@
   <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/docsify-tabs@1"></script>
   <script src="https://cdn.jsdelivr.net/npm/docsify-copy-code@2"></script>
-  <script src="https://cdn.jsdelivr.net/npm/docsify/lib/plugins/external-script.min.js"></script>
 </body>
 </html>
diff --git a/docs/v3/README.md b/docs/v3/README.md
new file mode 100644
index 0000000..aa341f4
--- /dev/null
+++ b/docs/v3/README.md
@@ -0,0 +1,23 @@
+<object data="../maska.svg" type="image/svg+xml" style="max-width: 90%"></object>
+
+---
+
+**Maska** is a simple zero-dependency input mask library.
+
+You can use it with vanilla javascript or with your favorite framework. Out of the box there is integration with Vue 2/3, Svelte and Alpine.js, but you can integrate it into any framework.
+
+> ❤️ [Please support](https://boosty.to/beholdr) Maska future development!
+
+## Main components
+
+- `Mask` — class for mask processing (can be used to mask any string)
+- `MaskInput` — handles interaction with the `<input>` element
+- Directives `vMaska` for Vue, `xMaska` for Alpine.js and `maska` action for Svelte
+
+## Live Demo
+
+<iframe height="300" style="width: 100%;" scrolling="no" title="Maska demo" src="https://codepen.io/beholdr/embed/QWREEMY?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+  See the Pen <a href="https://codepen.io/beholdr/pen/QWREEMY">
+  Maska demo</a> by Alexander (<a href="https://codepen.io/beholdr">@beholdr</a>)
+  on <a href="https://codepen.io">CodePen</a>.
+</iframe>
diff --git a/docs/v3/_sidebar.md b/docs/v3/_sidebar.md
new file mode 100644
index 0000000..fcbd699
--- /dev/null
+++ b/docs/v3/_sidebar.md
@@ -0,0 +1,12 @@
+- [Introduction](/)
+- [Upgrade from v2](/upgrade)
+- Usage
+  - [Vanilla](/vanilla)
+  - [Vue](/vue)
+  - [Alpine](/alpine)
+  - [Svelte](/svelte)
+- Details
+  - [Options](/options)
+  - [Tokens](/tokens)
+  - [Hooks & Events](/hooks)
+  - [Known Issues](/issues)
diff --git a/docs/v3/alpine.md b/docs/v3/alpine.md
new file mode 100644
index 0000000..78de307
--- /dev/null
+++ b/docs/v3/alpine.md
@@ -0,0 +1,88 @@
+# Usage with Alpine.js
+
+## Installation
+
+<!-- tabs:start -->
+### **With NPM**
+
+```sh
+npm install @maskajs/alpine@3
+```
+
+And then register it:
+
+```js
+import Alpine from 'alpinejs'
+import { xMaska } from '@maskajs/alpine'
+
+Alpine.plugin(xMaska)
+...
+```
+
+### **From CDN**
+
+You can use Maska directly from CDN using simple script tag with `data-init` attribute, just make sure to include it BEFORE Alpine's core JS file:
+
+```html
+<!-- Maska Plugin -->
+<script data-init src="https://cdn.jsdelivr.net/npm/@maskajs/alpine@3/dist/maska.umd.js"></script>
+<!-- Alpine Core -->
+<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+```
+
+This will automatically register Maska plugin inside Alpine.
+<!-- tabs:end -->
+
+
+## Directive signature
+
+Maska provides custom Alpine.js directive for use with input:
+
+```html
+<input x-maska:argument.modifier="options">
+```
+
+- `argument` is a name of the bound variable (see example below)
+- `modifier` modifier for bound variable value, could be one of:
+  - `masked` (default): variable will get a masked value (as in v-model)
+  - `unmasked`: variable will get an unmasked (raw) value
+  - `completed`: variable will be boolean, showing that mask is completed
+- `options` is object with default options
+
+
+## Minimal example
+
+Apply `xMaska` directive to the input along with `data-maska` attribite:
+
+```html
+<input x-maska data-maska="#-#">
+```
+
+
+## Set mask options
+
+To set default [options](/options) for the mask, pass options via **directive value**:
+
+```html
+<div x-data="{ options: { mask: '#-#', eager: true }}">
+  <input x-maska="options" data-maska-reversed>
+</div>
+```
+
+You can override default options with `data-maska-` attributes on the input. In the example above we set **eager** mode using options and **reversed** mode using `data-maska-reversed` attribute.
+
+
+## Bind value
+
+To get masked value you can use standard `x-model` directive on the input. But if you want to access an unmasked (raw) value or get to know when mask is completed, you can use **directive argument** and (optionally) **directive modifier**:
+
+```html
+<div x-data="{ maskedvalue: '', unmaskedvalue: '' }">
+  <input x-maska:unmaskedvalue.unmasked data-maska="#-#" x-model="maskedvalue">
+
+  Masked value: <span x-text="maskedvalue"></span>
+  Unmasked value: <span x-text="unmaskedvalue"></span>
+</div>
+```
+
+!> For correct work as directive argument, name of the bounded variable should be in **lower case**. So instead of `unmaskedValue` use `unmaskedvalue` or `unmasked_value`.
diff --git a/docs/v3/hooks.md b/docs/v3/hooks.md
new file mode 100644
index 0000000..b4d3096
--- /dev/null
+++ b/docs/v3/hooks.md
@@ -0,0 +1,116 @@
+# Hooks & Events
+
+## Hooks
+
+Use hooks to transform masking value:
+
+- `preProcess` hook is called before the mask processing
+- `postProcess` hook is called after the mask processing, but before the input's value is set
+
+For example, you can use it to check for a maximum length of a masked string:
+
+```js
+new MaskInput("input", {
+  postProcess: (value: string) => value.slice(0, 5)
+})
+```
+
+## Events
+
+You can subscribe to `maska` event that fires after each mask processing.
+Event will contain `detail` property with a given structure:
+
+<!-- tabs:start -->
+### **Description**
+
+- `masked`: masked value
+- `unmasked`: unmasked value
+- `completed`: flag that current mask is completed
+
+### **Types**
+```typescript
+interface MaskaDetail {
+  masked: string
+  unmasked: string
+  completed: boolean
+}
+```
+<!-- tabs:end -->
+
+```js
+const onMaska = (event: CustomEvent<MaskaDetail>) => {
+  console.log({
+    masked: event.detail.masked,
+    unmasked: event.detail.unmasked,
+    completed: event.detail.completed
+  })
+}
+```
+
+<!-- tabs:start -->
+## **Vanilla JS**
+
+```js
+document.querySelector("input").addEventListener("maska", onMaska)
+```
+
+## **Vue**
+
+```vue
+<input v-maska data-maska="#-#" @maska="onMaska" />
+```
+
+## **Alpine**
+
+```html
+<input x-maska data-maska="#-#" x-on:maska="onMaska" />
+```
+
+## **Svelte**
+
+```svelte
+<input use:maska data-maska="#-#" on:maska={onMaska} />
+```
+<!-- tabs:end -->
+
+Alternatively, you can pass a callback function directly using the `onMaska` option:
+
+<!-- tabs:start -->
+### **Vanilla JS**
+```js
+new MaskInput("input", {
+  onMaska: (detail: MaskaDetail) => console.log(detail.completed)
+})
+```
+
+### **Vue**
+```vue
+<script setup lang="ts">
+const options = {
+  onMaska: (detail: MaskaDetail) => console.log(detail.completed)
+}
+</script>
+
+<template>
+  <input v-maska="options">
+</template>
+```
+
+### **Alpine**
+```html
+<div x-data="{ options: { onMaska: (detail) => console.log(detail.completed) }}">
+  <input x-maska="options">
+</div>
+```
+
+### **Svelte**
+```svelte
+<script lang="ts">
+const options = {
+  onMaska: (detail: MaskaDetail) => console.log(detail.completed)
+}
+</script>
+
+<input use:maska={options}>
+```
+<!-- tabs:end -->
diff --git a/packages/docs/docs/v2/index.html b/docs/v3/index.html
similarity index 71%
rename from packages/docs/docs/v2/index.html
rename to docs/v3/index.html
index ad913d0..07160ad 100644
--- a/packages/docs/docs/v2/index.html
+++ b/docs/v3/index.html
@@ -4,16 +4,15 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
-  <title>maska v2 docs</title>
+  <title>maska v3 docs</title>
 
-  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%220.9em%22 font-size=%22128%22>*️⃣</text></svg>">
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%220.9em%22 font-size=%22120%22>*️⃣</text></svg>">
 
   <!-- Themes (light + dark) -->
   <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css">
   <link rel="stylesheet" media="(prefers-color-scheme: light)" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-versioned-plugin@0.0.1/styles.css">
-
-  <link rel="stylesheet" href="../dist/style.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mingchyuanko/docsify-plugin-page-toc/dist/toc.css">
 
   <style>
     :root {
@@ -26,15 +25,20 @@
     .sidebar > .app-name {
       display: none;
     }
-    .sidebar-nav li.active {
-      background: #990bdb;
-      color: #fff;
-      margin-left: -10px;
-      padding-left: 10px;
-      border-radius: 2px;
+    .sidebar-nav > ul > li:has(ul) {
+      margin-top: 18px;
+      font-size: 0.8em;
+      text-transform: uppercase;
+      letter-spacing: 0.1ex;
+      font-weight: bold;
     }
-    .sidebar-nav li.active a {
-      color: #fff;
+    .sidebar-nav > ul > li > ul {
+      margin-left: 0;
+      margin-top: 6px;
+      font-size: 1rem;
+      text-transform: none;
+      letter-spacing: normal;
+      font-weight: normal;
     }
 
     @media screen and (max-width: 500px) {
@@ -53,10 +57,12 @@
     name: 'maska',
     repo: 'beholdr/maska',
     maxLevel: 2,
+    auto2top: true,
+    loadSidebar: true,
     versionSelectorLabel: 'Version',
     versions: [
-      { folder: '#', label: 'v3.x', default: true },
-      { folder: 'v2', label: 'v2.x', default: false }
+      { folder: 'v3', label: 'v3', default: true },
+      { folder: 'v2', label: 'v2', default: false }
     ]
   }
   </script>
@@ -70,8 +76,6 @@
   <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/docsify-tabs@1"></script>
   <script src="https://cdn.jsdelivr.net/npm/docsify-copy-code@2"></script>
-  <script src="https://cdn.jsdelivr.net/npm/docsify/lib/plugins/external-script.min.js"></script>
-
-  <script src="https://cdn.jsdelivr.net/npm/maska@2/dist/maska.umd.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@mingchyuanko/docsify-plugin-page-toc/dist/toc.min.js"></script>
 </body>
 </html>
diff --git a/docs/v3/issues.md b/docs/v3/issues.md
new file mode 100644
index 0000000..114ea5e
--- /dev/null
+++ b/docs/v3/issues.md
@@ -0,0 +1,22 @@
+# Known issues
+
+## Unsupported input types
+
+Please use Maska only for inputs of the following types: `text`, `search`, `URL`, `tel` and `password`.
+If you need a numeric keyboard, use `type="text"` with attribute `inputmode="numeric"`:
+
+```html
+<input type="text" inputmode="numeric">
+```
+
+## Vuetify and other UI frameworks
+
+Some frameworks with custom components may not pass `data-` attributes to native input elements. In such cases, you will need to set the mask and other options using directive value:
+
+```vue
+<script setup>
+const options = { mask: '#-#' }
+</script>
+
+<input v-maska="options">
+```
diff --git a/docs/v3/options.md b/docs/v3/options.md
new file mode 100644
index 0000000..dd84064
--- /dev/null
+++ b/docs/v3/options.md
@@ -0,0 +1,206 @@
+# Options
+
+There are two main components that you can customize: the `Mask` class and the `MaskInput` class. You typically work directly with the latter, but since `MaskInput` options extend `Mask` options, you can configure both using a single object.
+
+## `Mask` options
+
+To set options for a `Mask` class you can pass an object when creating the class:
+
+```js
+new Mask({ mask: "#-#", eager: true, number: { locale: 'de' }})
+```
+
+Options passed in this way will be used as default values and can be overridden by `data-maska-` attributes of a given input element.
+
+<!-- tabs:start -->
+### **Description**
+
+<table>
+  <tr>
+    <th>Option / data-attribute</th>
+    <th>Default</th>
+    <th>Description</th>
+  </tr>
+  <tr>
+    <td><code>mask</code><br><code>data-maska</code></td>
+    <td><code>—</code></td>
+    <td>Mask to apply (string, array of strings or function). If you pass an empty string or <code>null</code> it will disable a mask</td>
+  </tr>
+  <tr>
+    <td><code>tokens</code><br><code>data-maska-tokens</code></td>
+    <td><code>—</code></td>
+    <td>Custom tokens object. See tokens page</td>
+  </tr>
+  <tr>
+    <td><code>tokensReplace</code><br><code>data-maska-tokens-replace</code></td>
+    <td><code>false</code></td>
+    <td>If custom tokens should replace default tokens (if not set, they will merge)</td>
+  </tr>
+  <tr>
+    <td><code>eager</code><br><code>data-maska-eager</code></td>
+    <td><code>false</code></td>
+    <td>Eager mode will show static characters before you type them, e.g. when you type <code>1</code>, eager mask <code>#-#</code> will show <code>1-</code> and non-eager will show <code>1</code></td>
+  </tr>
+  <tr>
+    <td><code>reversed</code><br><code>data-maska-reversed</code></td>
+    <td><code>false</code></td>
+    <td>In reversed mode mask will grow backwards, e.g. for numbers</td>
+  </tr>
+  <tr>
+    <td><code>number.locale</code><br><code>data-maska-number-locale</code></td>
+    <td><code>en</code></td>
+    <td>Locale for number mode. Determine the national format for the number</td>
+  </tr>
+  <tr>
+    <td><code>number.fraction</code><br><code>data-maska-number-fraction</code></td>
+    <td><code>0</code></td>
+    <td>Fraction digits for the number (<code>0</code> allows only integer numbers)</td>
+  </tr>
+  <tr>
+    <td><code>number.unsigned</code><br><code>data-maska-number-unsigned</code></td>
+    <td><code>false</code></td>
+    <td>Unsigned mode for the number: if you want to accept only positive numbers</td>
+  </tr>
+</table>
+
+### **Types**
+```typescript
+interface MaskOptions {
+  mask?: MaskType
+  tokens?: MaskTokens
+  tokensReplace?: boolean
+  eager?: boolean
+  reversed?: boolean
+  number?: MaskNumber
+}
+
+type MaskType = string | string[] | ((input: string) => string) | null
+
+interface MaskToken {
+  pattern: RegExp
+  multiple?: boolean
+  optional?: boolean
+  repeated?: boolean
+  transform?: (char: string) => string
+}
+
+type MaskTokens = Record<string, MaskToken>
+
+interface MaskNumber {
+  locale?: string
+  fraction?: number
+  unsigned?: boolean
+}
+```
+<!-- tabs:end -->
+
+
+## `MaskInput` options
+
+`MaskInput` options can only be set when creating a class, as they are too complex to use `data-maska-` attributes for them. Along with `MaskInput` options you can also pass any `Mask` class options (or set them using `data-maska-` attributes):
+
+```js
+new MaskInput("input", {
+  onMaska: (detail) => console.log(detail.completed)
+  mask: "#-#",
+  reversed: true,
+})
+```
+
+<!-- tabs:start -->
+### **Description**
+
+<table>
+  <tr>
+    <th>Option</th>
+    <th>Description</th>
+  </tr>
+  <tr>
+    <td><code>onMaska</code></td>
+    <td>Сallback (event analog), called after every mask processing</td>
+  </tr>
+  <tr>
+    <td><code>preProcess</code></td>
+    <td>Hook called before mask processing</td>
+  </tr>
+  <tr>
+    <td><code>postProcess</code></td>
+    <td>Hook called after mask processing</td>
+  </tr>
+</table>
+
+### **Types**
+```typescript
+interface MaskInputOptions extends MaskOptions {
+  onMaska?: (detail: MaskaDetail) => void
+  preProcess?: (value: string) => string
+  postProcess?: (value: string) => string
+}
+
+interface MaskaDetail {
+  masked: string
+  unmasked: string
+  completed: boolean
+}
+```
+<!-- tabs:end -->
+
+?> Examples on this page use vanilla version of Maska. The framework specific versions have the same options, but should be passed in a different way: for example, as a directive value.
+
+
+## Number mask
+
+Number mode makes it easy to format numbers according to the selected locale.
+
+You can enable the number mode using `number` option or `data-maska-number-` attributes.
+In that case you don't need to set `mask` or any other options. All number options are optional:
+
+<!-- tabs:start -->
+### **By data-attributes**
+
+```html
+<!-- Minimal example -->
+<input data-maska-number>
+
+<!-- Full example -->
+<input
+  data-maska-number-locale="ru"
+  data-maska-number-fraction="2"
+  data-maska-number-unsigned
+>
+```
+
+### **By option**
+
+```js
+// minimal example
+new MaskInput("input", {
+  number: {}
+})
+
+// full example
+new MaskInput("input", {
+  number: {
+    locale: "ru",
+    fraction: 2,
+    unsigned: true
+  }
+})
+```
+<!-- tabs:end -->
+
+?> Under the hood Maska uses [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) for number formatting.
+
+
+## Dynamic masks
+
+Pass `mask` as **array** or **function** to make it dynamic:
+
+- With **array** a suitable mask will be chosen by length (smallest first)
+- With **function** you can select mask with custom logic using value
+
+```js
+new MaskInput("input", {
+  mask: (value: string) => value.startsWith('1') ? '#-#' : '##-##'
+})
+```
diff --git a/docs/v3/svelte.md b/docs/v3/svelte.md
new file mode 100644
index 0000000..639259c
--- /dev/null
+++ b/docs/v3/svelte.md
@@ -0,0 +1,61 @@
+# Usage with Svelte
+
+## Installation
+
+You can install Maska with following command:
+
+```sh
+npm install @maskajs/svelte@3
+```
+
+And then use it in your `.svelte` component:
+
+```svelte
+import { maska } from '@maskajs/svelte'
+
+<input use:maska data-maska="#-#" />
+```
+
+
+## Action signature
+
+Maska provides simple Svelte action for use with input:
+
+```html
+<input use:maska={options}>
+```
+
+- `options` is object with default options
+
+
+## Minimal example
+
+Apply `maska` action to the input along with `data-maska` attribite:
+
+```svelte
+<script>
+import { maska } from '@maskajs/svelte'
+</script>
+
+<input use:maska data-maska="#-#">
+```
+
+
+## Set mask options
+
+To set default [options](/options) for the mask, pass options via **directive value**:
+
+```svelte
+<script>
+import { maska } from '@maskajs/svelte'
+
+const options = {
+  mask: "#-#",
+  eager: true
+}
+</script>
+
+<input use:maska={options} data-maska-reversed>
+```
+
+You can override default options with `data-maska-` attributes on the input. In the example above we set **eager** mode using options and **reversed** mode using `data-maska-reversed` attribute.
diff --git a/docs/v3/tokens.md b/docs/v3/tokens.md
new file mode 100644
index 0000000..25736d1
--- /dev/null
+++ b/docs/v3/tokens.md
@@ -0,0 +1,91 @@
+# Tokens
+
+## Default tokens
+
+There are 3 tokens defined by default:
+
+```js
+{
+  '#': { pattern: /[0-9]/ },       // digits
+  '@': { pattern: /[a-zA-Z]/ },    // letters
+  '*': { pattern: /[a-zA-Z0-9]/ }, // letters & digits
+}
+```
+
+?> Use `!` before token to escape symbol. For example `!#` will render `#` instead of a digit.
+
+
+## Custom tokens
+
+Add custom tokens via `data-maska-tokens` attribute or by `tokens` option:
+
+<!-- tabs:start -->
+### **By data-attributes**
+
+When using `data-maska-tokens`, there are two possible formats:
+
+- **JSON form** should be a valid JSON-string (but can use both single and double quotes) with pattern in a string format without delimiters
+- **Simple form** should be a string in format: `T:P:M|...` where:
+  - `T` is token
+  - `P` is pattern in string form
+  - `M` is optional modifier (see below)
+  - `|` is separator for multiple tokens
+
+```html
+<input data-maska="Z-Z" data-maska-tokens="{ 'Z': { 'pattern': '[A-Z]' }}">
+<input data-maska="Z-Z" data-maska-tokens="Z:[A-Z]">
+<input data-maska="Z-z" data-maska-tokens="Z:[A-Z]|z:[a-z]:multiple">
+```
+
+?> You can’t set the `transform` function for a token using `data-maska-tokens` attribute.
+If you need to do this, you should use the `tokens` option instead.
+
+### **By option**
+
+```js
+new MaskInput("[data-maska]", {
+  mask: "A-A",
+  tokens: {
+    A: { pattern: /[A-Z]/, transform: (chr: string) => chr.toUpperCase() }
+  }
+})
+```
+
+!> When using `tokens` option, pattern should be a valid regular expression object.
+<!-- tabs:end -->
+
+
+## Token modifiers
+
+Every token can have a modifier, for example:
+
+```js
+{
+  0: { pattern: /[0-9]/, optional: true },
+  9: { pattern: /[0-9]/, repeated: true },
+}
+```
+
+- `optional` for optional token
+- `multiple` for token that can match multiple characters till the next token starts
+- `repeated` for token that should be repeated. This token will match only one character, but the token itself (or group of such tokens) can be repeated any number of times
+
+| Modifier   | Example usage    | Mask                               | Tokens
+| ---        | ---              | ---                                | ---
+| `optional` | IP address       | `#00.#00.#00.#00`                  | `0:[0-9]:optional`
+| `multiple` | CARDHOLDER NAME  | `A A`                              | `A:[A-Z]:multiple`
+| `repeated` | Money (1 234,56) | `9 99#,##` <small>reversed</small> | `9:[0-9]:repeated`
+
+
+## Transform tokens
+
+For custom tokens you can define `transform` function, applied to a character before masking.
+For example, transforming letters to uppercase on input:
+
+```js
+{
+  A: { pattern: /[A-Z]/, transform: (chr: string) => chr.toUpperCase() }
+}
+```
+
+?> You can also use [hooks](/hooks) for transforming whole value before/after masking.
diff --git a/docs/v3/upgrade.md b/docs/v3/upgrade.md
new file mode 100644
index 0000000..831ca83
--- /dev/null
+++ b/docs/v3/upgrade.md
@@ -0,0 +1,76 @@
+# Upgrade from v2
+
+## New package for Vue
+
+Maska v2 was a universal package for both vanilla JS and Vue version. Maska v3 is separated to several different packages:
+
+- package `maska` is for vanilla version
+- package `@maskajs/vue` is for Vue version
+
+If you used Maska with Vue you need to delete `maska` package and install `@maskajs/vue` package.
+
+?> If you used Maska without a framework, just upgrade package to `maska@3` version.
+
+## New directive format
+
+### Bind value
+
+To bind a masked value with Maska v2 you used the **directive value** with a bound variable as an object:
+
+```vue
+<script setup>
+const boundObject = reactive({
+  masked: '',
+  unmasked: '',
+  completed: false
+})
+</script>
+
+<template>
+<input v-maska="boundObject">
+</template>
+```
+
+With v3, you need to use a **directive argument** and (optionally) a **directive modifier**:
+
+```vue
+<script setup>
+const boundobject = ref('')
+</script>
+
+<template>
+<input v-maska:boundobject.unmasked>
+</template>
+```
+
+### Mask options
+
+To pass mask options with v2 you have used the **directive argument**:
+
+```vue
+<script setup>
+const options = reactive({
+  mask: "#-#",
+  eager: true
+})
+</script>
+
+<template>
+<input v-maska:[options]>
+</template>
+```
+
+With v3, you need to use for this a **directive value**:
+
+```vue
+<script setup>
+const options = reactive({
+  mask: "#-#",
+  eager: true
+})
+</script>
+
+<template>
+  <input v-maska="options">
+</template>
+```
diff --git a/docs/v3/vanilla.md b/docs/v3/vanilla.md
new file mode 100644
index 0000000..611bc36
--- /dev/null
+++ b/docs/v3/vanilla.md
@@ -0,0 +1,116 @@
+# Usage without a framework
+
+## Installation
+
+<!-- tabs:start -->
+### **With NPM**
+
+```sh
+npm install maska@3
+```
+
+And then import it in your code:
+
+```js
+import { Mask, MaskInput } from 'maska'
+
+new MaskInput("[data-maska]") // for masked input
+const mask = new Mask({ mask: "#-#" }) // for programmatic use
+```
+
+### **From CDN / UMD**
+
+You can use Maska directly from CDN with simple script tag. Library API will be exposed on the global `Maska` object:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/maska@3/dist/maska.umd.js"></script>
+<script>
+  const { Mask, MaskInput } = Maska
+
+  new MaskInput("[data-maska]") // for masked input
+  const mask = new Mask({ mask: "#-#" }) // for programmatic use
+</script>
+```
+
+### **From CDN / ES**
+
+For modern browsers you can use ES modules build with (optional) [import maps](https://caniuse.com/import-maps):
+
+```html
+<script type="importmap">
+  {
+    "imports": {
+      "maska": "https://cdn.jsdelivr.net/npm/maska@3/dist/maska.mjs"
+    }
+  }
+</script>
+<script type="module">
+  import { Mask, MaskInput } from 'maska'
+
+  new MaskInput("[data-maska]") // for masked input
+  const mask = new Mask({ mask: "#-#" }) // for programmatic use
+</script>
+```
+
+?> Notice that we are using `<script type="module">` in this case.
+<!-- tabs:end -->
+
+
+## Minimal example
+
+Add to your input element `data-maska` attribute:
+
+```html
+<input data-maska="#-#">
+```
+
+Then import and initialize `MaskInput`, passing input element(s) or `querySelector` expression as first argument:
+
+```js
+import { MaskInput } from "maska"
+
+// init with query selector
+new MaskInput("[data-maska]")
+
+// or with element
+const input = document.querySelector('[data-maska]')
+new MaskInput(input)
+```
+
+
+## Set mask options
+
+Usually you set mask via `data-maska` attribute. But you can pass mask and other [options](/options) via second argument. It will be a default options that can be overriden by `data-maska-` attributes:
+
+```js
+new MaskInput(input, { mask: "#-#" })
+```
+
+## Programmatic use
+
+You can use mask function programmatically by importing `Mask` class.
+There are three methods available:
+
+- `masked(value)` returns masked version of given value
+- `unmasked(value)` returns unmasked version of given value
+- `completed(value)` returns `true` if given value makes mask completed
+
+```js
+import { Mask } from "maska"
+
+const mask = new Mask({ mask: "#-#" })
+
+mask.masked("12") // = 1-2
+mask.unmasked("12") // = 12
+mask.completed("12") // = true
+```
+
+
+## Destroy mask
+
+To destroy mask use `destroy()` method:
+
+```js
+const mask = new MaskInput(input)
+mask.destroy()
+```
diff --git a/docs/v3/vue.md b/docs/v3/vue.md
new file mode 100644
index 0000000..e831426
--- /dev/null
+++ b/docs/v3/vue.md
@@ -0,0 +1,252 @@
+# Usage with Vue
+
+## Installation
+
+<!-- tabs:start -->
+### **With NPM**
+
+```sh
+npm install @maskajs/vue@3
+```
+
+And then import it in your `.vue` component:
+
+```js
+import { vMaska } from '@maskajs/vue'
+```
+
+### **From CDN / UMD**
+
+You can use Maska directly from CDN with simple script tag. Library API will be exposed on the global `Maska` object:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@maskajs/vue@3/dist/maska.umd.js"></script>
+<script>
+  const { vMaska } = Maska
+
+  Vue.createApp({ directives: { maska: vMaska }}).mount('#app')
+</script>
+```
+
+### **From CDN / ES**
+
+For modern browsers you can use ES modules build with (optional) [import maps](https://caniuse.com/import-maps):
+
+```html
+<script type="importmap">
+  {
+    "imports": {
+      "maska": "https://cdn.jsdelivr.net/npm/@maskajs/vue@3/dist/maska.mjs"
+    }
+  }
+</script>
+<script type="module">
+  import { vMaska } from 'maska'
+
+  Vue.createApp({ directives: { maska: vMaska }}).mount('#app')
+</script>
+```
+
+?> Notice that we are using `<script type="module">` in this case.
+<!-- tabs:end -->
+
+
+## Directive signature
+
+Maska provides custom Vue directive for use with input:
+
+```html
+<input v-maska:argument.modifier="options">
+```
+
+- `argument` is a name of the bound variable (see example below)
+- `modifier` modifier for bound variable value, could be one of:
+  - `masked` (default): variable will get a masked value (as in v-model)
+  - `unmasked`: variable will get an unmasked (raw) value
+  - `completed`: variable will be boolean, showing that mask is completed
+- `options` is object with default options
+
+## Minimal example
+
+Import `vMaska` directive and apply it to the input along with `data-maska` attribite:
+
+<!-- tabs:start -->
+### **Composition API**
+
+```vue
+<script setup>
+import { vMaska } from "maska"
+</script>
+
+<template>
+  <input v-maska data-maska="#-#">
+</template>
+```
+
+### **Options API**
+
+```vue
+<script>
+import { vMaska } from "maska"
+
+export default {
+  directives: { maska: vMaska }
+}
+</script>
+
+<template>
+  <input v-maska data-maska="#-#">
+</template>
+```
+<!-- tabs:end -->
+
+
+## Set mask options
+
+To set default [options](/options) for the mask, pass options via **directive value**:
+
+<!-- tabs:start -->
+### **Composition API**
+
+```vue
+<script setup>
+import { reactive } from "vue"
+import { vMaska } from "maska"
+
+// could be plain object too
+const options = reactive({
+  mask: "#-#",
+  eager: true
+})
+</script>
+
+<template>
+  <input v-maska="options" data-maska-reversed>
+</template>
+```
+
+### **Options API**
+
+```vue
+<script>
+import { vMaska } from "maska"
+
+export default {
+  directives: { maska: vMaska },
+  data: () => ({
+    options: {
+      mask: "#-#",
+      eager: true
+    }
+  })
+}
+</script>
+
+<template>
+  <input v-maska="options" data-maska-reversed>
+</template>
+```
+<!-- tabs:end -->
+
+You can override default options with `data-maska-` attributes on the input. In the example above we set **eager** mode using options and **reversed** mode using `data-maska-reversed` attribute.
+
+?> Sometimes using directive value is the only way to configure a mask, because you don't have access to the input element: for example, when using Maska with Vuetify.
+
+
+## Bind value
+
+To get masked value you can use standard `v-model` directive on the input. But if you want to access an unmasked (raw) value or get to know when mask is completed, you can use **directive argument** and (optionally) **directive modifier**:
+
+<!-- tabs:start -->
+### **Composition API**
+
+```vue
+<script setup>
+import { ref } from "vue"
+import { vMaska } from "maska"
+
+const maskedvalue = ref('')
+const unmaskedvalue = ref('')
+</script>
+
+<template>
+  <input v-maska:unmaskedvalue.unmasked data-maska="#-#" v-model="maskedvalue">
+
+  Masked value: {{ maskedvalue }}
+  Unmasked value: {{ unmaskedvalue }}
+</template>
+```
+
+### **Options API**
+
+```vue
+<script>
+import { vMaska } from "maska"
+
+export default {
+  directives: { maska: vMaska },
+  data: () => ({
+    maskedvalue: "",
+    unmaskedvalue: ""
+  })
+}
+</script>
+
+<template>
+  <input v-maska:unmaskedvalue.unmasked data-maska="#-#" v-model="maskedvalue">
+
+  Masked value: {{ maskedvalue }}
+  Unmasked value: {{ unmaskedvalue }}
+</template>
+```
+<!-- tabs:end -->
+
+!> For correct work as directive argument, name of the bounded variable should be in **lower case**. So instead of `unmaskedValue` use `unmaskedvalue` or `unmasked_value`.
+
+
+## Usage with Nuxt
+
+To use Maska in Nuxt 3 you can make a simple plugin. Create file `maska.ts` in `plugins` folder:
+
+```js
+import { vMaska } from "maska"
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.directive("maska", vMaska)
+})
+```
+
+Now you can use v-maska directive in your app:
+
+```html
+<input v-model="value" v-maska data-maska="#-#" />
+```
+
+
+## Global registration of directive
+
+<!-- tabs:start -->
+### **Vue 3**
+
+```js
+import { createApp } from "vue"
+import { vMaska } from "maska"
+
+createApp({}).directive("maska", vMaska)
+
+// or in case of CDN load
+Vue.createApp({}).directive("maska", Maska.vMaska)
+```
+
+### **Vue 2**
+
+```js
+import Vue from "vue"
+import { vMaska } from "maska"
+
+Vue.directive("maska", vMaska)
+
+// or in case of CDN load
+Vue.directive("maska", Maska.vMaska)
+```
+<!-- tabs:end -->
diff --git a/package.json b/package.json
index 574898b..9f0acdb 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,6 @@
 {
   "private": true,
   "workspaces": [
-    "packages/*",
-    "packages/docs"
+    "packages/*"
   ]
 }
diff --git a/packages/docs/docs/v2/README.md b/packages/docs/docs/v2/README.md
deleted file mode 100644
index 7057e3d..0000000
--- a/packages/docs/docs/v2/README.md
+++ /dev/null
@@ -1,572 +0,0 @@
-<object data="/maska.svg" type="image/svg+xml" style="max-width: 90%"></object>
-
----
-
-# Maska {{versionLabel}}
-
-Do you like **Maska**? Please support me via [Boosty](https://boosty.to/beholdr).
-
-# Live Demo
-
-Here are several examples of basic masks that you could create with **Maska**.
-This demo is interactive: feel free to edit the examples.
-
-<div id="demo-app"></div>
-<script type="module" src="../dist/demo_v2.js"></script>
-
-# Install
-
-<!-- tabs:start -->
-## **Via npm**
-
-```
-npm i maska
-```
-
-## **CDN / Global build**
-
-You can use **Maska** directly from CDN with simple script tag.
-Library API will be exposed on the global `Maska` object:
-
-``` html
-<script src="https://cdn.jsdelivr.net/npm/maska@2/dist/maska.umd.js"></script>
-<script>
-  const { Mask, MaskInput, vMaska } = Maska
-
-  new MaskInput("[data-maska]") // for masked input
-  const mask = new Mask({ mask: "#-#" }) // for programmatic use
-  Vue.createApp({ directives: { maska: vMaska }}).mount('#app') // Vue directive
-</script>
-```
-
-## **CDN / ES modules**
-
-For modern browsers you can use ES modules build with (optional) [import maps](https://caniuse.com/import-maps):
-
-``` html
-<script type="importmap">
-  {
-    "imports": {
-      "maska": "https://cdn.jsdelivr.net/npm/maska@2/dist/maska.js"
-    }
-  }
-</script>
-<script type="module">
-  import { Mask, MaskInput, vMaska } from 'maska'
-
-  new MaskInput("[data-maska]") // for masked input
-  const mask = new Mask({ mask: "#-#" }) // for programmatic use
-  Vue.createApp({ directives: { maska: vMaska }}).mount('#app') // Vue directive
-</script>
-```
-
-Notice that we are using `<script type="module">` in this case.
-<!-- tabs:end -->
-
-# Usage
-
-**Maska** library consists of three main components:
-
-- `Mask` class to mask string values
-- `MaskInput` class to apply `Mask` processing to `<input>`
-- `vMaska` directive to simplify using of library within Vue components
-
-<!-- tabs:start -->
-## **Vanilla JS**
-
-Start with simple input element and `data-maska` attribute:
-
-``` html
-<input data-maska="#-#">
-```
-
-Then import and init `MaskInput`, passing input element(s) or `querySelector` expression as first argument:
-
-``` ts
-import { MaskInput } from "maska"
-new MaskInput("[data-maska]")
-```
-
-Usually you set mask via `data-maska` attribute. But you can pass mask and other [options](#options) via second argument (it will be a default options that can be overriden by `data-maska-` attributes):
-
-``` ts
-new MaskInput("input", { mask: "#-#" })
-```
-
-To destroy mask use `destroy()` method:
-
-``` ts
-const mask = new MaskInput(...)
-mask.destroy()
-```
-
-## **Vue**
-
-Import `vMaska` directive and apply it to the input along with `data-maska` attribite:
-
-<!-- tabs:start -->
-### **Composition API**
-
-``` html
-<script setup>
-import { vMaska } from "maska"
-</script>
-
-<template>
-  <input v-maska data-maska="#-#">
-</template>
-```
-
-### **Options API**
-
-``` html
-<script>
-import { vMaska } from "maska"
-
-export default {
-  directives: { maska: vMaska }
-}
-</script>
-
-<template>
-  <input v-maska data-maska="#-#">
-</template>
-```
-<!-- tabs:end -->
-
-### Bind value
-
-To get masked value you can use standard `v-model` directive.
-But if you want to access an unmasked (raw) value, you can pass a variable as `v-maska` directive value.
-This variable should be a reactive object that will contains three fields after mask processing:
-
-- `masked`: string with masked result
-- `unmasked`: string with unmasked result
-- `completed`: boolean flag indicating that mask is completed
-
-<!-- tabs:start -->
-### **Composition API**
-
-``` html
-<script setup>
-import { reactive, ref } from "vue"
-import { vMaska } from "maska"
-
-const maskedValue = ref('')
-const boundObject = reactive({})
-</script>
-
-<template>
-  <input v-maska="boundObject" v-model="maskedValue">
-
-  Masked value: {{ maskedValue }} or {{ boundObject.masked }}
-  Unmasked value: {{ boundObject.unmasked }}
-  <span v-if="boundObject.completed">✅ Mask completed</span>
-</template>
-```
-
-### **Options API**
-
-``` html
-<script>
-import { vMaska } from "maska"
-
-export default {
-  directives: { maska: vMaska },
-  data: () => ({
-    maskedValue: "",
-    boundObject: {
-      masked: "",
-      unmasked: "",
-      completed: false
-    }
-  })
-}
-</script>
-
-<template>
-  <input v-maska="boundObject" v-model="maskedValue">
-
-  Masked value: {{ maskedValue }} or {{ boundObject.masked }}
-  Unmasked value: {{ boundObject.unmasked }}
-  <span v-if="boundObject.completed">✅ Mask completed</span>
-</template>
-```
-<!-- tabs:end -->
-
-### Set mask options
-
-To set default options for the mask you could use directive *argument* (part after `v-maska:`). It can be plain or reactive object and should be wrapped in `[]`:
-
-<!-- tabs:start -->
-### **Composition API**
-
-``` html
-<script setup>
-import { reactive } from "vue"
-import { vMaska } from "maska"
-
-const options = reactive({
-  mask: "#-#",
-  eager: true
-})
-</script>
-
-<template>
-  <input v-maska:[options]>
-</template>
-```
-
-### **Options API**
-
-``` html
-<script>
-import { vMaska } from "maska"
-
-export default {
-  directives: { maska: vMaska },
-  data: () => ({
-    options: {
-      mask: "#-#",
-      eager: true
-    }
-  })
-}
-</script>
-
-<template>
-  <input v-maska:[options]>
-</template>
-```
-<!-- tabs:end -->
-
-?> Please see [issue#149](https://github.com/beholdr/maska/issues/149): options object should be assigned in the current file.
-
-You can set options and bind to an object at the same time:
-
-``` html
-<input v-maska:[options]="boundObject">
-```
-
-#### Global registration of directive
-
-<!-- tabs:start -->
-### **Vue 3**
-
-``` ts
-import { createApp } from "vue"
-import { vMaska } from "maska"
-
-createApp({}).directive("maska", vMaska)
-
-// or in case of CDN load
-Vue.createApp({}).directive("maska", Maska.vMaska)
-```
-
-### **Vue 2**
-
-``` ts
-import Vue from "vue"
-import { vMaska } from "maska"
-
-Vue.directive("maska", vMaska)
-
-// or in case of CDN load
-Vue.directive("maska", Maska.vMaska)
-```
-<!-- tabs:end -->
-
-## **Nuxt 3**
-
-To use Maska in Nuxt 3 you can make a simple plugin. Create file `maska.ts` in `plugins` folder:
-
-``` ts
-import { vMaska } from "maska"
-
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.directive("maska", vMaska)
-})
-```
-
-Now you can use `v-maska` directive in your app:
-
-``` html
-<input v-model="value" v-maska data-maska="#-#" />
-```
-<!-- tabs:end -->
-
-# Options
-
-## `Mask` options
-
-Every option of `Mask` class can be set via `data-maska-` attributes or by passing on init.
-Options passed on init will be used as defaults and could be overriden by `data-maska-` attributes.
-
-<!-- tabs:start -->
-### **Description**
-
-- `mask / data-maska` — mask to apply (**string**, **array of strings** or **function**). If you pass empty string or `null` it will disable a mask
-- `tokens / data-maska-tokens` — custom tokens object
-- `tokensReplace / data-maska-tokens-replace` — if custom tokens should replace default tokens (if not set, they will merge)
-- `eager / data-maska-eager` — eager mode will show static characters before you type them, e.g. when you type `1`, eager mask `#-#` will show `1-` and non-eager will show `1`
-- `reversed / data-maska-reversed` — in reversed mode mask will grow backwards, e.g. for numbers
-
-### **Types**
-``` ts
-interface MaskOptions {
-  mask?: MaskType
-  tokens?: MaskTokens
-  tokensReplace?: boolean
-  eager?: boolean
-  reversed?: boolean
-}
-```
-<!-- tabs:end -->
-
-``` html
-<input data-maska="A-A" data-maska-tokens="A:[A-Z]" data-maska-eager>
-```
-
-## `MaskInput` options
-
-`MaskInput` options could be set only by passing second argument on init.
-Along with `MaskInput` options you could pass any `Mask` options as well (or set them via `data-maska-` attributes).
-
-<!-- tabs:start -->
-### **Description**
-
-- `onMaska` — [callback](#events) on every mask processing
-- `preProcess` — [hook](#hooks) before mask processing
-- `postProcess` — [hook](#hooks) after mask processing
-
-### **Types**
-``` ts
-interface MaskInputOptions extends MaskOptions {
-  onMaska?: (detail: MaskaDetail) => void
-  preProcess?: (value: string) => string
-  postProcess?: (value: string) => string
-}
-```
-<!-- tabs:end -->
-
-``` ts
-new MaskInput("input", {
-  mask: "#-#",
-  reversed: true,
-  onMaska: (detail: MaskaDetail) => console.log(detail.completed)
-})
-```
-
-# Tokens
-
-There are 3 tokens defined by default:
-
-``` ts
-{
-  '#': { pattern: /[0-9]/ },       // digits
-  '@': { pattern: /[a-zA-Z]/ },    // letters
-  '*': { pattern: /[a-zA-Z0-9]/ }, // letters & digits
-}
-```
-
-?> Use `!` before token to escape symbol. For example `!#` will render `#` instead of a digit.
-
-## Custom tokens
-
-Add custom tokens via `data-maska-tokens` attribute or by `tokens` option:
-
-<!-- tabs:start -->
-### **By data-attr**
-
-When using `data-maska-tokens`, there are two possible formats:
-
-- **Full form** should be a valid JSON-string (but can use both single and double quotes) with pattern in string format without delimiters
-- **Simple form** should be a string in format: `T:P:M|T:P:M` where:
-  - `T` is token
-  - `P` is pattern in string form
-  - `M` is optional modifier (see below)
-  - `|` is separator for multiple tokens
-
-``` html
-<input data-maska="Z-Z" data-maska-tokens="{ 'Z': { 'pattern': '[A-Z]' }}">
-<input data-maska="Z-Z" data-maska-tokens="Z:[A-Z]">
-<input data-maska="Z-z" data-maska-tokens="Z:[A-Z]|z:[a-z]:multiple">
-```
-
-?> You can’t set `transform` function for token via `data-maska-tokens`.
-If you need this, use `tokens` option instead.
-
-### **By option**
-
-When using `tokens` option, pattern should be a valid regular expression object:
-
-``` ts
-new MaskInput("[data-maska]", {
-  mask: "A-A",
-  tokens: {
-    A: { pattern: /[A-Z]/, transform: (chr: string) => chr.toUpperCase() }
-  }
-})
-```
-<!-- tabs:end -->
-
-## Token modifiers
-
-Every token can have a modifier, for example:
-
-``` ts
-{
-  0: { pattern: /[0-9]/, optional: true },
-  9: { pattern: /[0-9]/, repeated: true },
-}
-```
-
-- `optional` for optional token
-- `multiple` for token that can match multiple characters till the next token starts
-- `repeated` for tokens that should be repeated. This token will match only one character, but the token itself (or group of such tokens) can be repeated any number of times
-
-| Modifier   | Example usage    | Mask                               | Tokens
-| ---        | ---              | ---                                | ---
-| `optional` | IP address       | `#00.#00.#00.#00`                  | `0:[0-9]:optional`
-| `multiple` | CARDHOLDER NAME  | `A A`                              | `A:[A-Z]:multiple`
-| `repeated` | Money (1 234,56) | `9 99#,##` <small>reversed</small> | `9:[0-9]:repeated`
-
-## Transform tokens
-
-For custom tokens you can define `transform` function, applied to a character before masking.
-For example, transforming letters to uppercase on input:
-
-``` ts
-{
-  A: { pattern: /[A-Z]/, transform: (chr: string) => chr.toUpperCase() }
-}
-```
-
-?> You can also use [hooks](#hooks) for transforming whole value before/after masking.
-
-# Dynamic masks
-
-Pass `mask` as **array** or **function** to make it dynamic:
-
-- With **array** a suitable mask will be chosen by length (smallest first)
-- With **function** you can select mask with custom logic using value
-
-``` ts
-new MaskInput("input", {
-  mask: (value: string) => value.startsWith('1') ? '#-#' : '##-##'
-})
-```
-
-# Hooks
-
-Use hooks for transforming whole value:
-
-- `preProcess` hook called before mask processing
-- `postProcess` hook called after mask processing, but before setting input's value
-
-For example, you can use it to check for a maximum length of masked string:
-
-``` ts
-new MaskInput("input", {
-  postProcess: (value: string) => value.slice(0, 5)
-})
-```
-
-# Events
-
-There are two events you can subscribe to get the masking result:
-
-- `maska` event
-- `input` event
-
-They are essentially the same, but the `input` event could be fired by any input logic, and the `maska` event is library specific.
-
-<!-- tabs:start -->
-## **Vanilla JS**
-
-``` ts
-document.querySelector("input").addEventListener("maska", onMaska)
-```
-
-## **Vue**
-
-``` html
-<input v-maska data-maska="#-#" @maska="onMaska" />
-```
-<!-- tabs:end -->
-
-Both events contains `detail` property with given structure:
-
-<!-- tabs:start -->
-### **Description**
-
-- `masked`: masked value
-- `unmasked`: unmasked value
-- `completed`: flag that current mask is completed
-
-### **Types**
-``` ts
-interface MaskaDetail {
-  masked: string
-  unmasked: string
-  completed: boolean
-}
-```
-<!-- tabs:end -->
-
-``` ts
-const onMaska = (event: CustomEvent<MaskaDetail>) => {
-  console.log({
-    masked: event.detail.masked,
-    unmasked: event.detail.unmasked,
-    completed: event.detail.completed
-  })
-}
-```
-
-Alternatively, you can pass callback function directly with `MaskInput` option `onMaska`:
-
-<!-- tabs:start -->
-### **Vanilla JS**
-``` ts
-new MaskInput("input", {
-  onMaska: (detail: MaskaDetail) => console.log(detail.completed)
-})
-```
-
-### **Vue**
-``` html
-<script setup>
-const options = {
-  onMaska: (detail: MaskaDetail) => console.log(detail.completed)
-}
-</script>
-
-<template>
-  <input v-maska:[options]>
-</template>
-```
-<!-- tabs:end -->
-
-# Programmatic use
-
-You can use mask function programmatically by importing `Mask` class.
-There are three methods available:
-
-- `masked(value)` returns masked version of given value
-- `unmasked(value)` returns unmasked version of given value
-- `completed(value)` returns `true` if given value makes mask complete
-
-``` ts
-import { Mask } from "maska"
-
-const mask = new Mask({ mask: "#-#" })
-
-mask.masked("12") // = 1-2
-mask.unmasked("12") // = 12
-mask.completed("12") // = true
-```
-
-# Known issues
-
-When used on input of type `number`, could have inconsistent behavior in different browsers. Use attribute `inputmode="numeric"` with `type="text"` if you need a numeric keyboard.
diff --git a/packages/docs/package.json b/packages/docs/package.json
deleted file mode 100644
index 97a2c45..0000000
--- a/packages/docs/package.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "private": true,
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "test": "echo 'No tests, skip'",
-    "test:coverage": "echo 'No tests, skip'",
-    "lint": "echo 'No linting, skip'",
-    "lint:fix": "echo 'No linting, skip'",
-    "version": "echo 'No version, skip'"
-  },
-  "devDependencies": {
-    "@types/node": "^20.12.7",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.8",
-    "vue": "^3.2.45",
-    "vue-live": "^2.5.4"
-  }
-}
diff --git a/packages/docs/src/App.vue b/packages/docs/src/App.vue
deleted file mode 100644
index 872ceed..0000000
--- a/packages/docs/src/App.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-
-import { VueLive } from 'vue-live'
-import 'vue-live/style.css'
-
-const props = defineProps(['examples'])
-
-const selectedExample = ref(0)
-const code = computed(() => props.examples[selectedExample.value].code)
-</script>
-
-<template>
-  <div>
-    <div class="demo-select">
-      <label for="demo-example-select">Choose mask example:</label>
-      <select v-model="selectedExample" id="demo-example-select">
-        <option v-for="(example, idx) in examples" :value="idx">
-          {{ example.label }}
-        </option>
-      </select>
-    </div>
-    <VueLive :code="code" />
-  </div>
-</template>
-
-<style>
-.demo-select {
-  border: 1px solid var(--docsifytabs-border-color);
-  padding: 1rem var(--docsifytabs-content-padding) 1.5rem;
-  border-bottom: none;
-  border-radius: 5px 5px 0 0;
-}
-.demo-select > label {
-  display: block;
-  margin-bottom: 4px;
-  color: var(--search-input-placeholder-color);
-}
-.demo-select > select {
-  width: 100%;
-  padding: 7px;
-  border-radius: 4px;
-  color: var(--search-input-color);
-  border: 1px solid var(--search-input-border-color);
-  background-color: var(--search-input-background-color);
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
-  appearance: none;
-  background-position: right 0.5rem center;
-  background-repeat: no-repeat;
-  background-size: 1.5em 1.5em;
-}
-
-.VueLive-container {
-  border: 1px solid var(--docsifytabs-border-color);
-  margin: var(--docsifytabs-margin);
-  margin-top: 0;
-  border-radius: 0 0 5px 5px;
-}
-.VueLive-container .VueLive-editor {
-  padding: 2.3rem var(--docsifytabs-content-padding);
-  background-color: var(--code-theme-background);
-  border-radius: 0 0 0 5px;
-  width: 100%;
-  position: relative;
-}
-.VueLive-container .VueLive-editor::after {
-  content: 'Сode';
-  position: absolute;
-  top: 0.75em;
-  right: 0.75em;
-  opacity: 0.6;
-  color: inherit;
-  font-size: var(--font-size-s);
-  line-height: 1;
-}
-.VueLive-container .VueLive-editor .prism-editor__editor,
-.VueLive-container .VueLive-editor .prism-editor__textarea {
-  font-family: var(--code-font-family);
-}
-.VueLive-container .VueLivePreview {
-  padding: 2rem var(--docsifytabs-content-padding);
-  border-radius: 0 0 5px 0;
-  background-color: transparent;
-  position: relative;
-  width: 45%;
-}
-.VueLive-container .VueLivePreview::after {
-  content: 'Result';
-  position: absolute;
-  top: 0.75em;
-  right: var(--docsifytabs-content-padding);
-  opacity: 0.6;
-  color: inherit;
-  font-size: var(--font-size-s);
-  line-height: 1;
-}
-.VueLive-container .VueLivePreview input {
-  font-size: var(--modular-scale-1);
-  padding: 8px 10px;
-  border: 1px solid var(--search-input-border-color);
-  border-radius: 4px;
-  background-color: var(--search-input-background-color);
-  color: var(--search-input-color);
-  width: 100%;
-  max-width: 100%;
-}
-
-@media screen and (max-width: 999px) {
-  .VueLive-container {
-    flex-direction: column;
-  }
-  .VueLive-container .VueLive-editor,
-  .VueLive-container .VueLivePreview {
-    width: 100%;
-  }
-}
-</style>
diff --git a/packages/docs/src/index.ts b/packages/docs/src/index.ts
deleted file mode 100644
index f04cbe2..0000000
--- a/packages/docs/src/index.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { createApp } from 'vue'
-
-import { vMaska } from '../../vue/src'
-import App from './App.vue'
-
-const examples = [
-  {
-    label: 'Simple mask',
-    code: `<input v-maska data-maska="#-#" value="12">`
-  },
-  {
-    label: 'Phone mask',
-    code: `<input v-maska data-maska="+1 ### ###-##-##">`
-  },
-  {
-    label: 'HEX-color',
-    code: `<input\n  v-maska\n  data-maska="!#HHHHHH"\n  data-maska-tokens="H:[0-9a-fA-F]"\n>`
-  },
-  {
-    label: 'IP address with optional digits',
-    code: `<input\n  v-maska\n  data-maska="#00.#00.#00.#00"\n  data-maska-tokens="0:[0-9]:optional"\n>`
-  },
-  {
-    label: 'Dynamic mask: CPF/CNPJ',
-    code: `<input\n  v-maska\n  data-maska="[\n    '###.###.###-##',\n    '##.###.###/####-##'\n  ]"\n>`
-  },
-  {
-    label: 'Cardholder name: via hook',
-    code: `const options = {\n  preProcess: val => val.toUpperCase()\n}\n\n<input\n  v-maska="options"\n  data-maska="A A"\n  data-maska-tokens="A:[A-Z]:multiple"\n>`
-  },
-  {
-    label: 'Cardholder name: via token transform',
-    code: `const options = {\n  tokens: {\n    A: {\n      pattern: /[A-Z]/,\n      multiple: true,\n      transform: chr => chr.toUpperCase()\n    }\n  }\n}\n\n<input v-maska="options" data-maska="A A">`
-  },
-  {
-    label: 'Year: with current year as a limit',
-    code: `const options = {\n  postProcess: val => {\n    const max = "" + new Date().getFullYear()\n    return val > max ? max : val\n  }\n}\n\n<input v-maska="options" data-maska="####">`
-  },
-  {
-    label: 'Money format: simple',
-    code: `<input\n  v-maska\n  data-maska="0.99"\n  data-maska-tokens="0:\\d:multiple|9:\\d:optional"\n>`
-  },
-  {
-    label: 'Money format: full via hooks',
-    code: `const options = {\n  preProcess: val => val.replace(/[$,]/g, ''),\n  postProcess: val => {\n    if (!val) return ''\n\n    const sub = 3 - (val.includes('.') ? val.length - val.indexOf('.') : 0)\n\n    return Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency: 'USD'\n    }).format(val)\n      .slice(0, sub ? -sub : undefined)\n  }\n}\n\n<input\n  v-maska="options"\n  data-maska="0.99"\n  data-maska-tokens="0:\\d:multiple|9:\\d:optional"\n>`
-  },
-  {
-    label: 'Reversed number format with thousand separators',
-    code: `<input\n  v-maska\n  data-maska="9 99#.##"\n  data-maska-tokens="9:[0-9]:repeated"\n  data-maska-reversed\n>`
-  }
-]
-
-createApp(App, { examples })
-  .directive('maska', vMaska)
-  .mount('#demo-app')
diff --git a/packages/docs/src/v2/index.ts b/packages/docs/src/v2/index.ts
deleted file mode 100644
index 6e84e1b..0000000
--- a/packages/docs/src/v2/index.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { createApp } from 'vue'
-
-import App from '../App.vue'
-
-const examples = [
-  {
-    label: 'Simple mask',
-    code: `<input v-maska data-maska="#-#" value="12">`
-  },
-  {
-    label: 'Phone mask',
-    code: `<input v-maska data-maska="+1 ### ###-##-##">`
-  },
-  {
-    label: 'HEX-color',
-    code: `<input\n  v-maska\n  data-maska="!#HHHHHH"\n  data-maska-tokens="H:[0-9a-fA-F]"\n>`
-  },
-  {
-    label: 'IP address with optional digits',
-    code: `<input\n  v-maska\n  data-maska="#00.#00.#00.#00"\n  data-maska-tokens="0:[0-9]:optional"\n>`
-  },
-  {
-    label: 'Dynamic mask: CPF/CNPJ',
-    code: `<input\n  v-maska\n  data-maska="[\n    '###.###.###-##',\n    '##.###.###/####-##'\n  ]"\n>`
-  },
-  {
-    label: 'Cardholder name: via hook',
-    code: `const options = {\n  preProcess: val => val.toUpperCase()\n}\n\n<input\n  v-maska:[options]\n  data-maska="A A"\n  data-maska-tokens="A:[A-Z]:multiple"\n>`
-  },
-  {
-    label: 'Cardholder name: via token transform',
-    code: `const options = {\n  tokens: {\n    A: {\n      pattern: /[A-Z]/,\n      multiple: true,\n      transform: chr => chr.toUpperCase()\n    }\n  }\n}\n\n<input v-maska:[options] data-maska="A A">`
-  },
-  {
-    label: 'Year: with current year as a limit',
-    code: `const options = {\n  postProcess: val => {\n    const max = "" + new Date().getFullYear()\n    return val > max ? max : val\n  }\n}\n\n<input v-maska:[options] data-maska="####">`
-  },
-  {
-    label: 'Money format: simple',
-    code: `<input\n  v-maska\n  data-maska="0.99"\n  data-maska-tokens="0:\\d:multiple|9:\\d:optional"\n>`
-  },
-  {
-    label: 'Money format: full via hooks',
-    code: `const options = {\n  preProcess: val => val.replace(/[$,]/g, ''),\n  postProcess: val => {\n    if (!val) return ''\n\n    const sub = 3 - (val.includes('.') ? val.length - val.indexOf('.') : 0)\n\n    return Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency: 'USD'\n    }).format(val)\n      .slice(0, sub ? -sub : undefined)\n  }\n}\n\n<input\n  v-maska:[options]\n  data-maska="0.99"\n  data-maska-tokens="0:\\d:multiple|9:\\d:optional"\n>`
-  },
-  {
-    label: 'Reversed number format with thousand separators',
-    code: `<input\n  v-maska\n  data-maska="9 99#.##"\n  data-maska-tokens="9:[0-9]:repeated"\n  data-maska-reversed\n>`
-  }
-]
-
-createApp(App, { examples })
-  .directive('maska', Maska.vMaska)
-  .mount('#demo-app')
diff --git a/packages/docs/tsconfig.json b/packages/docs/tsconfig.json
deleted file mode 100644
index 5e10d92..0000000
--- a/packages/docs/tsconfig.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
-}
diff --git a/packages/docs/vite.config.mts b/packages/docs/vite.config.mts
deleted file mode 100644
index 58c26bd..0000000
--- a/packages/docs/vite.config.mts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-
-export default defineConfig({
-  base: '',
-  build: {
-    outDir: 'docs/dist',
-    cssCodeSplit: false,
-    rollupOptions: {
-      input: {
-        demo: 'src/index.ts',
-        demo_v2: 'src/v2/index.ts'
-      },
-      output: {
-        entryFileNames: '[name].js',
-        assetFileNames: '[name][extname]'
-      }
-    }
-  },
-  plugins: [vue()]
-})