@kashi-ui/react 0.3.0 → 0.4.0

package/README.md

@@ -22,6 +22,6 @@ export function SignUp() {
 
 کامپوننت‌ها: Button · Input · Textarea · Badge · Card · Alert · Avatar · AvatarGroup · Checkbox · Switch
 
-فارسی: DatePicker و Calendar شمسی · NationalIdInput · CardNumberInput
+فارسی: DatePicker و Calendar شمسی · NationalIdInput · CardNumberInput · IbanInput · MobileInput · PriceInput
 
 نیازمند React ۱۸ یا بالاتر. مستندات کامل: [kashi.sepantapouya.com](https://kashi.sepantapouya.com) · کد: [GitHub](https://github.com/Sepantapouya/Kashi) · لایسنس MIT

package/dist/BankBadge.d.ts

@@ -0,0 +1,7 @@
+import type { Bank } from "@kashi-ui/persian";
+/** نام و لوگوی بانک داخل فیلد؛ نام با id به فیلد متصل می‌شود و لوگو تزئینی است */
+export declare function BankBadge({ bank, id, showLogo }: {
+    bank: Bank | null;
+    id: string;
+    showLogo: boolean;
+}): import("react").JSX.Element | null;

package/dist/BankBadge.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+/** لوگوی بانک را فقط هنگام نیاز بارگذاری می‌کند (code-split)، تا حجم اولیهٔ برنامه زیاد نشود */
+function useBankLogo(slug, enabled) {
+    const [uri, setUri] = useState(null);
+    useEffect(() => {
+        if (!slug || !enabled) {
+            setUri(null);
+            return;
+        }
+        let alive = true;
+        import("@kashi-ui/bank-logos")
+            .then((m) => alive && setUri(m.bankLogoDataUri(slug)))
+            .catch(() => alive && setUri(null));
+        return () => {
+            alive = false;
+        };
+    }, [slug, enabled]);
+    return uri;
+}
+/** نام و لوگوی بانک داخل فیلد؛ نام با id به فیلد متصل می‌شود و لوگو تزئینی است */
+export function BankBadge({ bank, id, showLogo }) {
+    const logo = useBankLogo(bank?.slug, showLogo);
+    if (!bank)
+        return null;
+    return (_jsxs("span", { className: "k-bank", id: id, children: [logo && _jsx("img", { className: "k-bank__logo", src: logo, alt: "", width: 24, height: 24 }), bank.name] }));
+}

package/dist/CardNumberInput.d.ts

@@ -11,9 +11,11 @@ export interface CardNumberInputProps extends Base {
     digits?: "fa" | "latin";
     /** نمایش نام بانک از روی شش رقم اول @default true */
     showBank?: boolean;
+    /** نمایش لوگوی بانک (فقط هنگام نیاز بارگذاری می‌شود) @default true */
+    showBankLogo?: boolean;
     /** @default "شماره کارت معتبر نیست." */
     invalidMessage?: ReactNode;
 }
-/** فیلد شماره کارت بانکی: گروه‌بندی چهارتایی، تشخیص بانک و بررسی Luhn */
+/** فیلد شماره کارت بانکی: گروه‌بندی چهارتایی، تشخیص بانک با لوگو و بررسی Luhn */
 export declare const CardNumberInput: import("react").ForwardRefExoticComponent<CardNumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/CardNumberInput.js

@@ -1,50 +1,24 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useId, useLayoutEffect, useRef, useState } from "react";
-import { formatCardNumber, getBankByCard, isValidCardNumber, onlyDigits, toFaDigits } from "@kashi-ui/persian";
+import { forwardRef, useId, useState } from "react";
+import { formatCardNumber, getBankByCard, isValidCardNumber } from "@kashi-ui/persian";
+import { BankBadge } from "./BankBadge.js";
 import { Input } from "./Input.js";
+import { useDigitsInput } from "./useDigitsInput.js";
 import { mergeRefs } from "./utils.js";
-/** شمارهٔ ارقام قبل از مکان‌نما را به موقعیت در متن قالب‌بندی‌شده تبدیل می‌کند */
-function caretFor(formatted, digitCount) {
-    if (digitCount === 0)
-        return 0;
-    let seen = 0;
-    for (let i = 0; i < formatted.length; i++) {
-        if (/[0-9۰-۹]/.test(formatted[i]) && ++seen === digitCount)
-            return i + 1;
-    }
-    return formatted.length;
-}
-/** فیلد شماره کارت بانکی: گروه‌بندی چهارتایی، تشخیص بانک و بررسی Luhn */
-export const CardNumberInput = forwardRef(function CardNumberInput({ value, defaultValue = "", onValueChange, digits = "fa", showBank = true, invalidMessage = "شماره کارت معتبر نیست.", error, name, id, onBlur, placeholder, ...rest }, ref) {
+/** فیلد شماره کارت بانکی: گروه‌بندی چهارتایی، تشخیص بانک با لوگو و بررسی Luhn */
+export const CardNumberInput = forwardRef(function CardNumberInput({ value, defaultValue, onValueChange, digits = "fa", showBank = true, showBankLogo = true, invalidMessage = "شماره کارت معتبر نیست.", error, name, id, onBlur, placeholder, ...rest }, ref) {
     const autoId = useId();
     const inputId = id ?? autoId;
-    const inputRef = useRef(null);
-    const caret = useRef(null);
-    const [inner, setInner] = useState(() => onlyDigits(defaultValue).slice(0, 16));
     const [touched, setTouched] = useState(false);
-    const raw = value !== undefined ? onlyDigits(value).slice(0, 16) : inner;
-    const formatted = formatCardNumber(raw);
-    const shown = digits === "fa" ? toFaDigits(formatted) : formatted;
+    const { raw, shown, inputRef, handleChange } = useDigitsInput({ value, defaultValue, maxDigits: 16, format: formatCardNumber, digits });
     const bank = showBank ? getBankByCard(raw) : null;
     const showInvalid = raw.length > 0 && (touched || raw.length === 16) && !isValidCardNumber(raw);
     const bankId = `${inputId}-bank`;
-    // پس از قالب‌بندی دوباره، مکان‌نما را سر جای منطقی‌اش برمی‌گرداند
-    useLayoutEffect(() => {
-        if (caret.current !== null && inputRef.current === document.activeElement) {
-            const pos = caretFor(shown, caret.current);
-            inputRef.current?.setSelectionRange(pos, pos);
-            caret.current = null;
-        }
-    });
     return (_jsxs(_Fragment, { children: [_jsx(Input, { ref: mergeRefs(ref, inputRef), id: inputId, type: "text", inputMode: "numeric", autoComplete: "cc-number", dir: "ltr", placeholder: placeholder ?? (digits === "fa" ? "۰۰۰۰ ۰۰۰۰ ۰۰۰۰ ۰۰۰۰" : "0000 0000 0000 0000"), value: shown, onChange: (e) => {
-                    const el = e.target;
-                    caret.current = onlyDigits(el.value.slice(0, el.selectionStart ?? el.value.length)).length;
-                    const next = onlyDigits(el.value).slice(0, 16);
-                    if (value === undefined)
-                        setInner(next);
+                    const next = handleChange(e);
                     onValueChange?.(next, isValidCardNumber(next), getBankByCard(next)?.name ?? null);
                 }, onBlur: (e) => {
                     setTouched(true);
                     onBlur?.(e);
-                }, addonEnd: bank ? _jsx("span", { className: "k-input__meta", id: bankId, children: bank.name }) : undefined, "aria-describedby": bank ? bankId : undefined, error: error ?? (showInvalid ? invalidMessage : undefined), ...rest }), name && _jsx("input", { type: "hidden", name: name, value: raw })] }));
+                }, addonEnd: bank ? _jsx(BankBadge, { bank: bank, id: bankId, showLogo: showBankLogo }) : undefined, "aria-describedby": bank ? bankId : undefined, error: error ?? (showInvalid ? invalidMessage : undefined), ...rest }), name && _jsx("input", { type: "hidden", name: name, value: raw })] }));
 });

