persian-number-input 1.0.0

package/README.md

@@ -0,0 +1,9 @@
+# Persian Number Input Component
+
+> React component to input numbers in Persian, Indic or English format with grouping and localization.
+
+## Installation
+
+```bash
+npm install persian-number-input
+```

package/dist/components/PersianNumberInput.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface PersianNumberInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    initialValue?: string;
+    separatorCount?: number;
+    separatorChar?: string;
+    lang?: 'fa' | 'in' | 'en';
+    onChangeValue?: (englishNumber: string) => void;
+}
+declare const PersianNumberInput: React.FC<PersianNumberInputProps>;
+export default PersianNumberInput;

package/dist/components/PersianNumberInput.js

@@ -0,0 +1,27 @@
+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;
+};
+import React, { useCallback } from 'react';
+import { toLocalizedDigits, groupDigits, convertToEnglishDigits } from '../utils/digitUtils';
+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);
+    const displayValue = lang === 'en' ? formattedValue : toLocalizedDigits(formattedValue, lang);
+    return React.createElement("input", Object.assign({}, rest, { value: displayValue, onChange: handleChange }));
+};
+export default PersianNumberInput;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default as PersianNumberInput } from "./components/PersianNumberInput";

package/dist/index.js

@@ -0,0 +1 @@
+export { default as PersianNumberInput } from "./components/PersianNumberInput";

package/dist/utils/digitUtils.d.ts

@@ -0,0 +1,6 @@
+export declare const digitsMap: {
+    [key: string]: string[];
+};
+export declare const toLocalizedDigits: (numStr: string, locale: "fa" | "in") => string;
+export declare const groupDigits: (numStr: string, separatorCount: number, separatorChar?: string) => string;
+export declare const convertToEnglishDigits: (str: string) => string;

package/dist/utils/digitUtils.js

@@ -0,0 +1,39 @@
+export const digitsMap = {
+    fa: ["۰", "۱", "۲", "۳", "۴", "۵", "۶", "۷", "۸", "۹"],
+    in: ["०", "१", "२", "३", "४", "५", "६", "७", "८", "९"],
+};
+export const toLocalizedDigits = (numStr, locale) => {
+    const digits = digitsMap[locale];
+    return numStr.replace(/\d/g, (digit) => digits[parseInt(digit)]);
+};
+export const groupDigits = (numStr, separatorCount, separatorChar = ",") => {
+    if (separatorCount && separatorCount > 0) {
+        return numStr.replace(new RegExp(`\\B(?=(\\d{${separatorCount}})+(?!\\d))`, "g"), separatorChar);
+    }
+    return numStr;
+};
+export const convertToEnglishDigits = (str) => {
+    const map = {
+        "۰": "0",
+        "۱": "1",
+        "۲": "2",
+        "۳": "3",
+        "۴": "4",
+        "۵": "5",
+        "۶": "6",
+        "۷": "7",
+        "۸": "8",
+        "۹": "9",
+        "०": "0",
+        "१": "1",
+        "२": "2",
+        "३": "3",
+        "४": "4",
+        "५": "5",
+        "६": "6",
+        "७": "7",
+        "८": "8",
+        "९": "9",
+    };
+    return str.replace(/[۰-۹०-९]/g, (char) => map[char]);
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "persian-number-input",
+  "version": "1.0.0",
+  "description": "React component for Persian, Indic, or English localized number input with customizable digit grouping",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build",
+    "test": "jest"
+  },
+  "keywords": [
+    "react",
+    "persian",
+    "indic",
+    "number",
+    "input",
+    "localization",
+    "digit-grouping"
+  ],
+  "author": "Your Name",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yourusername/persian-number-input.git"
+  },
+  "bugs": {
+    "url": "https://github.com/yourusername/persian-number-input/issues"
+  },
+  "homepage": "https://github.com/yourusername/persian-number-input#readme",
+  "peerDependencies": {
+    "react": "^16.8 || ^17 || ^18 || ^19"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.0.0",
+    "jest": "^29.0.0",
+    "@types/jest": "^29.0.0",
+    "ts-jest": "^29.0.0"
+  }
+}