@kashi-ui/react 0.2.0 → 0.3.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
+
 نیازمند React ۱۸ یا بالاتر. مستندات کامل: [kashi.sepantapouya.com](https://kashi.sepantapouya.com) · کد: [GitHub](https://github.com/Sepantapouya/Kashi) · لایسنس MIT

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,19 @@
+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 "شماره کارت معتبر نیست." */
+    invalidMessage?: ReactNode;
+}
+/** فیلد شماره کارت بانکی: گروه‌بندی چهارتایی، تشخیص بانک و بررسی Luhn */
+export declare const CardNumberInput: import("react").ForwardRefExoticComponent<CardNumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/CardNumberInput.js

@@ -0,0 +1,50 @@
+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 { Input } from "./Input.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) {
+    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 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);
+                    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 })] }));
+});

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, useLayoutEffect, 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";
+/**
+ * انتخاب تاریخ شمسی: تایپ مستقیم (۱۴۰۳/۰۵/۱۲) یا انتخاب از تقویم.
+ * با 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]);
+    // تقویم درست زیر کادر فیلد باز می‌شود (نه زیر متن راهنما)
+    useLayoutEffect(() => {
+        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/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/index.d.ts

@@ -14,3 +14,11 @@ 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";

package/dist/index.js

@@ -7,3 +7,7 @@ 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";

package/dist/utils.d.ts

@@ -1,6 +1,5 @@
 import type { Ref, RefCallback } from "react";
-/** ارقام لاتین را به فارسی تبدیل می‌کند: 12 → ۱۲ */
-export declare function toFaDigits(value: string | number): string;
+export { toFaDigits } from "@kashi-ui/persian";
 /** چند ref را یکی می‌کند */
 export declare function mergeRefs<T>(...refs: Array<Ref<T> | undefined>): RefCallback<T>;
 export declare function isDev(): boolean;

package/dist/utils.js

@@ -1,7 +1,4 @@
-/** ارقام لاتین را به فارسی تبدیل می‌کند: 12 → ۱۲ */
-export function toFaDigits(value) {
-    return String(value).replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[Number(d)]);
-}
+export { toFaDigits } from "@kashi-ui/persian";
 /** چند ref را یکی می‌کند */
 export function mergeRefs(...refs) {
     return (node) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kashi-ui/react",
-  "version": "0.2.0",
+  "version": "0.3.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.3.0",
     "react": ">=18"
   },
   "devDependencies": {
@@ -57,5 +57,8 @@
     "@kashi-ui/css": {
       "optional": false
     }
+  },
+  "dependencies": {
+    "@kashi-ui/persian": "^0.3.0"
   }
 }