package/dist/DatePicker.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { forwardRef, useEffect, useId, useRef, useState } from "react";
 import { formatJalali, parseJalali, toISODate } from "@kashi-ui/persian";
 import { Calendar, sameDay } from "./Calendar.js";
 import { Input } from "./Input.js";
-import { mergeRefs } from "./utils.js";
+import { mergeRefs, useIsomorphicLayoutEffect } from "./utils.js";
 /**
  * انتخاب تاریخ شمسی: تایپ مستقیم (۱۴۰۳/۰۵/۱۲) یا انتخاب از تقویم.
  * با name، مقدار میلادی به شکل YYYY-MM-DD در فرم ارسال می‌شود.
@@ -27,7 +27,7 @@ export const DatePicker = forwardRef(function DatePicker({ value, defaultValue =
         setInvalid(false);
     }, [selected?.getTime(), digits]);
     // تقویم درست زیر کادر فیلد باز می‌شود (نه زیر متن راهنما)
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (!open || !wrap.current)
             return;
         const box = wrap.current.querySelector(".k-input");

package/dist/IbanInput.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+import { type InputProps } from "./Input.js";
+type Base = Omit<InputProps, "value" | "defaultValue" | "onChange" | "type" | "inputMode" | "addonEnd">;
+export interface IbanInputProps extends Base {
+    /** مقدار کنترل‌شده: «IR» + ۲۴ رقم یا فقط ۲۴ رقم */
+    value?: string;
+    defaultValue?: string;
+    /** با هر تغییر: شبای کامل «IR…» بدون فاصله، معتبر بودن و نام بانک */
+    onValueChange?: (value: string, valid: boolean, bank: string | null) => void;
+    /** شبا معمولاً با ارقام لاتین نوشته می‌شود @default "latin" */
+    digits?: "fa" | "latin";
+    /** @default true */
+    showBank?: boolean;
+    /** @default true */
+    showBankLogo?: boolean;
+    /** @default "شماره شبا معتبر نیست." */
+    invalidMessage?: ReactNode;
+}
+/** فیلد شماره شبا: IR خودکار، گروه‌بندی، تشخیص بانک با لوگو و بررسی رقم‌های کنترل */
+export declare const IbanInput: import("react").ForwardRefExoticComponent<IbanInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/IbanInput.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState } from "react";
+import { formatIban, getBankByIban, isValidIban } from "@kashi-ui/persian";
+import { BankBadge } from "./BankBadge.js";
+import { Input } from "./Input.js";
+import { useDigitsInput } from "./useDigitsInput.js";
+import { mergeRefs } from "./utils.js";
+const ibanOf = (d) => (d ? `IR${d}` : "");
+/** فیلد شماره شبا: IR خودکار، گروه‌بندی، تشخیص بانک با لوگو و بررسی رقم‌های کنترل */
+export const IbanInput = forwardRef(function IbanInput({ value, defaultValue, onValueChange, digits = "latin", showBank = true, showBankLogo = true, invalidMessage = "شماره شبا معتبر نیست.", error, name, id, onBlur, placeholder, ...rest }, ref) {
+    const autoId = useId();
+    const inputId = id ?? autoId;
+    const [touched, setTouched] = useState(false);
+    const strip = (v) => v?.replace(/^\s*IR/i, "");
+    const { raw, shown, inputRef, handleChange } = useDigitsInput({
+        value: strip(value),
+        defaultValue: strip(defaultValue),
+        maxDigits: 24,
+        format: (d) => formatIban(d),
+        digits,
+    });
+    const bank = showBank ? getBankByIban(raw) : null;
+    const showInvalid = raw.length > 0 && (touched || raw.length === 24) && !isValidIban(raw);
+    const bankId = `${inputId}-bank`;
+    return (_jsxs(_Fragment, { children: [_jsx(Input, { ref: mergeRefs(ref, inputRef), id: inputId, type: "text", inputMode: "numeric", autoComplete: "off", spellCheck: false, dir: "ltr", placeholder: placeholder ?? "IR00 0000 0000 0000 0000 0000 00", value: shown, onChange: (e) => {
+                    // «IR» تایپ‌شده یا چسبانده‌شده حذف می‌شود و فقط ارقام می‌مانند
+                    const next = handleChange(e);
+                    onValueChange?.(ibanOf(next), isValidIban(next), getBankByIban(next)?.name ?? null);
+                }, onBlur: (e) => {
+                    setTouched(true);
+                    onBlur?.(e);
+                }, addonEnd: bank ? _jsx(BankBadge, { bank: bank, id: bankId, showLogo: showBankLogo }) : undefined, "aria-describedby": bank ? bankId : undefined, error: error ?? (showInvalid ? invalidMessage : undefined), ...rest }), name && _jsx("input", { type: "hidden", name: name, value: ibanOf(raw) })] }));
+});

