persian-number-input 3.0.3 → 3.0.6

package/README.md

@@ -4,34 +4,36 @@
 
 ---
 
-[فارسی 🇮🇷](#-فارسی) | [English 🇺🇸](#-english)
+[English 🇺🇸](#-english)| [فارسی 🇮🇷](#-فارسی)
 
 ---
 
-## 🇮🇷 فارسی
+## 🇺🇸 English
 
-کامپوننت React برای ورودی اعداد فارسی، انگلیسی و هندی با قابلیت جداکننده ارقام و محلی‌سازی کامل.
+Persian Number Input - React Component for Persian, English & Indic Number Formatting
 
-✅ **امکانات کلیدی:**
+Easily input, format, and convert numbers in Persian, English, or Indic digits with customizable digit separators. Lightweight, React-compatible, and fully localized for React versions 16 to 19.
 
-- پشتیبانی از اعداد فارسی، انگلیسی و هندی
-- قابلیت تعیین جداکننده ارقام دلخواه (هزارگان)
-- تبدیل خودکار اعداد محلی به اعداد انگلیسی
-- استفاده آسان و پشتیبانی از React نسخه‌های 16 تا 19
+✅ **Key Features:**
 
-### 🚀 نصب
+- Support for Persian, English, and Indic digit localization
+- Customizable digit grouping separators (e.g., commas)
+- Automatically converts localized digits to standard English digits
+- Simple, easy-to-integrate React API
+
+### 🚀 Installation
 
 ```bash
 npm install persian-number-input
 ```
 
-### 💻 روش استفاده
+### 💻 Usage Example
 
-مثال ساده:
+Simple usage example:
 
 ```jsx
 import React, { useState } from "react";
-import PersianNumberInput from "persian-number-input";
+import { PersianNumberInput } from "persian-number-input";
 
 const App = () => {
   const [number, setNumber] = useState("");
@@ -49,58 +51,89 @@ const App = () => {
 export default App;
 ```
 
-### 🔥 مثال خروجی
+### 🔥 Output Example
 
 ```
-ورودی: 123456
-خروجی نمایشی: ۱۲۳,۴۵۶
-خروجی انگلیسی: 123456
+Input: 123456
+Displayed Output: ۱۲۳,۴۵۶
+English Output: 123456
 ```
 
-### 📚 مشخصات Props
+![Output Example](https://your-domain.com/output-example.png)
 
-| نام            | نوع                             | پیشفرض | توضیح                            |
-| -------------- | ------------------------------- | ------ | -------------------------------- |
-| initialValue   | string                          | ""     | مقدار اولیه                      |
-| separatorCount | number                          | 0      | تعداد ارقام جداشده (مثلاً ۳ رقم) |
-| separatorChar  | string                          | ","    | کاراکتر جداکننده (مانند `,`)     |
-| lang           | 'fa' \| 'in' \| 'en'            | "fa"   | زبان نمایش ارقام                 |
-| onChangeValue  | (englishNumber: string) => void | -      | فراخوانی در تغییر مقدار          |
+### 📚 Props Reference
+
+| Name           | Type                            | Default | Description                          |
+| -------------- | ------------------------------- | ------- | ------------------------------------ |
+| initialValue   | string                          | ""      | Initial input value                  |
+| separatorCount | number                          | 0       | Number of digits per group (e.g., 3) |
+| separatorChar  | string                          | ","     | Digit grouping character             |
+| lang           | 'fa' \| 'in' \| 'en'            | "fa"    | Digit localization language          |
+| onChangeValue  | (englishNumber: string) => void | -       | Callback function on value change    |
 
 ---
 
-### 🌟 حمایت از پروژه
+### ❓ FAQ (Frequently Asked Questions)
 
-اگر این پکیج برای شما مفید بود، **لطفاً یک ستاره به مخزن GitHub بدهید ⭐**. این بهترین راه برای حمایت از پروژه و تشویق توسعه‌دهنده به بهبود آن است.
+**Does this package support React 19?**  
+Yes, it fully supports React versions 16 through 19.
+
+**What is the best use-case scenario for this component?**  
+Ideal for multilingual web applications, forms, and any interface requiring localized numeric inputs.
+
+**How can I customize the styles of this component?**  
+You can pass custom classes or inline styles directly to the component to match your design requirements.
+
+---
+
+### 🌟 Support the Project
+
+If you find this package helpful, **please give it a star ⭐ on GitHub** to encourage further improvements.
 
 👉 **[GitHub Repository](https://github.com/javadSharifi/persian-number-input)**
 
-از حمایت شما متشکریم! ❤️🚀
+Thank you for your support! ❤️🚀
 
-## 🇺🇸 English
+---
 
-React component to input numbers in Persian, Indic, or English with customizable digit separators and full localization.
+### 📈 SEO Keywords
 
-✅ **Key Features:**
+`Persian Number Input`, `React Persian input`, `localization`, `digit grouping`, `Persian digits`, `React numeric input`, `number formatter`
 
-- Support for Persian, English, and Indic digits
-- Customizable digit grouping separators
-- Automatically converts localized digits to English
-- Easy-to-use API supporting React versions 16 to 19
+---
 
-### 🚀 Installation
+### 📄 License
+
+[MIT License](LICENSE)
+
+© 2024 Your Name. All rights reserved.
+
+# persian-number-input
+
+## 🇮🇷 فارسی
+
+کامپوننت React برای ورودی اعداد فارسی، انگلیسی و هندی با قابلیت جداکننده ارقام و محلی‌سازی کامل.
+
+✅ **امکانات کلیدی:**
+
+- پشتیبانی از اعداد فارسی، انگلیسی و هندی
+- قابلیت تعیین جداکننده ارقام دلخواه (هزارگان)
+- تبدیل خودکار اعداد محلی به اعداد انگلیسی
+- استفاده آسان و پشتیبانی از React نسخه‌های 16 تا 19
+
+### 🚀 نصب
 
 ```bash
 npm install persian-number-input
 ```
 
-### 💻 Usage Example
+### 💻 روش استفاده
 
-Simple usage:
+مثال ساده:
 
 ```jsx
 import React, { useState } from "react";
-import PersianNumberInput from "persian-number-input";
+import { PersianNumberInput } from "persian-number-input";
 
 const App = () => {
   const [number, setNumber] = useState("");
@@ -118,44 +151,30 @@ const App = () => {
 export default App;
 ```
 
-### 🔥 Output Example
+### 🔥 مثال خروجی
 
 ```
-Input: 123456
-Displayed Output: ۱۲۳,۴۵۶
-English Output: 123456
+ورودی: 123456
+خروجی نمایشی: ۱۲۳,۴۵۶
+خروجی انگلیسی: 123456
 ```
 
-### 📚 Props Reference
-
-| Name           | Type                            | Default | Description                          |
-| -------------- | ------------------------------- | ------- | ------------------------------------ |
-| initialValue   | string                          | ""      | Initial input value                  |
-| separatorCount | number                          | 0       | Number of digits per group (e.g., 3) |
-| separatorChar  | string                          | ","     | Digit grouping character             |
-| lang           | 'fa' \| 'in' \| 'en'            | "fa"    | Digit localization language          |
-| onChangeValue  | (englishNumber: string) => void | -       | Callback function on value change    |
-
-### 🌟 Support the Project
-
-If you found this package useful, **please consider giving a star ⭐ on GitHub**. It's the best way to support the project and encourage further improvements.
-
-👉 **[GitHub Repository](https://github.com/javadSharifi/persian-number-input)**
-
-Thank you for your support! ❤️🚀
-
----
-
-### 📈 SEO Keywords
+### 📚 مشخصات Props
 
-`Persian Number Input`, `React Persian input`, `localization`, `digit grouping`, `Persian digits`, `React numeric input`, `number formatter`
+| نام            | نوع                             | پیشفرض | توضیح                            |
+| -------------- | ------------------------------- | ------ | -------------------------------- |
+| initialValue   | string                          | ""     | مقدار اولیه                      |
+| separatorCount | number                          | 0      | تعداد ارقام جداشده (مثلاً ۳ رقم) |
+| separatorChar  | string                          | ","    | کاراکتر جداکننده (مانند `,`)     |
+| lang           | 'fa' \| 'in' \| 'en'            | "fa"   | زبان نمایش ارقام                 |
+| onChangeValue  | (englishNumber: string) => void | -      | فراخوانی در تغییر مقدار          |
 
 ---
 
-### 📄 License
+### 🌟 حمایت از پروژه
 
-[MIT License](LICENSE)
+اگر این پکیج برای شما مفید بود، **لطفاً یک ستاره به مخزن GitHub بدهید ⭐**. این بهترین راه برای حمایت از پروژه و تشویق توسعه‌دهنده به بهبود آن است.
 
-© 2024 Your Name. All rights reserved.
+👉 **[GitHub Repository](https://github.com/javadSharifi/persian-number-input)**
 
-# persian-number-input
+از حمایت شما متشکریم! ❤️🚀

package/dist/components/PersianNumberInput.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
-export interface PersianNumberInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    initialValue?: string;
+interface PersianNumberInputCustomProps {
+    value: string;
     separatorCount?: number;
     separatorChar?: string;
     lang?: 'fa' | 'in' | 'en';
-    onChangeValue?: (englishNumber: string) => void;
+    onChange: (value: string) => void;
 }
-declare const PersianNumberInput: React.FC<PersianNumberInputProps>;
+type AllowedInputProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'placeholder' | 'disabled' | 'readOnly' | 'id' | 'name' | 'autoComplete' | 'autoFocus' | 'maxLength' | 'minLength' | 'required' | 'title' | 'dir' | 'onClick' | 'onKeyDown' | 'onKeyUp' | 'onKeyPress' | 'onFocus' | 'onBlur' | 'onMouseDown' | 'onMouseUp' | 'onMouseEnter' | 'onMouseLeave' | 'onTouchStart' | 'onTouchEnd' | 'onPaste'>;
+export type PersianNumberInputProps = PersianNumberInputCustomProps & AllowedInputProps;
+declare const PersianNumberInput: ({ value, separatorCount, separatorChar, lang, onChange, style, ...rest }: PersianNumberInputProps) => React.JSX.Element;
 export default PersianNumberInput;

package/dist/components/PersianNumberInput.js

@@ -9,19 +9,29 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useCallback } from 'react';
+import React from 'react';
 import { toLocalizedDigits, groupDigits, convertToEnglishDigits } from '../utils/digitUtils';
+// استایل پایه برای input
+const baseInputStyle = {
+    border: '1px solid #ccc',
+    borderRadius: '4px',
+    padding: '8px 12px',
+    fontSize: '14px',
+    outline: 'none',
+};
 const PersianNumberInput = (_a) => {
-    var { initialValue = '', separatorCount = 0, separatorChar = ',', lang = 'fa', onChangeValue } = _a, rest = __rest(_a, ["initialValue", "separatorCount", "separatorChar", "lang", "onChangeValue"]);
-    const [value, setValue] = React.useState(() => convertToEnglishDigits(initialValue).replace(/\D/g, ''));
-    const handleChange = useCallback((e) => {
-        const input = convertToEnglishDigits(e.target.value).replace(/\D/g, '');
-        setValue(input);
-        if (onChangeValue)
-            onChangeValue(input);
-    }, [onChangeValue]);
-    const formattedValue = groupDigits(value, separatorCount, separatorChar);
+    var { value, separatorCount = 0, separatorChar = ',', lang = 'fa', onChange, style } = _a, rest = __rest(_a, ["value", "separatorCount", "separatorChar", "lang", "onChange", "style"]);
+    // تبدیل مقدار به فرمت نمایشی
+    const numericValue = convertToEnglishDigits(value).replace(/\D/g, '');
+    const formattedValue = groupDigits(numericValue, separatorCount, separatorChar);
     const displayValue = lang === 'en' ? formattedValue : toLocalizedDigits(formattedValue, lang);
-    return React.createElement("input", Object.assign({}, rest, { value: displayValue, onChange: handleChange }));
+    // هندل تغییرات
+    const handleChange = (e) => {
+        const newValue = convertToEnglishDigits(e.target.value).replace(/\D/g, '');
+        onChange(newValue);
+    };
+    const mergedStyle = Object.assign(Object.assign({}, baseInputStyle), style);
+    return React.createElement("input", Object.assign({ value: displayValue, onChange: handleChange, style: mergedStyle }, rest));
 };
 export default PersianNumberInput;
+//# sourceMappingURL=PersianNumberInput.js.map

package/dist/components/PersianNumberInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PersianNumberInput.js","sourceRoot":"","sources":["../../src/components/PersianNumberInput.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AA4C7F,yBAAyB;AACzB,MAAM,cAAc,GAAwB;IACxC,MAAM,EAAE,gBAAgB;IACxB,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,MAAM;IAChB,OAAO,EAAE,MAAM;CAClB,CAAC;AAKF,MAAM,kBAAkB,GAAG,CAAC,EAQF,EAAE,EAAE;QARF,EACxB,KAAK,EACL,cAAc,GAAG,CAAC,EAClB,aAAa,GAAG,GAAG,EACnB,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,KAAK,OAEiB,EADnB,IAAI,cAPiB,yEAQ3B,CADU;IAEP,6BAA6B;IAC7B,MAAM,YAAY,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IACtE,MAAM,cAAc,GAAG,WAAW,CAAC,YAAY,EAAE,cAAc,EAAE,aAAa,CAAC,CAAC;IAChF,MAAM,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;IAE9F,eAAe;IACf,MAAM,YAAY,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC5D,MAAM,QAAQ,GAAG,sBAAsB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAC3E,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,MAAM,WAAW,mCAAQ,cAAc,GAAK,KAAK,CAAE,CAAC;IAEpD,OAAO,6CACH,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,WAAW,IACd,IAAI,EACV,CAAC;AACP,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/index.js

@@ -1 +1,2 @@
 export { default as PersianNumberInput } from "./components/PersianNumberInput";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,iCAAiC,CAAC"}

package/dist/utils/digitUtils.js

@@ -37,3 +37,4 @@ export const convertToEnglishDigits = (str) => {
     };
     return str.replace(/[۰-۹०-९]/g, (char) => map[char]);
 };
+//# sourceMappingURL=digitUtils.js.map

package/dist/utils/digitUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"digitUtils.js","sourceRoot":"","sources":["../../src/utils/digitUtils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAgC;IACpD,EAAE,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;IACtD,EAAE,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;CACvD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,MAAc,EAAE,MAAmB,EAAE,EAAE;IACvE,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;IACjC,OAAO,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AACnE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,MAAc,EACd,cAAsB,EACtB,aAAa,GAAG,GAAG,EACnB,EAAE;IACF,IAAI,cAAc,IAAI,cAAc,GAAG,CAAC,EAAE,CAAC;QACzC,OAAO,MAAM,CAAC,OAAO,CACnB,IAAI,MAAM,CAAC,cAAc,cAAc,aAAa,EAAE,GAAG,CAAC,EAC1D,aAAa,CACd,CAAC;IACJ,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,GAAW,EAAE,EAAE;IACpD,MAAM,GAAG,GAA8B;QACrC,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;KACT,CAAC;IACF,OAAO,GAAG,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;AACvD,CAAC,CAAC"}

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "persian-number-input",
-  "version": "3.0.3",
+  "version": "3.0.6",
   "description": "React component for Persian, Indic, or English localized number input with customizable digit grouping",
   "main": "dist/index.js",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "typings": "dist/index.d.ts",
+  "sideEffects": false,
   "files": [
     "dist"
   ],