@kashi-ui/react 0.2.0 → 0.4.0

package/README.md

@@ -22,4 +22,6 @@ export function SignUp() {
 
 کامپوننت‌ها: Button · Input · Textarea · Badge · Card · Alert · Avatar · AvatarGroup · Checkbox · Switch
 
+فارسی: 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/Calendar.d.ts

@@ -0,0 +1,37 @@
+import { type ReactNode } from "react";
+export declare const sameDay: (a?: Date | null, b?: Date | null) => boolean;
+export interface CalendarLabels {
+    /** @default "ماه قبل" */
+    prevMonth?: string;
+    /** @default "ماه بعد" */
+    nextMonth?: string;
+    /** @default "ماه" */
+    month?: string;
+    /** @default "سال" */
+    year?: string;
+}
+export interface CalendarProps {
+    /** تاریخ انتخاب‌شده (کنترل‌شده) */
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onChange?: (date: Date) => void;
+    /** کمترین تاریخ قابل‌انتخاب */
+    min?: Date;
+    /** بیشترین تاریخ قابل‌انتخاب */
+    max?: Date;
+    /** غیرفعال کردن روزهای خاص، مثلاً جمعه‌ها */
+    isDateDisabled?: (date: Date) => boolean;
+    /** @default "fa" */
+    digits?: "fa" | "latin";
+    /** فوکوس روی روز انتخاب‌شده (یا امروز) هنگام نمایش */
+    autoFocus?: boolean;
+    /** محدودهٔ سال‌های فهرست سال؛ پیش‌فرض از min/max یا ۱۰۰ سال قبل تا ۲۰ سال بعد */
+    yearRange?: [number, number];
+    labels?: CalendarLabels;
+    /** محتوای پایین تقویم، مثل دکمهٔ «امروز» */
+    footer?: ReactNode;
+    className?: string;
+    "aria-label"?: string;
+}
+/** تقویم شمسی با الگوی grid استاندارد WAI-ARIA و پیمایش کامل با کیبورد */
+export declare function Calendar({ value, defaultValue, onChange, min, max, isDateDisabled, digits, autoFocus, yearRange, labels, footer, className, "aria-label": ariaLabel, }: CalendarProps): import("react").JSX.Element;

package/dist/Calendar.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { JALALI_MONTHS, WEEKDAYS, WEEKDAYS_SHORT, formatJalali, jalaliMonthLength, jalaliWeekday, toFaDigits, toGregorian, toJalali, } from "@kashi-ui/persian";
+import { cx } from "./cx.js";
+export const sameDay = (a, b) => !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+const addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+const dayKey = (d) => `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
+/** چند ماه شمسی جلو یا عقب؛ روز در ماه‌های کوتاه‌تر به آخر ماه می‌چسبد */
+function addJalaliMonths(d, n) {
+    const { jy, jm, jd } = toJalali(d);
+    const total = jy * 12 + (jm - 1) + n;
+    const ny = Math.floor(total / 12);
+    const nm = total - ny * 12 + 1;
+    return toGregorian(ny, nm, Math.min(jd, jalaliMonthLength(ny, nm)));
+}
+function clamp(d, min, max) {
+    if (min && d < startOfDay(min))
+        return startOfDay(min);
+    if (max && d > startOfDay(max))
+        return startOfDay(max);
+    return d;
+}
+/** تقویم شمسی با الگوی grid استاندارد WAI-ARIA و پیمایش کامل با کیبورد */
+export function Calendar({ value, defaultValue = null, onChange, min, max, isDateDisabled, digits = "fa", autoFocus = false, yearRange, labels = {}, footer, className, "aria-label": ariaLabel = "تقویم", }) {
+    const id = useId();
+    const [inner, setInner] = useState(defaultValue);
+    const selected = value !== undefined ? value : inner;
+    const [today] = useState(() => startOfDay(new Date()));
+    const [focused, setFocused] = useState(() => clamp(startOfDay(selected ?? today), min, max));
+    const moveFocus = useRef(autoFocus);
+    const grid = useRef(null);
+    const n = (v) => (digits === "fa" ? toFaDigits(v) : String(v));
+    // اگر مقدار از بیرون عوض شد، ماه نمایش‌داده‌شده هم دنبالش برود
+    useEffect(() => {
+        if (selected)
+            setFocused(startOfDay(selected));
+    }, [selected?.getTime()]);
+    useEffect(() => {
+        if (!moveFocus.current)
+            return;
+        moveFocus.current = false;
+        grid.current?.querySelector(`[data-day="${dayKey(focused)}"]`)?.focus();
+    });
+    const { jy, jm } = toJalali(focused);
+    const monthStart = toGregorian(jy, jm, 1);
+    const offset = jalaliWeekday(monthStart);
+    const length = jalaliMonthLength(jy, jm);
+    const cells = [
+        ...Array(offset).fill(null),
+        ...Array.from({ length }, (_, i) => addDays(monthStart, i)),
+    ];
+    while (cells.length % 7)
+        cells.push(null);
+    const weeks = Array.from({ length: cells.length / 7 }, (_, i) => cells.slice(i * 7, i * 7 + 7));
+    const disabled = (d) => (min !== undefined && d < startOfDay(min)) || (max !== undefined && d > startOfDay(max)) || !!isDateDisabled?.(d);
+    const [fromYear, toYear] = yearRange ?? [
+        min ? toJalali(min).jy : toJalali(today).jy - 100,
+        max ? toJalali(max).jy : toJalali(today).jy + 20,
+    ];
+    const years = Array.from({ length: Math.max(0, toYear - fromYear + 1) }, (_, i) => fromYear + i);
+    if (!years.includes(jy))
+        years.push(jy);
+    const go = (d, focus = true) => {
+        moveFocus.current = focus;
+        setFocused(clamp(d, min, max));
+    };
+    const select = (d) => {
+        if (disabled(d))
+            return;
+        if (value === undefined)
+            setInner(d);
+        onChange?.(d);
+    };
+    const onKeyDown = (e) => {
+        // در راست‌به‌چپ، فلش چپ یعنی روز بعد
+        const rtl = getComputedStyle(e.currentTarget).direction === "rtl";
+        const wd = jalaliWeekday(focused);
+        const next = {
+            ArrowLeft: () => addDays(focused, rtl ? 1 : -1),
+            ArrowRight: () => addDays(focused, rtl ? -1 : 1),
+            ArrowUp: () => addDays(focused, -7),
+            ArrowDown: () => addDays(focused, 7),
+            Home: () => addDays(focused, -wd),
+            End: () => addDays(focused, 6 - wd),
+            PageUp: () => addJalaliMonths(focused, e.shiftKey ? -12 : -1),
+            PageDown: () => addJalaliMonths(focused, e.shiftKey ? 12 : 1),
+        };
+        if (!next[e.key])
+            return;
+        e.preventDefault();
+        go(next[e.key]());
+    };
+    const { prevMonth = "ماه قبل", nextMonth = "ماه بعد", month: monthLabel = "ماه", year: yearLabel = "سال" } = labels;
+    const prevDisabled = min !== undefined && toGregorian(jy, jm, 1) <= startOfDay(min);
+    const nextDisabled = max !== undefined && toGregorian(jy, jm, length) >= startOfDay(max);
+    return (_jsxs("div", { className: cx("k-calendar", className), role: "group", "aria-label": ariaLabel, children: [_jsxs("div", { className: "k-calendar__header", children: [_jsx("button", { type: "button", className: "k-btn k-btn--tertiary k-btn--icon k-btn--sm", "aria-label": prevMonth, disabled: prevDisabled, onClick: () => go(addJalaliMonths(focused, -1), false), children: _jsx("svg", { "data-k-mirror": "", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "m12 5-5 5 5 5" }) }) }), _jsxs("div", { className: "k-calendar__selects", children: [_jsx("select", { className: "k-calendar__select", "aria-label": monthLabel, value: jm, onChange: (e) => go(toGregorian(jy, Number(e.target.value), Math.min(toJalali(focused).jd, jalaliMonthLength(jy, Number(e.target.value)))), false), children: JALALI_MONTHS.map((name, i) => _jsx("option", { value: i + 1, children: name }, name)) }), _jsx("select", { className: "k-calendar__select", "aria-label": yearLabel, value: jy, onChange: (e) => go(toGregorian(Number(e.target.value), jm, Math.min(toJalali(focused).jd, jalaliMonthLength(Number(e.target.value), jm))), false), children: years.sort((a, b) => a - b).map((y) => _jsx("option", { value: y, children: n(y) }, y)) })] }), _jsx("button", { type: "button", className: "k-btn k-btn--tertiary k-btn--icon k-btn--sm", "aria-label": nextMonth, disabled: nextDisabled, onClick: () => go(addJalaliMonths(focused, 1), false), children: _jsx("svg", { "data-k-mirror": "", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "m8 5 5 5-5 5" }) }) })] }), _jsx("h2", { className: "k-sr-only", id: `${id}-title`, "aria-live": "polite", children: `${JALALI_MONTHS[jm - 1]} ${n(jy)}` }), _jsxs("table", { className: "k-calendar__grid", role: "grid", "aria-labelledby": `${id}-title`, ref: grid, children: [_jsx("thead", { children: _jsx("tr", { children: WEEKDAYS_SHORT.map((s, i) => (_jsx("th", { scope: "col", abbr: WEEKDAYS[i], children: s }, s))) }) }), _jsx("tbody", { children: weeks.map((week, wi) => (_jsx("tr", { children: week.map((d, di) => {
+                                if (!d)
+                                    return _jsx("td", { role: "gridcell" }, di);
+                                const isSelected = sameDay(d, selected);
+                                const isDisabled = disabled(d);
+                                return (_jsx("td", { role: "gridcell", "aria-selected": isSelected, children: _jsx("button", { type: "button", className: "k-calendar__day", "data-day": dayKey(d), tabIndex: sameDay(d, focused) ? 0 : -1, "aria-label": formatJalali(d, { style: "full", digits }), "aria-current": sameDay(d, today) ? "date" : undefined, "aria-disabled": isDisabled || undefined, onClick: () => {
+                                            setFocused(d);
+                                            select(d);
+                                        }, onKeyDown: onKeyDown, children: n(toJalali(d).jd) }) }, di));
+                            }) }, wi))) })] }), footer && _jsx("div", { className: "k-calendar__footer", children: footer })] }));
+}

package/dist/CardNumberInput.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 CardNumberInputProps extends Base {
+    /** مقدار کنترل‌شده: ۱۶ رقم لاتین بدون فاصله */
+    value?: string;
+    defaultValue?: string;
+    /** با هر تغییر: ارقام لاتین، معتبر بودن و بانک تشخیص‌داده‌شده */
+    onValueChange?: (value: string, valid: boolean, bank: string | null) => void;
+    /** @default "fa" */
+    digits?: "fa" | "latin";
+    /** نمایش نام بانک از روی شش رقم اول @default true */
+    showBank?: boolean;
+    /** نمایش لوگوی بانک (فقط هنگام نیاز بارگذاری می‌شود) @default true */
+    showBankLogo?: boolean;
+    /** @default "شماره کارت معتبر نیست." */
+    invalidMessage?: ReactNode;
+}
+/** فیلد شماره کارت بانکی: گروه‌بندی چهارتایی، تشخیص بانک با لوگو و بررسی Luhn */
+export declare const CardNumberInput: import("react").ForwardRefExoticComponent<CardNumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/CardNumberInput.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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";
+/** فیلد شماره کارت بانکی: گروه‌بندی چهارتایی، تشخیص بانک با لوگو و بررسی 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 [touched, setTouched] = useState(false);
+    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`;
+    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 next = handleChange(e);
+                    onValueChange?.(next, isValidCardNumber(next), getBankByCard(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: raw })] }));
+});

