persian-number-input 4.3.4 → 4.5.0

package/README.md

@@ -1,7 +1,8 @@
-# Persian Number Input
+# Persian Number Input — React Component for Farsi, Arabic & RTL Number Formatting
 
 [فارسی](./README.fa.md) | English
-A lightweight, powerful React library for handling Persian (Farsi) and Arabic number inputs with automatic digit conversion, formatting, and localization support.
+
+A lightweight React library for **Persian (Farsi) and Arabic number inputs** with automatic digit conversion, thousand-separator formatting, decimal precision, and full RTL support. No more manual conversion — users type in their native digits, your form receives clean English numbers.
 
 [![npm version](https://img.shields.io/npm/v/persian-number-input.svg)](https://www.npmjs.com/package/persian-number-input)
 [![npm downloads](https://img.shields.io/npm/dm/persian-number-input.svg)](https://www.npmjs.com/package/persian-number-input)
@@ -12,32 +13,37 @@ A lightweight, powerful React library for handling Persian (Farsi) and Arabic nu
 
 ---
 
-Experience the component in action with our interactive demo!
+## Why Persian Number Input?
 
-## 📊 Bundle Size
+Building forms for Persian or Arabic-speaking users comes with real challenges:
 
-This library is extremely lightweight:
+- Users naturally type `۱۲۳۴` — but your API expects `1234`
+- Standard `<input type="number">` doesn't support Persian or Arabic digits at all
+- Cursor jumps erratically when formatting thousand separators on the fly
+- Decimal handling differs across locales (`٫` vs `.`)
+- RTL inputs need right-aligned text and correct suffix placement
+
+This library solves all of these automatically:
 
 ```
-persian-number-input: ~1KB (minified + gzipped)
+User types:   ۱۲۳۴۵۶۷
+Displayed as: ۱,۲۳۴,۵۶۷
+Form receives: "1234567"
 ```
 
-![Bundle Size Comparison](./public/size.png)
-
 ---
 
 ## ✨ Features
 
-- 🔢 **Automatic Digit Conversion** - Seamlessly converts Persian (۰-۹) and Arabic (٠-٩) digits to English and vice versa
-- 🌍 **Multi-locale Support** - Built-in support for Persian (fa), Arabic (ar), and English (en)
-- 📊 **Number Formatting** - Automatic thousand separators with customizable characters
-- 💰 **Currency Ready** - Add prefixes, suffixes, and custom decimal separators
-- ⚡ **Lightweight** - Tiny bundle size with zero dependencies (except decimal.js for precision)
-- 🎯 **Type-Safe** - Full TypeScript support with complete type definitions
-- ♿ **Accessible** - Follows best practices for input accessibility
-- 🎨 **Customizable** - Extensive configuration options for any use case
-- 🔄 **Real-time Formatting** - Format numbers as users type with cursor position preservation
-- ✅ **Validation** - Built-in min/max value validation and decimal precision control
+- 🔢 **Automatic digit conversion** — Persian (۰-۹) and Arabic (٠-٩) to English and back
+- 🌍 **Multi-locale** — `fa` (Farsi/Persian), `ar` (Arabic), `en` (English)
+- 📊 **Thousand separator formatting** — customizable separator character and group size
+- 💰 **Currency-ready** — add prefix, suffix (e.g. تومان, ریال, ر.س), and custom decimal separator
+- ⚡ **~1KB gzipped** — zero extra dependencies, pure TypeScript
+- 🎯 **TypeScript** — full type definitions included
+- 🔄 **Cursor-position preservation** — no jump on re-format
+- ✅ **Min/max validation** — built-in range enforcement and decimal precision control
+- ♿ **Accessible** — follows WCAG input best practices
 
 ---
 
@@ -45,22 +51,18 @@ persian-number-input: ~1KB (minified + gzipped)
 
 ```bash
 npm install persian-number-input
-```
-
-```bash
+# or
 yarn add persian-number-input
-```
-
-```bash
+# or
 pnpm add persian-number-input
 ```
 
+> **Requirements:** React 16.8+, works with Next.js, Vite, CRA, and any React-based framework.
+
 ---
 
 ## 🎯 Quick Start
 
-### Basic Usage
-
 ```tsx
 import { PersianNumberInput } from "persian-number-input";
 
@@ -69,19 +71,19 @@ function App() {
     <PersianNumberInput
       initialValue={1234567}
       locale="fa"
-      onValueChange={(value) => console.log(value)}
+      onValueChange={(value) => console.log(value)} // "1234567"
     />
   );
 }
 ```
 
-**Output:** `۱,۲۳۴,۵۶۷`
+Output displayed to user: `۱,۲۳۴,۵۶۷`
 
 ---
 
 ## 📚 Usage Examples
 
-### Currency Input (Persian Toman)
+### Persian Toman currency input
 
 ```tsx
 <PersianNumberInput
@@ -94,11 +96,27 @@ function App() {
 />
 ```
 
-**Output:** `۵,۰۰۰,۰۰۰ تومان`
+Displayed: `۵,۰۰۰,۰۰۰ تومان`
 
 ---
 
-### Decimal Numbers with Custom Separator
+### Arabic locale (SAR)
+
+```tsx
+<PersianNumberInput
+  initialValue={987654}
+  locale="ar"
+  separatorChar=","
+  suffix="ر.س"
+  onValueChange={(value) => console.log(value)}
+/>
+```
+
+Displayed: `٩٨٧,٦٥٤ ر.س`
+
+---
+
+### Decimal numbers with custom separator
 
 ```tsx
 <PersianNumberInput
@@ -111,11 +129,11 @@ function App() {
 />
 ```
 
-**Output:** `۱,۲۳۴٫۵۶`
+Displayed: `۱,۲۳۴٫۵۶`
 
 ---
 
-### Price Input with Validation
+### Price input with min/max validation
 
 ```tsx
 <PersianNumberInput
@@ -129,27 +147,41 @@ function App() {
 />
 ```
 
-**Output:** `۰ ریال`
-
 ---
 
-### Arabic Locale
+### With React Hook Form
 
 ```tsx
-<PersianNumberInput
-  initialValue={987654}
-  locale="ar"
-  separatorChar=","
-  suffix="ر.س"
-  onValueChange={(value) => console.log(value)}
-/>
-```
+import { useForm, Controller } from "react-hook-form";
+import { PersianNumberInput } from "persian-number-input";
 
-**Output:** `٩٨٧,٦٥٤ ر.س`
+function ProductForm() {
+  const { control, handleSubmit } = useForm();
+
+  return (
+    <form onSubmit={handleSubmit(console.log)}>
+      <Controller
+        name="price"
+        control={control}
+        rules={{ required: true }}
+        render={({ field }) => (
+          <PersianNumberInput
+            locale="fa"
+            suffix="تومان"
+            onValueChange={field.onChange}
+            initialValue={field.value}
+          />
+        )}
+      />
+      <button type="submit">ثبت</button>
+    </form>
+  );
+}
+```
 
 ---
 
-### Using the Hook (Advanced)
+### Using the hook directly (advanced)
 
 ```tsx
 import { usePersianNumberInput } from "persian-number-input";
@@ -162,10 +194,7 @@ function CustomInput() {
     maxDecimals: 2,
     min: 0,
     max: 1000000,
-    onValueChange: (val) => {
-      console.log("Raw value:", val); // "1000"
-      console.log("Displayed value:", value); // "۱,۰۰۰"
-    },
+    onValueChange: (val) => console.log("English value:", val),
   });
 
   return (
@@ -174,7 +203,7 @@ function CustomInput() {
       value={value}
       onChange={onChange}
       onBlur={onBlur}
-      className="custom-input"
+      dir="rtl"
     />
   );
 }
@@ -184,278 +213,171 @@ function CustomInput() {
 
 ## 🛠️ API Reference
 
-### PersianNumberInput Props
+### `PersianNumberInput` props
 
-| Prop             | Type                                   | Default     | Description                                              |
-| ---------------- | -------------------------------------- | ----------- | -------------------------------------------------------- |
-| `initialValue`   | `number \| string`                     | `undefined` | Initial value of the input                               |
-| `locale`         | `"fa" \| "ar" \| "en"`                 | `"fa"`      | Locale for digit conversion                              |
-| `separatorCount` | `number`                               | `3`         | Number of digits between separators                      |
-| `separatorChar`  | `string`                               | `","`       | Character used for thousand separator                    |
-| `decimalChar`    | `string`                               | Auto        | Decimal separator character                              |
-| `suffix`         | `string`                               | `undefined` | Suffix text (e.g., currency symbol)                      |
-| `maxDecimals`    | `number`                               | `undefined` | Maximum decimal places allowed                           |
-| `min`            | `number`                               | `undefined` | Minimum allowed value                                    |
-| `max`            | `number`                               | `undefined` | Maximum allowed value                                    |
-| `showZero`       | `boolean`                              | `false`     | Show zero when value is empty                            |
-| `onValueChange`  | `(value: string \| undefined) => void` | `undefined` | Callback when value changes (returns raw English digits) |
+| Prop             | Type                                   | Default     | Description                                          |
+| ---------------- | -------------------------------------- | ----------- | ---------------------------------------------------- |
+| `initialValue`   | `number \| string`                     | `undefined` | Initial value of the input                           |
+| `locale`         | `"fa" \| "ar" \| "en"`                 | `"fa"`      | Digit locale — Farsi, Arabic, or English             |
+| `separatorCount` | `number`                               | `3`         | Digits per group (3 = thousand separator)            |
+| `separatorChar`  | `string`                               | `","`       | Thousand separator character                         |
+| `decimalChar`    | `string`                               | Auto        | Decimal separator (`٫` for fa, `.` for en)          |
+| `suffix`         | `string`                               | `undefined` | Currency or unit suffix (e.g. `تومان`, `ریال`)      |
+| `maxDecimals`    | `number`                               | `undefined` | Maximum allowed decimal places                       |
+| `min`            | `number`                               | `undefined` | Minimum allowed value                                |
+| `max`            | `number`                               | `undefined` | Maximum allowed value                                |
+| `showZero`       | `boolean`                              | `false`     | Display `0` instead of empty when value is zero      |
+| `onValueChange`  | `(value: string \| undefined) => void` | `undefined` | Fires on change — always returns English digits      |
 
-All standard HTML input props are also supported.
+All standard HTML `<input>` props (e.g. `className`, `style`, `placeholder`, `disabled`) are also supported.
 
 ---
 
-### Utility Functions
+### Utility functions
 
 #### `transformNumber(rawValue, options)`
 
-Formats a number string according to locale and options.
+Format any number string according to locale and options.
 
 ```tsx
 import { transformNumber } from "persian-number-input";
 
-const formatted = transformNumber("1234567.89", {
+transformNumber("1234567.89", {
   locale: "fa",
   separatorCount: 3,
   separatorChar: ",",
   maxDecimals: 2,
   suffix: "تومان",
 });
-
-console.log(formatted); // "۱,۲۳۴,۵۶۷٫۸۹ تومان"
+// → "۱,۲۳۴,۵۶۷٫۸۹ تومان"
 ```
 
 #### `toEnglishDigits(str, decimalChar?)`
 
-Converts Persian/Arabic digits to English digits.
+Convert Persian or Arabic digits to English.
 
 ```tsx
 import { toEnglishDigits } from "persian-number-input";
 
-console.log(toEnglishDigits("۱۲۳۴")); // "1234"
-console.log(toEnglishDigits("٩٨٧٦")); // "9876"
+toEnglishDigits("۱۲۳۴"); // "1234"
+toEnglishDigits("٩٨٧٦"); // "9876"
 ```
 
 #### `toLocalizedDigits(numStr, locale)`
 
-Converts English digits to localized digits.
+Convert English digits to the target locale.
 
 ```tsx
 import { toLocalizedDigits } from "persian-number-input";
 
-console.log(toLocalizedDigits("1234", "fa")); // "۱۲۳۴"
-console.log(toLocalizedDigits("5678", "ar")); // "٥٦٧٨"
+toLocalizedDigits("1234", "fa"); // "۱۲۳۴"
+toLocalizedDigits("5678", "ar"); // "٥٦٧٨"
 ```
 
 #### `sanitizeNumericInput(value, maxDecimals?, decimalChar?)`
 
-Cleans and validates numeric input.
+Strip non-numeric characters and enforce decimal limits.
 
 ```tsx
 import { sanitizeNumericInput } from "persian-number-input";
 
-console.log(sanitizeNumericInput("۱۲۳abc۴۵۶", 2)); // "123456"
-console.log(sanitizeNumericInput("12.345.67", 2)); // "12.34"
+sanitizeNumericInput("۱۲۳abc۴۵۶", 2); // "123456"
+sanitizeNumericInput("12.345.67", 2);  // "12.34"
 ```
 
 ---
 
 ## 🎨 Styling
 
-The component accepts all standard input props, including `className` and `style`:
+The component accepts all standard input props including `className` and `style`:
 
 ```tsx
 <PersianNumberInput
-  initialValue={1000}
   locale="fa"
-  className="custom-input"
-  style={{
-    padding: "12px",
-    fontSize: "16px",
-    border: "2px solid #4F46E5",
-    borderRadius: "8px",
-    textAlign: "right",
-  }}
+  className="w-full px-4 py-3 text-lg border-2 border-indigo-500 rounded-lg text-right focus:outline-none focus:ring-2 focus:ring-indigo-600"
 />
 ```
 
-### With Tailwind CSS
-
-```tsx
-<PersianNumberInput
-  initialValue={1000}
-  locale="fa"
-  className="w-full px-4 py-3 text-lg border-2 border-indigo-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-600 text-right"
-/>
-```
+For RTL layouts, add `dir="rtl"` to the wrapper or `style={{ textAlign: "right" }}` on the input.
 
 ---
 
-## 🌟 Advanced Examples
-
-### Financial Calculator
-
-```tsx
-import { useState } from "react";
-import { PersianNumberInput } from "persian-number-input";
-
-function LoanCalculator() {
-  const [principal, setPrincipal] = useState<string>();
-  const [rate, setRate] = useState<string>();
-  const [years, setYears] = useState<string>();
-
-  const calculateMonthlyPayment = () => {
-    if (!principal || !rate || !years) return 0;
-    const p = parseFloat(principal);
-    const r = parseFloat(rate) / 100 / 12;
-    const n = parseFloat(years) * 12;
-    return (p * r * Math.pow(1 + r, n)) / (Math.pow(1 + r, n) - 1);
-  };
+## 📊 Bundle Size
 
-  return (
-    <div className="space-y-4">
-      <div>
-        <label>مبلغ وام:</label>
-        <PersianNumberInput
-          locale="fa"
-          suffix="تومان"
-          onValueChange={setPrincipal}
-          min={0}
-        />
-      </div>
-      <div>
-        <label>نرخ سود (٪):</label>
-        <PersianNumberInput
-          locale="fa"
-          maxDecimals={2}
-          onValueChange={setRate}
-          min={0}
-          max={100}
-        />
-      </div>
-      <div>
-        <label>مدت زمان (سال):</label>
-        <PersianNumberInput
-          locale="fa"
-          onValueChange={setYears}
-          min={1}
-          max={30}
-        />
-      </div>
-      <p>
-        پرداخت ماهیانه: {calculateMonthlyPayment().toLocaleString("fa-IR")}{" "}
-        تومان
-      </p>
-    </div>
-  );
-}
 ```
-
----
-
-### Form Integration
-
-```tsx
-import { useForm, Controller } from "react-hook-form";
-import { PersianNumberInput } from "persian-number-input";
-
-function ProductForm() {
-  const { control, handleSubmit } = useForm();
-
-  const onSubmit = (data) => {
-    console.log(data);
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Controller
-        name="price"
-        control={control}
-        rules={{ required: true }}
-        render={({ field }) => (
-          <PersianNumberInput
-            locale="fa"
-            suffix="تومان"
-            onValueChange={field.onChange}
-            initialValue={field.value}
-          />
-        )}
-      />
-      <button type="submit">ثبت</button>
-    </form>
-  );
-}
+persian-number-input: ~1KB (minified + gzipped)
 ```
 
+One of the smallest solutions for Persian/Arabic number input in the React ecosystem.
+
 ---
 
-## 🔍 Why Persian Number Input?
+## 🏆 Comparison
 
-### The Problem
+| Feature                        | persian-number-input | Native `<input>` | Other libraries |
+| ------------------------------ | :------------------: | :--------------: | :-------------: |
+| Persian & Arabic digit input   | ✅                   | ❌               | ⚠️ Partial      |
+| Cursor preservation on format  | ✅                   | ❌               | ⚠️ Often buggy  |
+| Multi-locale (fa / ar / en)    | ✅                   | ❌               | ❌              |
+| Thousand separator formatting  | ✅                   | ❌               | ⚠️ Limited      |
+| Decimal precision control      | ✅                   | ❌               | ⚠️ Limited      |
+| Min/max validation             | ✅                   | Partial          | ⚠️ Varies       |
+| TypeScript support             | ✅                   | ✅               | ⚠️ Varies       |
+| Bundle size                    | 🟢 ~1KB              | 🟢 Native        | 🔴 5–30KB       |
+| Zero peer dependencies         | ✅                   | ✅               | ❌              |
 
-Working with Persian and Arabic numerals in web applications is challenging:
+---
 
-- Users type in their native digits, but forms expect English digits
-- Number formatting varies across locales
-- Maintaining cursor position during formatting is complex
-- Decimal precision handling requires careful implementation
+## ❓ FAQ
 
-### The Solution
+**Q: Does this work with Next.js and Server Components?**  
+A: Yes. The component is a client component — add `"use client"` at the top of your file when using it inside a Next.js App Router layout.
 
-Persian Number Input handles all these complexities automatically:
+**Q: How do I get the numeric value back in English for my API?**  
+A: The `onValueChange` callback always returns the raw English digit string (e.g. `"1234567"`), regardless of which locale is displayed.
 
-```tsx
-// User types: ۱۲۳۴۵۶۷
-// Component displays: ۱,۲۳۴,۵۶۷
-// Form receives: "1234567"
-```
+**Q: Can I use this inside a form with native `onSubmit`?**  
+A: Use `onValueChange` to store the value in local state, then read from state on submit. The component also supports React Hook Form via the `Controller` pattern (see example above).
 
----
+**Q: Does it handle right-to-left text direction automatically?**  
+A: The component formats numbers correctly for RTL — for full RTL layout, set `dir="rtl"` on your container or `style={{ textAlign: "right" }}` on the input.
 
-## 🏆 Comparison
+**Q: What's the difference between `locale="fa"` and `locale="ar"`?**  
+A: `fa` uses Persian digits (۰–۹) and the `٫` decimal separator. `ar` uses Eastern Arabic digits (٠–٩). Both return English digits to `onValueChange`.
 
-| Feature               | Persian Number Input | Native Input | Other Libraries |
-| --------------------- | -------------------- | ------------ | --------------- |
-| Auto digit conversion | ✅                   | ❌           | ⚠️ Partial      |
-| Cursor preservation   | ✅                   | ❌           | ⚠️ Buggy        |
-| TypeScript support    | ✅                   | ✅           | ⚠️ Varies       |
-| Multi-locale          | ✅                   | ❌           | ❌              |
-| Bundle size           | 🟢 Small             | 🟢 N/A       | 🔴 Large        |
-| Decimal precision     | ✅                   | ❌           | ⚠️ Limited      |
+**Q: Is there a maximum number size?**  
+A: The library uses string-based numeric comparison for validation, so it handles arbitrarily large and precise numbers without floating-point artifacts.
 
 ---
 
 ## 🤝 Contributing
 
-Contributions are welcome! Please feel free to submit a Pull Request.
+Contributions are welcome!
 
 1. Fork the repository
-2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
-3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
-4. Push to the branch (`git push origin feature/AmazingFeature`)
+2. Create your feature branch: `git checkout -b feature/your-feature`
+3. Commit your changes: `git commit -m 'Add your feature'`
+4. Push: `git push origin feature/your-feature`
 5. Open a Pull Request
 
----
-
-## 📄 License
-
-MIT © javad Sharifi
+Please open an issue first for major changes so we can discuss the approach.
 
 ---
 
-## 🙏 Acknowledgments
+## 📄 License
 
-- Built with TypeScript and React
-- Uses [decimal.js](https://github.com/MikeMcl/decimal.js/) for precise decimal calculations
-- Inspired by the needs of Persian and Arabic speaking developers
+MIT © [Javad Sharifi](https://github.com/javadSharifi)
 
 ---
 
 ## 📞 Support
 
-- 📧 telegram: [Javad Sharifi](https://t.me/Javad_sharifi98)
+- 💬 Telegram: [@Javad_sharifi98](https://t.me/Javad_sharifi98)
 - 🐛 [Issue Tracker](https://github.com/javadSharifi/persian-number-input/issues)
 - 💬 [Discussions](https://github.com/javadSharifi/persian-number-input/discussions)
 
 ---
 
-**Made with ❤️ for the Persian and Arabic developer community**
+**Made with ❤️ for Persian and Arabic developer communities**
+
+<!-- Keywords for discoverability: persian number input react, farsi digit input, arabic number react component, rtl number input, persian input component, تبدیل اعداد فارسی به انگلیسی, ورودی عدد فارسی ریکت -->

package/dist/components/PersianNumberInput.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { TransformNumberOptions } from "../utils/transformNumber";
-interface PersianNumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "min" | "max">, Omit<TransformNumberOptions, "maxDecimals"> {
+interface PersianNumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "min" | "max">, Omit<TransformNumberOptions, "maxDecimals"> {
     initialValue?: number | string;
     onValueChange?: (value: string | undefined) => void;
     min?: number;

package/dist/components/PersianNumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PersianNumberInput.d.ts","sourceRoot":"","sources":["../../src/components/PersianNumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAE/D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAEvE,UAAU,uBACR,SAAQ,IAAI,CACR,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,UAAU,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,CACrC,EACD,IAAI,CAAC,sBAAsB,EAAE,aAAa,CAAC;IAC7C,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACpD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,kBAAkB,kGAiDtB,CAAC;AAIH,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"PersianNumberInput.d.ts","sourceRoot":"","sources":["../../src/components/PersianNumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAEvE,UAAU,uBACR,SAAQ,IAAI,CACR,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,OAAO,GAAG,KAAK,GAAG,KAAK,CACxB,EACD,IAAI,CAAC,sBAAsB,EAAE,aAAa,CAAC;IAC7C,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACpD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAgBD,QAAA,MAAM,kBAAkB,kGA6DtB,CAAC;AAIH,eAAe,kBAAkB,CAAC"}

package/dist/components/PersianNumberInput.js

@@ -1,22 +1,23 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const usePersianNumberInput_1 = require("../hooks/usePersianNumberInput");
+function mergeRefs(...refs) {
+    return (value) => {
+        for (const ref of refs) {
+            if (typeof ref === "function") {
+                ref(value);
+            }
+            else if (ref && typeof ref === "object") {
+                ref.current = value;
+            }
+        }
+    };
+}
 const PersianNumberInput = (0, react_1.forwardRef)((props, ref) => {
-    const { initialValue, separatorCount, separatorChar, decimalChar, suffix, locale, showZero, onValueChange, min, max, maxDecimals, onBlur: propsOnBlur } = props, rest = __rest(props, ["initialValue", "separatorCount", "separatorChar", "decimalChar", "suffix", "locale", "showZero", "onValueChange", "min", "max", "maxDecimals", "onBlur"]);
-    const { value, onChange, onBlur, inputRef } = (0, usePersianNumberInput_1.usePersianNumberInput)({
+    const { initialValue, separatorCount, separatorChar, decimalChar, suffix, locale, showZero, onValueChange, min, max, maxDecimals, onChange: externalOnChange, onBlur: externalOnBlur, onKeyDown: externalOnKeyDown, onPaste: externalOnPaste, ...rest } = props;
+    const hookProps = {
         initialValue,
         separatorCount,
         separatorChar,
@@ -28,10 +29,14 @@ const PersianNumberInput = (0, react_1.forwardRef)((props, ref) => {
         min,
         max,
         maxDecimals,
-        onBlur: propsOnBlur,
-    });
-    (0, react_1.useImperativeHandle)(ref, () => inputRef.current);
-    return ((0, jsx_runtime_1.jsx)("input", Object.assign({}, rest, { ref: inputRef, type: "text", inputMode: "decimal", dir: "ltr", value: value, onChange: onChange, onBlur: onBlur })));
+        onChange: externalOnChange,
+        onBlur: externalOnBlur,
+        onKeyDown: externalOnKeyDown,
+        onPaste: externalOnPaste,
+    };
+    const { value, onChange, onKeyDown, onPaste, onBlur, inputRef, isInvalid } = (0, usePersianNumberInput_1.usePersianNumberInput)(hookProps);
+    const mergedRef = (0, react_1.useMemo)(() => mergeRefs(ref, inputRef), [ref, inputRef]);
+    return ((0, jsx_runtime_1.jsx)("input", { ref: mergedRef, type: "text", inputMode: "decimal", dir: "ltr", value: value, onChange: onChange, onKeyDown: onKeyDown, onPaste: onPaste, onBlur: onBlur, "aria-invalid": isInvalid || undefined, ...rest }));
 });
 PersianNumberInput.displayName = "PersianNumberInput";
 exports.default = PersianNumberInput;

package/dist/components/PersianNumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PersianNumberInput.js","sourceRoot":"","sources":["../../src/components/PersianNumberInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,iCAA+D;AAC/D,0EAAuE;AAgBvE,MAAM,kBAAkB,GAAG,IAAA,kBAAU,EAGnC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,MAAM,EACJ,YAAY,EACZ,cAAc,EACd,aAAa,EACb,WAAW,EACX,MAAM,EACN,MAAM,EACN,QAAQ,EACR,aAAa,EACb,GAAG,EACH,GAAG,EACH,WAAW,EACX,MAAM,EAAE,WAAW,KAEjB,KAAK,EADJ,IAAI,UACL,KAAK,EAdH,0JAcL,CAAQ,CAAC;IAEV,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,6CAAqB,EAAC;QAClE,YAAY;QACZ,cAAc;QACd,aAAa;QACb,WAAW;QACX,MAAM;QACN,MAAM;QACN,QAAQ;QACR,aAAa;QACb,GAAG;QACH,GAAG;QACH,WAAW;QACX,MAAM,EAAE,WAAW;KACpB,CAAC,CAAC;IAEH,IAAA,2BAAmB,EAAC,GAAG,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAQ,CAAC,CAAC;IAElD,OAAO,CACL,kDACM,IAAI,IACR,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,SAAS,EACnB,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,IACd,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC;AAEtD,kBAAe,kBAAkB,CAAC"}
+{"version":3,"file":"PersianNumberInput.js","sourceRoot":"","sources":["../../src/components/PersianNumberInput.tsx"],"names":[],"mappings":";;;AAAA,iCAAmD;AACnD,0EAGwC;AAgBxC,SAAS,SAAS,CAChB,GAAG,IAAyC;IAE5C,OAAO,CAAC,KAAQ,EAAE,EAAE;QAClB,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;YACvB,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;gBAC9B,GAAG,CAAC,KAAK,CAAC,CAAC;YACb,CAAC;iBAAM,IAAI,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACzC,GAAwC,CAAC,OAAO,GAAG,KAAK,CAAC;YAC5D,CAAC;QACH,CAAC;IACH,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,kBAAkB,GAAG,IAAA,kBAAU,EAGnC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,MAAM,EACJ,YAAY,EACZ,cAAc,EACd,aAAa,EACb,WAAW,EACX,MAAM,EACN,MAAM,EACN,QAAQ,EACR,aAAa,EACb,GAAG,EACH,GAAG,EACH,WAAW,EACX,QAAQ,EAAE,gBAAgB,EAC1B,MAAM,EAAE,cAAc,EACtB,SAAS,EAAE,iBAAiB,EAC5B,OAAO,EAAE,eAAe,EACxB,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,SAAS,GAA+B;QAC5C,YAAY;QACZ,cAAc;QACd,aAAa;QACb,WAAW;QACX,MAAM;QACN,MAAM;QACN,QAAQ;QACR,aAAa;QACb,GAAG;QACH,GAAG;QACH,WAAW;QACX,QAAQ,EAAE,gBAAgB;QAC1B,MAAM,EAAE,cAAc;QACtB,SAAS,EAAE,iBAAiB;QAC5B,OAAO,EAAE,eAAe;KACzB,CAAC;IAEF,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GACxE,IAAA,6CAAqB,EAAC,SAAS,CAAC,CAAC;IAEnC,MAAM,SAAS,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,SAAS,CAAC,GAAG,EAAE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE3E,OAAO,CACL,kCACE,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,SAAS,EACnB,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,kBACA,SAAS,IAAI,SAAS,KAChC,IAAI,GACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC;AAEtD,kBAAe,kBAAkB,CAAC"}