@kashi-ui/react 0.3.0 → 0.5.0

package/README.md

@@ -20,8 +20,8 @@ export function SignUp() {
 }
 ```
 
-کامپوننت‌ها: Button · Input · Textarea · Badge · Card · Alert · Avatar · AvatarGroup · Checkbox · Switch
+کامپوننت‌ها: Button · Input · Textarea · Select · Checkbox · RadioGroup · Switch · Badge · Card · Alert · Avatar · AvatarGroup · Tabs · Dialog · Toast · Tooltip · RelativeTime
 
-فارسی: 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/Dialog.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from "react";
+export interface DialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: ReactNode;
+    description?: ReactNode;
+    /** آیکون شاخص بالای عنوان */
+    icon?: ReactNode;
+    /** «danger» برای تأیید عملیات مخرب */
+    tone?: "default" | "danger";
+    /** @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** دکمه‌های پایین پنجره */
+    footer?: ReactNode;
+    /** بستن با کلیک روی پس‌زمینه @default true */
+    dismissible?: boolean;
+    /** @default "بستن" */
+    closeLabel?: string;
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * پنجرهٔ گفتگو روی <dialog> بومی با showModal:
+ * فوکوس داخل پنجره می‌ماند، Esc می‌بندد، بقیهٔ صفحه از دسترس صفحه‌خوان خارج می‌شود
+ * و پس از بستن، فوکوس به عنصری که پنجره را باز کرده برمی‌گردد.
+ */
+export declare function Dialog({ open, onOpenChange, title, description, icon, tone, size, footer, dismissible, closeLabel, className, children, }: DialogProps): import("react").JSX.Element;

package/dist/Dialog.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+import { cx } from "./cx.js";
+import { CloseIcon } from "./icons.js";
+/**
+ * پنجرهٔ گفتگو روی <dialog> بومی با showModal:
+ * فوکوس داخل پنجره می‌ماند، Esc می‌بندد، بقیهٔ صفحه از دسترس صفحه‌خوان خارج می‌شود
+ * و پس از بستن، فوکوس به عنصری که پنجره را باز کرده برمی‌گردد.
+ */
+export function Dialog({ open, onOpenChange, title, description, icon, tone = "default", size = "md", footer, dismissible = true, closeLabel = "بستن", className, children, }) {
+    const ref = useRef(null);
+    const opener = useRef(null);
+    const id = useId();
+    useEffect(() => {
+        const d = ref.current;
+        if (!d)
+            return;
+        if (open && !d.open) {
+            opener.current = document.activeElement;
+            d.showModal();
+        }
+        else if (!open && d.open) {
+            d.close();
+        }
+    }, [open]);
+    return (_jsxs("dialog", { ref: ref, className: cx("k-dialog", size !== "md" && `k-dialog--${size}`, tone === "danger" && "k-dialog--danger", className), "aria-labelledby": `${id}-title`, "aria-describedby": description ? `${id}-desc` : undefined, onClose: () => {
+            onOpenChange(false);
+            opener.current?.focus?.();
+        }, onCancel: (e) => {
+            // Esc: بستن از طریق state تا والد همگام بماند
+            e.preventDefault();
+            onOpenChange(false);
+        }, onClick: (e) => {
+            // کلیک روی خود <dialog> یعنی کلیک روی پس‌زمینه
+            if (dismissible && e.target === ref.current)
+                onOpenChange(false);
+        }, children: [_jsxs("div", { className: "k-dialog__header", children: [icon && _jsx("span", { className: "k-dialog__icon", "aria-hidden": "true", children: icon }), _jsxs("div", { className: "k-dialog__heading", children: [_jsx("h2", { className: "k-dialog__title", id: `${id}-title`, children: title }), description && _jsx("p", { className: "k-dialog__description", id: `${id}-desc`, children: description })] }), _jsx("button", { type: "button", className: "k-btn k-btn--tertiary k-btn--icon k-btn--sm k-dialog__close", "aria-label": closeLabel, onClick: () => onOpenChange(false), children: _jsx(CloseIcon, {}) })] }), children && _jsx("div", { className: "k-dialog__body", children: children }), footer && _jsx("div", { className: "k-dialog__footer", children: footer })] }));
+}

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/Radio.d.ts

@@ -0,0 +1,26 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+export interface RadioGroupProps {
+    /** عنوان گروه (legend) */
+    label: ReactNode;
+    /** نام فیلد فرم؛ پیش‌فرض خودکار */
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** «list» (پیش‌فرض)، «inline» افقی، «cards» کارت‌های قابل‌انتخاب */
+    variant?: "list" | "inline" | "cards";
+    hint?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+/** گروه رادیو با fieldset و legend؛ پیمایش با کلیدهای جهت‌دار را مرورگر انجام می‌دهد */
+export declare function RadioGroup({ label, name, value, defaultValue, onChange, variant, hint, error, required, disabled, className, children, }: RadioGroupProps): import("react").JSX.Element;
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value"> {
+    value: string;
+    label: ReactNode;
+    description?: ReactNode;
+}
+export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Radio.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useId, useState } from "react";
+import { cx } from "./cx.js";
+import { isDev } from "./utils.js";
+const RadioCtx = createContext(null);
+/** گروه رادیو با fieldset و legend؛ پیمایش با کلیدهای جهت‌دار را مرورگر انجام می‌دهد */
+export function RadioGroup({ label, name, value, defaultValue, onChange, variant = "list", hint, error, required, disabled, className, children, }) {
+    const id = useId();
+    const [inner, setInner] = useState(defaultValue);
+    const current = value !== undefined ? value : inner;
+    const describedBy = [error && `${id}-error`, hint && `${id}-hint`].filter(Boolean).join(" ") || undefined;
+    return (_jsxs("fieldset", { className: cx("k-radio-group", variant !== "list" && `k-radio-group--${variant}`, className), "aria-describedby": describedBy, "aria-required": required || undefined, "aria-invalid": error ? true : undefined, disabled: disabled, children: [_jsxs("legend", { className: "k-label", children: [label, required && _jsx("span", { className: "k-label__required", "aria-hidden": "true", children: "*" })] }), _jsx(RadioCtx.Provider, { value: {
+                    name: name ?? id,
+                    value: current,
+                    invalid: !!error,
+                    disabled,
+                    setValue: (v) => {
+                        if (value === undefined)
+                            setInner(v);
+                        onChange?.(v);
+                    },
+                }, children: children }), error && _jsx("p", { className: "k-hint k-hint--error", id: `${id}-error`, children: error }), hint && _jsx("p", { className: "k-hint", id: `${id}-hint`, children: hint })] }));
+}
+export const Radio = forwardRef(function Radio({ value, label, description, id, className, disabled, name, ...rest }, ref) {
+    const ctx = useContext(RadioCtx);
+    // بدون name مشترک، مرورگر رادیوها را یک گروه نمی‌داند و چند گزینه هم‌زمان انتخاب می‌شود
+    if (!ctx && !name && isDev()) {
+        console.warn("[kashi] <Radio> باید داخل <RadioGroup> باشد یا name داشته باشد؛ وگرنه چند گزینه هم‌زمان قابل‌انتخاب است.");
+    }
+    const autoId = useId();
+    const inputId = id ?? autoId;
+    return (_jsxs("label", { className: cx("k-check", className), htmlFor: inputId, children: [_jsx("input", { ref: ref, type: "radio", className: "k-radio", id: inputId, name: ctx?.name ?? name, value: value, checked: ctx ? ctx.value === value : undefined, onChange: () => ctx?.setValue(value), disabled: disabled, "aria-describedby": description ? `${inputId}-desc` : undefined, ...rest }), _jsxs("span", { className: "k-check__text", children: [_jsx("span", { className: "k-check__label", children: label }), description && _jsx("span", { className: "k-check__description", id: `${inputId}-desc`, children: description })] })] }));
+});

package/dist/RelativeTime.d.ts

@@ -0,0 +1,10 @@
+import { type HTMLAttributes } from "react";
+export interface RelativeTimeProps extends Omit<HTMLAttributes<HTMLTimeElement>, "children"> {
+    date: Date;
+    /** @default "fa" */
+    digits?: "fa" | "latin";
+    /** فاصلهٔ به‌روزرسانی بر حسب میلی‌ثانیه @default 60000 */
+    refresh?: number;
+}
+/** «۵ دقیقه پیش» در یک <time> معنایی؛ تاریخ کامل شمسی در title و برای صفحه‌خوان در دسترس است */
+export declare function RelativeTime({ date, digits, refresh, ...rest }: RelativeTimeProps): import("react").JSX.Element;

package/dist/RelativeTime.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { formatJalali, formatRelative } from "@kashi-ui/persian";
+/** «۵ دقیقه پیش» در یک <time> معنایی؛ تاریخ کامل شمسی در title و برای صفحه‌خوان در دسترس است */
+export function RelativeTime({ date, digits = "fa", refresh = 60000, ...rest }) {
+    const [now, setNow] = useState(() => new Date());
+    useEffect(() => {
+        const t = setInterval(() => setNow(new Date()), refresh);
+        return () => clearInterval(t);
+    }, [refresh]);
+    return (_jsx("time", { dateTime: date.toISOString(), title: formatJalali(date, { style: "full", digits }), ...rest, children: formatRelative(date, { now, digits }) }));
+}

package/dist/Select.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode, type SelectHTMLAttributes } from "react";
+export interface SelectOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    /** گزینهٔ خالی اول، مثل «انتخاب کنید» */
+    placeholder?: string;
+    /** گزینه‌ها؛ یا به‌جای آن <option> را به‌عنوان children بدهید */
+    options?: SelectOption[];
+    /** @default "md" */
+    size?: "sm" | "md" | "lg";
+    fieldClassName?: string;
+}
+/** فهرست انتخابی روی <select> بومی: در گوشی انتخاب‌گر سیستم باز می‌شود و صفحه‌خوان کامل پشتیبانی می‌کند */
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/Select.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { cx } from "./cx.js";
+import { Field, describedBy } from "./Field.js";
+/** فهرست انتخابی روی <select> بومی: در گوشی انتخاب‌گر سیستم باز می‌شود و صفحه‌خوان کامل پشتیبانی می‌کند */
+export const Select = forwardRef(function Select({ label, hint, error, placeholder, options, size = "md", id, required, className, fieldClassName, children, "aria-describedby": extra, ...rest }, ref) {
+    const autoId = useId();
+    const selectId = id ?? autoId;
+    const placeholderSelected = placeholder !== undefined && rest.value === undefined && rest.defaultValue === undefined;
+    return (_jsx(Field, { id: selectId, label: label, hint: hint, error: error, required: required, className: fieldClassName, children: _jsx("div", { className: cx("k-select", size !== "md" && `k-select--${size}`, className), children: _jsxs("select", { ref: ref, id: selectId, className: "k-select__control", required: required, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy(selectId, hint, error, extra), defaultValue: placeholderSelected ? "" : undefined, ...rest, children: [placeholder !== undefined && _jsx("option", { value: "", disabled: true, children: placeholder }), options?.map((o) => (_jsx("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value))), children] }) }) }));
+});

package/dist/Tabs.d.ts

@@ -0,0 +1,27 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** @default "line" */
+    variant?: "line" | "pill" | "segmented";
+    /** زبانه‌ها تمام عرض را پر کنند */
+    block?: boolean;
+}
+/** زبانه‌ها با الگوی Tabs در WAI-ARIA؛ کلیدهای جهت‌دار در راست‌به‌چپ برعکس عمل می‌کنند */
+export declare function Tabs({ value, defaultValue, onChange, variant, block, className, children, ...rest }: TabsProps): import("react").JSX.Element;
+export interface TabListProps extends HTMLAttributes<HTMLDivElement> {
+    /** نام فهرست برای صفحه‌خوان، مثل «تنظیمات حساب» */
+    "aria-label": string;
+}
+export declare function TabList({ className, children, ...rest }: TabListProps): import("react").JSX.Element;
+export interface TabProps extends Omit<HTMLAttributes<HTMLButtonElement>, "value"> {
+    value: string;
+    disabled?: boolean;
+}
+export declare function Tab({ value, className, children, disabled, ...rest }: TabProps): import("react").JSX.Element;
+export interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+    value: string;
+    children: ReactNode;
+}
+export declare function TabPanel({ value, className, children, ...rest }: TabPanelProps): import("react").JSX.Element;

package/dist/Tabs.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useId, useRef, useState } from "react";
+import { cx } from "./cx.js";
+const TabsCtx = createContext(null);
+const useTabs = () => {
+    const ctx = useContext(TabsCtx);
+    if (!ctx)
+        throw new Error("[kashi] Tab و TabPanel باید داخل <Tabs> باشند.");
+    return ctx;
+};
+/** زبانه‌ها با الگوی Tabs در WAI-ARIA؛ کلیدهای جهت‌دار در راست‌به‌چپ برعکس عمل می‌کنند */
+export function Tabs({ value, defaultValue = "", onChange, variant = "line", block, className, children, ...rest }) {
+    const id = useId();
+    const [inner, setInner] = useState(defaultValue);
+    const selected = value !== undefined ? value : inner;
+    return (_jsx(TabsCtx.Provider, { value: {
+            id,
+            selected,
+            select: (v) => {
+                if (value === undefined)
+                    setInner(v);
+                onChange?.(v);
+            },
+        }, children: _jsx("div", { className: cx("k-tabs", `k-tabs--${variant}`, block && "k-tabs--block", className), ...rest, children: children }) }));
+}
+export function TabList({ className, children, ...rest }) {
+    const ref = useRef(null);
+    const onKeyDown = (e) => {
+        const tabs = [...(ref.current?.querySelectorAll('[role="tab"]:not(:disabled)') ?? [])];
+        const i = tabs.indexOf(document.activeElement);
+        if (i < 0)
+            return;
+        const rtl = getComputedStyle(ref.current).direction === "rtl";
+        const moves = {
+            ArrowLeft: rtl ? i + 1 : i - 1,
+            ArrowRight: rtl ? i - 1 : i + 1,
+            Home: 0,
+            End: tabs.length - 1,
+        };
+        if (!(e.key in moves))
+            return;
+        e.preventDefault();
+        const next = tabs[(moves[e.key] + tabs.length) % tabs.length];
+        next.focus();
+        next.click(); // فعال‌سازی خودکار با فوکوس
+    };
+    return (_jsx("div", { ref: ref, role: "tablist", className: cx("k-tabs__list", className), onKeyDown: onKeyDown, ...rest, children: children }));
+}
+export function Tab({ value, className, children, disabled, ...rest }) {
+    const { id, selected, select } = useTabs();
+    const on = selected === value;
+    return (_jsx("button", { type: "button", role: "tab", id: `${id}-tab-${value}`, "aria-selected": on, "aria-controls": `${id}-panel-${value}`, tabIndex: on ? 0 : -1, disabled: disabled, className: cx("k-tabs__tab", className), onClick: () => select(value), ...rest, children: children }));
+}
+export function TabPanel({ value, className, children, ...rest }) {
+    const { id, selected } = useTabs();
+    return (_jsx("div", { role: "tabpanel", id: `${id}-panel-${value}`, "aria-labelledby": `${id}-tab-${value}`, hidden: selected !== value, tabIndex: 0, className: cx("k-tabs__panel", className), ...rest, children: children }));
+}

package/dist/Toast.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+export type ToastTone = "neutral" | "success" | "error" | "warning" | "info";
+export interface ToastOptions {
+    title: ReactNode;
+    description?: ReactNode;
+    tone?: ToastTone;
+    /** میلی‌ثانیه؛ Infinity برای ماندن تا بستن دستی. پیش‌فرض ۵ ثانیه، و بی‌نهایت اگر action داشته باشد */
+    duration?: number;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+/** نمایش اعلان کوتاه؛ شناسهٔ آن را برمی‌گرداند */
+export declare function toast(options: ToastOptions | string): number;
+export declare namespace toast {
+    var success: (title: ReactNode, o?: Omit<ToastOptions, "title" | "tone">) => number;
+    var error: (title: ReactNode, o?: Omit<ToastOptions, "title" | "tone">) => number;
+    var warning: (title: ReactNode, o?: Omit<ToastOptions, "title" | "tone">) => number;
+    var info: (title: ReactNode, o?: Omit<ToastOptions, "title" | "tone">) => number;
+    var dismiss: (id: number) => void;
+}
+export interface ToasterProps {
+    /** @default "bottom" */
+    position?: "top" | "bottom";
+    /** @default "اعلان‌ها" */
+    label?: string;
+    /** @default "بستن اعلان" */
+    closeLabel?: string;
+}
+/** محل نمایش اعلان‌ها؛ یک بار در ریشهٔ برنامه قرار دهید */
+export declare function Toaster({ position, label, closeLabel }: ToasterProps): import("react").JSX.Element;

package/dist/Toast.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { cx } from "./cx.js";
+import { CloseIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from "./icons.js";
+// مخزن سادهٔ سراسری؛ هر جای برنامه می‌تواند toast() را صدا بزند
+let items = [];
+let nextId = 1;
+const listeners = new Set();
+const emit = () => listeners.forEach((l) => l());
+const subscribe = (l) => {
+    listeners.add(l);
+    return () => listeners.delete(l);
+};
+function dismiss(id) {
+    items = items.map((t) => (t.id === id ? { ...t, closing: true } : t));
+    emit();
+    setTimeout(() => {
+        items = items.filter((t) => t.id !== id);
+        emit();
+    }, 200);
+}
+/** نمایش اعلان کوتاه؛ شناسهٔ آن را برمی‌گرداند */
+export function toast(options) {
+    const o = typeof options === "string" ? { title: options } : options;
+    const id = nextId++;
+    items = [...items, { ...o, id }];
+    emit();
+    return id;
+}
+toast.success = (title, o = {}) => toast({ ...o, title, tone: "success" });
+toast.error = (title, o = {}) => toast({ ...o, title, tone: "error" });
+toast.warning = (title, o = {}) => toast({ ...o, title, tone: "warning" });
+toast.info = (title, o = {}) => toast({ ...o, title, tone: "info" });
+toast.dismiss = dismiss;
+const ICONS = {
+    neutral: InfoIcon, info: InfoIcon, success: SuccessIcon, warning: WarningIcon, error: ErrorIcon,
+};
+function ToastView({ t, closeLabel }) {
+    const duration = t.duration ?? (t.action ? Infinity : 5000);
+    const remaining = useRef(duration);
+    const started = useRef(0);
+    const timer = useRef();
+    const [paused, setPaused] = useState(false);
+    // زمان‌سنج با توقف هنگام hover یا فوکوس (WCAG 2.2.1)
+    useEffect(() => {
+        if (!Number.isFinite(duration) || paused || t.closing)
+            return;
+        started.current = Date.now();
+        timer.current = setTimeout(() => dismiss(t.id), remaining.current);
+        return () => {
+            clearTimeout(timer.current);
+            remaining.current -= Date.now() - started.current;
+        };
+    }, [paused, t.closing]);
+    const Icon = ICONS[t.tone ?? "neutral"];
+    return (_jsxs("li", { className: cx("k-toast", t.tone && t.tone !== "neutral" && `k-toast--${t.tone}`), "data-state": t.closing ? "closing" : "open", role: t.tone === "error" ? "alert" : "status", onMouseEnter: () => setPaused(true), onMouseLeave: () => setPaused(false), onFocus: () => setPaused(true), onBlur: () => setPaused(false), onKeyDown: (e) => e.key === "Escape" && dismiss(t.id), children: [_jsx("span", { className: "k-toast__icon", "aria-hidden": "true", children: _jsx(Icon, {}) }), _jsxs("div", { className: "k-toast__content", children: [_jsx("p", { className: "k-toast__title", children: t.title }), t.description && _jsx("p", { className: "k-toast__description", children: t.description }), t.action && (_jsx("button", { type: "button", className: "k-btn k-btn--link k-toast__action", onClick: () => {
+                            t.action.onClick();
+                            dismiss(t.id);
+                        }, children: t.action.label }))] }), _jsx("button", { type: "button", className: "k-btn k-btn--tertiary k-btn--icon k-btn--sm k-toast__close", "aria-label": closeLabel, onClick: () => dismiss(t.id), children: _jsx(CloseIcon, {}) }), Number.isFinite(duration) && _jsx("span", { className: "k-toast__progress", "aria-hidden": "true", style: { animationDuration: `${duration}ms` } })] }));
+}
+/** محل نمایش اعلان‌ها؛ یک بار در ریشهٔ برنامه قرار دهید */
+export function Toaster({ position = "bottom", label = "اعلان‌ها", closeLabel = "بستن اعلان" }) {
+    const list = useSyncExternalStore(subscribe, () => items, () => items);
+    return (_jsx("section", { "aria-label": label, children: _jsx("ol", { className: cx("k-toaster", position === "top" && "k-toaster--top"), "aria-live": "polite", children: list.map((t) => _jsx(ToastView, { t: t, closeLabel: closeLabel }, t.id)) }) }));
+}

package/dist/Tooltip.d.ts

@@ -0,0 +1,16 @@
+import { type ReactElement, type ReactNode } from "react";
+export interface TooltipProps {
+    /** متن راهنما؛ فقط توضیح تکمیلی، نه اطلاعات ضروری */
+    content: ReactNode;
+    /** عنصر فوکوس‌پذیر، معمولاً یک دکمه */
+    children: ReactElement;
+    /** @default "top" */
+    placement?: "top" | "bottom";
+    /** تأخیر نمایش با hover بر حسب میلی‌ثانیه @default 300 */
+    delay?: number;
+}
+/**
+ * راهنمای کوتاه طبق WCAG 1.4.13: با hover و فوکوس نمایش داده می‌شود، روی خودش هم hover پذیر است
+ * و با Esc بسته می‌شود. با aria-describedby به عنصر متصل است.
+ */
+export declare function Tooltip({ content, children, placement, delay }: TooltipProps): import("react").JSX.Element;

package/dist/Tooltip.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useEffect, useId, useRef, useState } from "react";
+import { cx } from "./cx.js";
+/**
+ * راهنمای کوتاه طبق WCAG 1.4.13: با hover و فوکوس نمایش داده می‌شود، روی خودش هم hover پذیر است
+ * و با Esc بسته می‌شود. با aria-describedby به عنصر متصل است.
+ */
+export function Tooltip({ content, children, placement = "top", delay = 300 }) {
+    const id = useId();
+    const [open, setOpen] = useState(false);
+    const timer = useRef();
+    const show = (wait) => {
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => setOpen(true), wait);
+    };
+    const hide = () => {
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => setOpen(false), 100);
+    };
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && setOpen(false);
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open]);
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const child = isValidElement(children)
+        ? cloneElement(children, {
+            "aria-describedby": [children.props["aria-describedby"], id].filter(Boolean).join(" "),
+        })
+        : children;
+    return (_jsxs("span", { className: "k-tooltip-anchor", onMouseEnter: () => show(delay), onMouseLeave: hide, onFocus: () => show(0), onBlur: hide, children: [child, _jsx("span", { role: "tooltip", id: id, className: cx("k-tooltip", placement === "bottom" && "k-tooltip--bottom"), hidden: !open, children: content })] }));
+}

package/dist/index.d.ts

@@ -22,3 +22,23 @@ 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";
+export { RadioGroup, Radio } from "./Radio.js";
+export type { RadioGroupProps, RadioProps } from "./Radio.js";
+export { Select } from "./Select.js";
+export type { SelectProps, SelectOption } from "./Select.js";
+export { Tabs, TabList, Tab, TabPanel } from "./Tabs.js";
+export type { TabsProps, TabListProps, TabProps, TabPanelProps } from "./Tabs.js";
+export { Dialog } from "./Dialog.js";
+export type { DialogProps } from "./Dialog.js";
+export { Toaster, toast } from "./Toast.js";
+export type { ToasterProps, ToastOptions, ToastTone } from "./Toast.js";
+export { Tooltip } from "./Tooltip.js";
+export type { TooltipProps } from "./Tooltip.js";
+export { RelativeTime } from "./RelativeTime.js";
+export type { RelativeTimeProps } from "./RelativeTime.js";

package/dist/index.js

@@ -11,3 +11,13 @@ 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";
+export { RadioGroup, Radio } from "./Radio.js";
+export { Select } from "./Select.js";
+export { Tabs, TabList, Tab, TabPanel } from "./Tabs.js";
+export { Dialog } from "./Dialog.js";
+export { Toaster, toast } from "./Toast.js";
+export { Tooltip } from "./Tooltip.js";
+export { RelativeTime } from "./RelativeTime.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.5.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.5.0",
     "react": ">=18"
   },
   "devDependencies": {
@@ -59,6 +59,7 @@
     }
   },
   "dependencies": {
-    "@kashi-ui/persian": "^0.3.0"
+    "@kashi-ui/bank-logos": "^0.5.0",
+    "@kashi-ui/persian": "^0.5.0"
   }
 }