package/dist/MobileInput.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+import { type InputProps } from "./Input.js";
+type Base = Omit<InputProps, "value" | "defaultValue" | "onChange" | "type" | "inputMode" | "addonEnd">;
+export interface MobileInputProps extends Base {
+    /** مقدار کنترل‌شده، مثل "09123456789" یا "+989123456789" */
+    value?: string;
+    defaultValue?: string;
+    /** با هر تغییر: شماره به شکل ۰۹xxxxxxxxx، معتبر بودن و نام اپراتور */
+    onValueChange?: (value: string, valid: boolean, operator: string | null) => void;
+    /** @default "fa" */
+    digits?: "fa" | "latin";
+    /** نمایش نام اپراتور @default true */
+    showOperator?: boolean;
+    /** @default "شماره موبایل معتبر نیست." */
+    invalidMessage?: ReactNode;
+}
+/** فیلد شماره موبایل: +98 و 0098 را به 09 تبدیل می‌کند، گروه‌بندی و تشخیص اپراتور */
+export declare const MobileInput: import("react").ForwardRefExoticComponent<MobileInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/MobileInput.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState } from "react";
+import { formatMobile, getMobileOperator, isValidMobile, normalizeMobile } from "@kashi-ui/persian";
+import { Input } from "./Input.js";
+import { useDigitsInput } from "./useDigitsInput.js";
+import { mergeRefs } from "./utils.js";
+/** فیلد شماره موبایل: +98 و 0098 را به 09 تبدیل می‌کند، گروه‌بندی و تشخیص اپراتور */
+export const MobileInput = forwardRef(function MobileInput({ value, defaultValue, onValueChange, digits = "fa", showOperator = true, invalidMessage = "شماره موبایل معتبر نیست.", error, name, id, onBlur, placeholder, ...rest }, ref) {
+    const autoId = useId();
+    const inputId = id ?? autoId;
+    const [touched, setTouched] = useState(false);
+    const { raw, shown, inputRef, handleChange } = useDigitsInput({
+        value,
+        defaultValue,
+        maxDigits: 11,
+        normalize: normalizeMobile,
+        format: formatMobile,
+        digits,
+    });
+    const operator = showOperator ? getMobileOperator(raw) : null;
+    const showInvalid = raw.length > 0 && (touched || raw.length === 11) && !isValidMobile(raw);
+    const opId = `${inputId}-operator`;
+    return (_jsxs(_Fragment, { children: [_jsx(Input, { ref: mergeRefs(ref, inputRef), id: inputId, type: "tel", inputMode: "tel", autoComplete: "tel-national", dir: "ltr", placeholder: placeholder ?? (digits === "fa" ? "۰۹۱۲ ۳۴۵ ۶۷۸۹" : "0912 345 6789"), value: shown, onChange: (e) => {
+                    const next = handleChange(e);
+                    onValueChange?.(next, isValidMobile(next), getMobileOperator(next)?.name ?? null);
+                }, onBlur: (e) => {
+                    setTouched(true);
+                    onBlur?.(e);
+                }, addonEnd: operator ? _jsx("span", { className: "k-input__meta", id: opId, children: operator.name }) : undefined, "aria-describedby": operator ? opId : undefined, error: error ?? (showInvalid ? invalidMessage : undefined), ...rest }), name && _jsx("input", { type: "hidden", name: name, value: raw })] }));
+});