package/dist/DatePicker.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+import { type CalendarLabels } from "./Calendar.js";
+import { type InputProps } from "./Input.js";
+type Base = Omit<InputProps, "value" | "defaultValue" | "onChange" | "type" | "addonEnd" | "min" | "max">;
+export interface DatePickerProps extends Base {
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onChange?: (date: Date | null) => void;
+    min?: Date;
+    max?: Date;
+    isDateDisabled?: (date: Date) => boolean;
+    /** @default "fa" */
+    digits?: "fa" | "latin";
+    yearRange?: [number, number];
+    /** @default "این تاریخ معتبر نیست؛ آن را به شکل ۱۴۰۳/۰۵/۱۲ وارد کنید." */
+    invalidMessage?: ReactNode;
+    /** نام دکمهٔ باز کردن تقویم @default "انتخاب تاریخ از تقویم" */
+    openLabel?: string;
+    /** @default "امروز" */
+    todayLabel?: string;
+    calendarLabels?: CalendarLabels;
+}
+/**
+ * انتخاب تاریخ شمسی: تایپ مستقیم (۱۴۰۳/۰۵/۱۲) یا انتخاب از تقویم.
+ * با name، مقدار میلادی به شکل YYYY-MM-DD در فرم ارسال می‌شود.
+ */
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/DatePicker.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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, useIsomorphicLayoutEffect } from "./utils.js";
+/**
+ * انتخاب تاریخ شمسی: تایپ مستقیم (۱۴۰۳/۰۵/۱۲) یا انتخاب از تقویم.
+ * با name، مقدار میلادی به شکل YYYY-MM-DD در فرم ارسال می‌شود.
+ */
+export const DatePicker = forwardRef(function DatePicker({ value, defaultValue = null, onChange, min, max, isDateDisabled, digits = "fa", yearRange, invalidMessage = "این تاریخ معتبر نیست؛ آن را به شکل ۱۴۰۳/۰۵/۱۲ وارد کنید.", openLabel = "انتخاب تاریخ از تقویم", todayLabel = "امروز", calendarLabels, error, name, onBlur, placeholder, ...rest }, ref) {
+    const id = useId();
+    const popoverId = `${id}-calendar`;
+    const [inner, setInner] = useState(defaultValue);
+    const selected = value !== undefined ? value : inner;
+    const fmt = (d) => (d ? formatJalali(d, { digits }) : "");
+    const [text, setText] = useState(() => fmt(selected));
+    const [invalid, setInvalid] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [top, setTop] = useState(0);
+    const wrap = useRef(null);
+    const inputRef = useRef(null);
+    const button = useRef(null);
+    // همگام‌سازی متن با مقدار کنترل‌شده
+    useEffect(() => {
+        setText(fmt(selected));
+        setInvalid(false);
+    }, [selected?.getTime(), digits]);
+    // تقویم درست زیر کادر فیلد باز می‌شود (نه زیر متن راهنما)
+    useIsomorphicLayoutEffect(() => {
+        if (!open || !wrap.current)
+            return;
+        const box = wrap.current.querySelector(".k-input");
+        if (box)
+            setTop(box.offsetTop + box.offsetHeight + 6);
+    }, [open]);
+    // بستن با کلیک بیرون
+    useEffect(() => {
+        if (!open)
+            return;
+        const onDown = (e) => {
+            if (!wrap.current?.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener("pointerdown", onDown);
+        return () => document.removeEventListener("pointerdown", onDown);
+    }, [open]);
+    const commit = (d) => {
+        if (value === undefined)
+            setInner(d);
+        setText(fmt(d));
+        setInvalid(false);
+        if (!sameDay(d, selected) || (d === null) !== (selected === null))
+            onChange?.(d);
+    };
+    const close = () => {
+        setOpen(false);
+        button.current?.focus();
+    };
+    return (_jsxs("div", { className: "k-datepicker", ref: wrap, children: [_jsx(Input, { ref: mergeRefs(ref, inputRef), type: "text", dir: "ltr", autoComplete: "off", placeholder: placeholder ?? (digits === "fa" ? "۱۴۰۳/۰۱/۰۱" : "1403/01/01"), value: text, onChange: (e) => setText(e.target.value), onBlur: (e) => {
+                    const t = e.target.value.trim();
+                    if (!t)
+                        commit(null);
+                    else {
+                        const d = parseJalali(t);
+                        if (d && !(min && d < min) && !(max && d > max) && !isDateDisabled?.(d))
+                            commit(d);
+                        else
+                            setInvalid(true);
+                    }
+                    onBlur?.(e);
+                }, error: error ?? (invalid ? invalidMessage : undefined), addonEnd: _jsx("button", { ref: button, type: "button", className: "k-btn k-btn--tertiary k-btn--icon k-btn--sm k-datepicker__toggle", "aria-label": selected ? `${openLabel}، ${formatJalali(selected, { style: "full", digits })}` : openLabel, "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": open ? popoverId : undefined, onClick: () => setOpen((o) => !o), children: _jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "4.5", width: "14", height: "12.5", rx: "2" }), _jsx("path", { d: "M3 8.5h14M7 3v3M13 3v3" })] }) }), ...rest }), name && _jsx("input", { type: "hidden", name: name, value: selected ? toISODate(selected) : "" }), open && (_jsx("div", { id: popoverId, className: "k-datepicker__popover", role: "dialog", "aria-label": openLabel, style: { insetBlockStart: top }, onKeyDown: (e) => {
+                    if (e.key === "Escape") {
+                        e.stopPropagation();
+                        close();
+                    }
+                }, onBlur: (e) => {
+                    // اگر فوکوس (با Tab) از تقویم و کل فیلد بیرون رفت، ببند؛ کلیک بیرون را pointerdown می‌گیرد
+                    const next = e.relatedTarget;
+                    if (next && !wrap.current?.contains(next))
+                        setOpen(false);
+                }, children: _jsx(Calendar, { value: selected, onChange: (d) => {
+                        commit(d);
+                        close();
+                    }, min: min, max: max, isDateDisabled: isDateDisabled, digits: digits, yearRange: yearRange, labels: calendarLabels, autoFocus: true, footer: _jsx("button", { type: "button", className: "k-btn k-btn--link", onClick: () => {
+                            const t = new Date();
+                            commit(new Date(t.getFullYear(), t.getMonth(), t.getDate()));
+                            close();
+                        }, children: todayLabel }) }) }))] }));
+});

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