package/dist/PriceInput.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+import { type InputProps } from "./Input.js";
+type Base = Omit<InputProps, "value" | "defaultValue" | "onChange" | "type" | "inputMode" | "addonEnd" | "min" | "max">;
+export interface PriceInputProps extends Base {
+    value?: number | null;
+    defaultValue?: number | null;
+    onValueChange?: (value: number | null) => void;
+    /** واحد پول کنار فیلد @default "تومان" */
+    unit?: ReactNode;
+    /** نمایش مبلغ به حروف زیر فیلد @default true */
+    showWords?: boolean;
+    /** @default "fa" */
+    digits?: "fa" | "latin";
+    min?: number;
+    max?: number;
+    /** پیام خطای بیرون از محدوده */
+    rangeMessage?: (min?: number, max?: number) => ReactNode;
+}
+/** فیلد مبلغ: جداکنندهٔ هزارگان، واحد پول و نمایش مبلغ به حروف برای اطمینان کاربر */
+export declare const PriceInput: import("react").ForwardRefExoticComponent<PriceInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/PriceInput.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { formatNumber, numberToWords, toFaDigits } from "@kashi-ui/persian";
+import { Input } from "./Input.js";
+import { useDigitsInput } from "./useDigitsInput.js";
+import { mergeRefs } from "./utils.js";
+const toRaw = (n) => (n === null || n === undefined ? undefined : String(Math.trunc(Math.abs(n))));
+/** فیلد مبلغ: جداکنندهٔ هزارگان، واحد پول و نمایش مبلغ به حروف برای اطمینان کاربر */
+export const PriceInput = forwardRef(function PriceInput({ value, defaultValue, onValueChange, unit = "تومان", showWords = true, digits = "fa", min, max, rangeMessage = (lo, hi) => `مبلغ باید ${lo !== undefined ? `حداقل ${toFaDigits(formatNumber(lo))}` : ""}${lo !== undefined && hi !== undefined ? " و " : ""}${hi !== undefined ? `حداکثر ${toFaDigits(formatNumber(hi))}` : ""} باشد.`, error, hint, name, onBlur, placeholder, ...rest }, ref) {
+    const [touched, setTouched] = useState(false);
+    const { raw, shown, inputRef, handleChange } = useDigitsInput({
+        value: value === undefined ? undefined : (toRaw(value) ?? ""),
+        defaultValue: toRaw(defaultValue),
+        maxDigits: 15,
+        normalize: (d) => d.replace(/^0+(?=\d)/, ""),
+        format: (d) => (d ? formatNumber(d, { digits: "latin" }).replace(/,/g, "٬") : ""),
+        digits,
+    });
+    const n = raw ? Number(raw) : null;
+    const outOfRange = n !== null && ((min !== undefined && n < min) || (max !== undefined && n > max));
+    const words = showWords && n !== null ? `${numberToWords(n)}${typeof unit === "string" ? ` ${unit}` : ""}` : null;
+    return (_jsxs(_Fragment, { children: [_jsx(Input, { ref: mergeRefs(ref, inputRef), type: "text", inputMode: "numeric", autoComplete: "off", dir: "ltr", placeholder: placeholder ?? (digits === "fa" ? "۰" : "0"), value: shown, onChange: (e) => {
+                    const next = handleChange(e);
+                    onValueChange?.(next ? Number(next) : null);
+                }, onBlur: (e) => {
+                    setTouched(true);
+                    onBlur?.(e);
+                }, addonEnd: unit ? _jsx("span", { className: "k-input__meta", children: unit }) : undefined, hint: words ?? hint, error: error ?? (touched && outOfRange ? rangeMessage(min, max) : undefined), ...rest }), name && _jsx("input", { type: "hidden", name: name, value: raw })] }));
+});

package/dist/index.d.ts

@@ -22,3 +22,9 @@ export { Calendar } from "./Calendar.js";
 export type { CalendarProps, CalendarLabels } from "./Calendar.js";
 export { DatePicker } from "./DatePicker.js";
 export type { DatePickerProps } from "./DatePicker.js";
+export { IbanInput } from "./IbanInput.js";
+export type { IbanInputProps } from "./IbanInput.js";
+export { MobileInput } from "./MobileInput.js";
+export type { MobileInputProps } from "./MobileInput.js";
+export { PriceInput } from "./PriceInput.js";
+export type { PriceInputProps } from "./PriceInput.js";

package/dist/index.js

@@ -11,3 +11,6 @@ export { NationalIdInput } from "./NationalIdInput.js";
 export { CardNumberInput } from "./CardNumberInput.js";
 export { Calendar } from "./Calendar.js";
 export { DatePicker } from "./DatePicker.js";
+export { IbanInput } from "./IbanInput.js";
+export { MobileInput } from "./MobileInput.js";
+export { PriceInput } from "./PriceInput.js";

package/dist/useDigitsInput.d.ts

@@ -0,0 +1,23 @@
+import { type ChangeEvent } from "react";
+export interface DigitsInputOptions {
+    value?: string;
+    defaultValue?: string;
+    /** حداکثر تعداد رقم */
+    maxDigits: number;
+    /** متن نمایشی از روی ارقام خام (با ارقام لاتین) */
+    format: (raw: string) => string;
+    /** پیش‌پردازش ارقام، مثلاً تبدیل +98 به 0 */
+    normalize?: (digits: string) => string;
+    /** خط ارقام نمایشی */
+    digits: "fa" | "latin";
+}
+/**
+ * منطق مشترک فیلدهای عددی قالب‌بندی‌شده (کارت، شبا، موبایل، مبلغ):
+ * ارقام فارسی و لاتین را می‌پذیرد، بقیه را حذف می‌کند و مکان‌نما را پس از قالب‌بندی سر جایش نگه می‌دارد.
+ */
+export declare function useDigitsInput({ value, defaultValue, maxDigits, format, normalize, digits }: DigitsInputOptions): {
+    raw: string;
+    shown: string;
+    inputRef: import("react").RefObject<HTMLInputElement>;
+    handleChange: (e: ChangeEvent<HTMLInputElement>) => string;
+};