@@ -0,0 +1,17 @@
+import { type ReactNode } from "react";
+import { type InputProps } from "./Input.js";
+type Base = Omit<InputProps, "value" | "defaultValue" | "onChange" | "type" | "inputMode">;
+export interface NationalIdInputProps extends Base {
+    /** مقدار کنترل‌شده با ارقام لاتین، مثل "0013542419" */
+    value?: string;
+    defaultValue?: string;
+    /** با هر تغییر: مقدار با ارقام لاتین و معتبر بودن آن */
+    onValueChange?: (value: string, valid: boolean) => void;
+    /** خط ارقام نمایشی @default "fa" */
+    digits?: "fa" | "latin";
+    /** @default "کد ملی معتبر نیست." */
+    invalidMessage?: ReactNode;
+}
+/** فیلد کد ملی: ارقام فارسی و لاتین را می‌پذیرد، ۱۰ رقم را محدود و رقم کنترل را بررسی می‌کند. */
+export declare const NationalIdInput: import("react").ForwardRefExoticComponent<NationalIdInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/NationalIdInput.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { isValidNationalId, onlyDigits, toFaDigits } from "@kashi-ui/persian";
+import { Input } from "./Input.js";
+/** فیلد کد ملی: ارقام فارسی و لاتین را می‌پذیرد، ۱۰ رقم را محدود و رقم کنترل را بررسی می‌کند. */
+export const NationalIdInput = forwardRef(function NationalIdInput({ value, defaultValue = "", onValueChange, digits = "fa", invalidMessage = "کد ملی معتبر نیست.", error, name, onBlur, placeholder, ...rest }, ref) {
+    const [inner, setInner] = useState(() => onlyDigits(defaultValue).slice(0, 10));
+    const [touched, setTouched] = useState(false);
+    const raw = value !== undefined ? onlyDigits(value).slice(0, 10) : inner;
+    // خطا فقط پس از خروج از فیلد یا کامل شدن ۱۰ رقم نمایش داده می‌شود
+    const showInvalid = raw.length > 0 && (touched || raw.length === 10) && !isValidNationalId(raw);
+    return (_jsxs(_Fragment, { children: [_jsx(Input, { ref: ref, type: "text", inputMode: "numeric", autoComplete: "off", dir: "ltr", placeholder: placeholder ?? (digits === "fa" ? "۰۰۰۰۰۰۰۰۰۰" : "0000000000"), value: digits === "fa" ? toFaDigits(raw) : raw, onChange: (e) => {
+                    const next = onlyDigits(e.target.value).slice(0, 10);
+                    if (value === undefined)
+                        setInner(next);
+                    onValueChange?.(next, isValidNationalId(next));
+                }, onBlur: (e) => {
+                    setTouched(true);
+                    onBlur?.(e);
+                }, 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

@@ -14,3 +14,17 @@ export { Checkbox, Switch } from "./Checkbox.js";
 export type { CheckboxProps, SwitchProps } from "./Checkbox.js";
 export { cx } from "./cx.js";
 export { toFaDigits } from "./utils.js";
+export { NationalIdInput } from "./NationalIdInput.js";
+export type { NationalIdInputProps } from "./NationalIdInput.js";
+export { CardNumberInput } from "./CardNumberInput.js";
+export type { CardNumberInputProps } from "./CardNumberInput.js";
+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

@@ -7,3 +7,10 @@ export { Avatar, AvatarGroup, initials } from "./Avatar.js";
 export { Checkbox, Switch } from "./Checkbox.js";
 export { cx } from "./cx.js";
 export { toFaDigits } from "./utils.js";
+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,6 +1,7 @@
-import type { Ref, RefCallback } from "react";
-/** ارقام لاتین را به فارسی تبدیل می‌کند: 12 → ۱۲ */
-export declare function toFaDigits(value: string | number): string;
+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,7 +1,5 @@
-/** ارقام لاتین را به فارسی تبدیل می‌کند: 12 → ۱۲ */
-export function toFaDigits(value) {
-    return String(value).replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[Number(d)]);
-}
+import { useEffect, useLayoutEffect } from "react";
+export { toFaDigits } from "@kashi-ui/persian";
 /** چند ref را یکی می‌کند */
 export function mergeRefs(...refs) {
     return (node) => {
@@ -16,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.2.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.2.0",
+    "@kashi-ui/css": "^0.4.0",
     "react": ">=18"
   },
   "devDependencies": {
@@ -57,5 +57,9 @@
     "@kashi-ui/css": {
       "optional": false
     }
+  },
+  "dependencies": {
+    "@kashi-ui/bank-logos": "^0.4.0",
+    "@kashi-ui/persian": "^0.4.0"
   }
 }