package/dist/useDigitsInput.js

@@ -0,0 +1,46 @@
+import { useRef, useState } from "react";
+import { onlyDigits } from "@kashi-ui/persian";
+import { useIsomorphicLayoutEffect } from "./utils.js";
+const FA = "۰۱۲۳۴۵۶۷۸۹";
+const fa = (s) => s.replace(/\d/g, (d) => FA[Number(d)]);
+/** موقعیت مکان‌نما پس از n رقم در متن قالب‌بندی‌شده */
+function caretAfter(text, n) {
+    if (n === 0)
+        return text.search(/[0-9۰-۹]/) === -1 ? text.length : text.search(/[0-9۰-۹]/);
+    let seen = 0;
+    for (let i = 0; i < text.length; i++)
+        if (/[0-9۰-۹]/.test(text[i]) && ++seen === n)
+            return i + 1;
+    return text.length;
+}
+/**
+ * منطق مشترک فیلدهای عددی قالب‌بندی‌شده (کارت، شبا، موبایل، مبلغ):
+ * ارقام فارسی و لاتین را می‌پذیرد، بقیه را حذف می‌کند و مکان‌نما را پس از قالب‌بندی سر جایش نگه می‌دارد.
+ */
+export function useDigitsInput({ value, defaultValue = "", maxDigits, format, normalize = (d) => d, digits }) {
+    const clean = (input) => normalize(onlyDigits(input)).slice(0, maxDigits);
+    const [inner, setInner] = useState(() => clean(defaultValue));
+    const raw = value !== undefined ? clean(value) : inner;
+    const formatted = format(raw);
+    const shown = digits === "fa" ? fa(formatted) : formatted;
+    const inputRef = useRef(null);
+    const caret = useRef(null);
+    useIsomorphicLayoutEffect(() => {
+        if (caret.current !== null && inputRef.current === document.activeElement) {
+            const pos = caretAfter(shown, caret.current);
+            inputRef.current?.setSelectionRange(pos, pos);
+            caret.current = null;
+        }
+    });
+    /** ارقام خام جدید را برمی‌گرداند؛ حالت داخلی را هم به‌روز می‌کند */
+    const handleChange = (e) => {
+        const el = e.target;
+        const before = el.value.slice(0, el.selectionStart ?? el.value.length);
+        const next = clean(el.value);
+        caret.current = Math.min(onlyDigits(before).length, next.length);
+        if (value === undefined)
+            setInner(next);
+        return next;
+    };
+    return { raw, shown, inputRef, handleChange };
+}

package/dist/utils.d.ts

@@ -1,5 +1,7 @@
-import type { Ref, RefCallback } from "react";
+import { useLayoutEffect, type Ref, type RefCallback } from "react";
 export { toFaDigits } from "@kashi-ui/persian";
 /** چند ref را یکی می‌کند */
 export declare function mergeRefs<T>(...refs: Array<Ref<T> | undefined>): RefCallback<T>;
 export declare function isDev(): boolean;
+/** useLayoutEffect در مرورگر، useEffect در سرور؛ تا در Next.js و رندر سمت سرور هشدار ندهد */
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;

package/dist/utils.js

@@ -1,3 +1,4 @@
+import { useEffect, useLayoutEffect } from "react";
 export { toFaDigits } from "@kashi-ui/persian";
 /** چند ref را یکی می‌کند */
 export function mergeRefs(...refs) {
@@ -13,3 +14,5 @@ export function mergeRefs(...refs) {
 export function isDev() {
     return typeof process !== "undefined" && process.env.NODE_ENV !== "production";
 }
+/** useLayoutEffect در مرورگر، useEffect در سرور؛ تا در Next.js و رندر سمت سرور هشدار ندهد */
+export const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kashi-ui/react",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "کامپوننت‌های React دیزاین‌سیستم کاشی",
   "type": "module",
   "main": "./dist/index.js",
@@ -22,7 +22,7 @@
     "test": "node --test test/*.test.mjs"
   },
   "peerDependencies": {
-    "@kashi-ui/css": "^0.3.0",
+    "@kashi-ui/css": "^0.4.0",
     "react": ">=18"
   },
   "devDependencies": {
@@ -59,6 +59,7 @@
     }
   },
   "dependencies": {
-    "@kashi-ui/persian": "^0.3.0"
+    "@kashi-ui/bank-logos": "^0.4.0",
+    "@kashi-ui/persian": "^0.4.0"
   }
 }