@kashi-ui/elements 0.0.0-stage → 0.24.0

package/dist/fields.js

@@ -0,0 +1,103 @@
+import { onlyDigits, toFaDigits } from "@kashi-ui/persian";
+import { HTMLBase, define, emit, esc, fieldHTML, setMessages, syncHidden, uid } from "./base.js";
+/**
+ * کد تأیید یک‌بارمصرف: یک input واقعی (نه شش input جدا)، پس چسباندن، پاک کردن،
+ * صفحه‌خوان و پر شدن خودکار کد پیامکی (autocomplete="one-time-code") کار می‌کنند.
+ */
+export class KashiOtp extends HTMLBase {
+    constructor() {
+        super(...arguments);
+        this.code = "";
+        this.caret = 0;
+        this.valueSet = false;
+        this.rendered = false;
+        this.key = uid("kashi-otp");
+    }
+    connectedCallback() {
+        if (!this.rendered && !this.valueSet)
+            this.code = onlyDigits(this.getAttribute("value") ?? "").slice(0, this.length);
+        this.render();
+    }
+    attributeChangedCallback(name, old, next) {
+        if (!this.rendered || old === next)
+            return;
+        if (name === "value") {
+            this.code = onlyDigits(next ?? "").slice(0, this.length);
+            this.paint();
+        }
+        else
+            this.render();
+    }
+    get value() {
+        return this.code;
+    }
+    set value(v) {
+        this.valueSet = true;
+        this.code = onlyDigits(String(v ?? "")).slice(0, this.length);
+        if (this.rendered)
+            this.paint();
+    }
+    focus(options) {
+        this.input?.focus(options);
+    }
+    get length() {
+        const n = Number(this.getAttribute("length"));
+        return Number.isInteger(n) && n > 0 ? n : 6;
+    }
+    render() {
+        const id = this.key;
+        const length = this.length;
+        const group = Number(this.getAttribute("group-after")) || 0;
+        const ariaLabel = this.getAttribute("aria-label");
+        const label = this.hasAttribute("label") ? this.getAttribute("label") : ariaLabel ? null : "کد تأیید";
+        const slots = Array.from({ length }, (_, i) => `${group && i === group ? '<span class="k-otp__sep" aria-hidden="true"></span>' : ""}<span class="k-otp__slot" aria-hidden="true"></span>`).join("");
+        const control = `<div class="k-otp${this.getAttribute("size") === "sm" ? " k-otp--sm" : ""}"><input id="${id}" class="k-otp__input" type="text" inputmode="numeric" autocomplete="one-time-code" pattern="\\d*" maxlength="${length * 2}"${this.hasAttribute("disabled") ? " disabled" : ""}${!label && ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ""}>${slots}</div>`;
+        this.querySelector(":scope > .k-field")?.remove();
+        this.insertAdjacentHTML("afterbegin", fieldHTML({ id, label, control }));
+        this.input = this.querySelector(".k-otp__input");
+        this.querySelector(".k-otp").addEventListener("click", () => this.input.focus());
+        this.input.addEventListener("input", () => {
+            const next = onlyDigits(this.input.value).slice(0, this.length);
+            const prev = this.code;
+            this.code = next;
+            this.caret = next.length;
+            this.paint();
+            if (next !== prev)
+                emit(this, "kashi-change", { value: next });
+            if (next.length === this.length && next !== prev)
+                emit(this, "kashi-complete", { value: next });
+        });
+        const sync = () => {
+            this.caret = Math.min(this.input.selectionStart ?? this.code.length, this.length);
+            this.paintSlots();
+        };
+        for (const t of ["select", "keyup", "focus"])
+            this.input.addEventListener(t, sync);
+        this.input.addEventListener("blur", () => this.paintSlots());
+        this.rendered = true;
+        this.paint();
+    }
+    paint() {
+        if (this.input.value !== this.code)
+            this.input.value = this.code;
+        this.paintSlots();
+        const error = this.getAttribute("error");
+        this.querySelector(".k-otp").classList.toggle("k-otp--invalid", !!error);
+        setMessages(this.querySelector(":scope > .k-field"), this.input, this.key, error, this.getAttribute("hint"));
+        syncHidden(this, this.getAttribute("name"), this.code);
+    }
+    /** فقط خانه‌ها؛ مقدار input را دست نمی‌زند تا تایپ کاربر پیش از رویداد input پاک نشود */
+    paintSlots() {
+        const fa = this.getAttribute("digits") !== "latin";
+        const focused = this.ownerDocument.activeElement === this.input;
+        const active = Math.min(this.caret, this.length - 1);
+        this.querySelectorAll(".k-otp__slot").forEach((slot, i) => {
+            const c = this.code[i] ?? "";
+            slot.textContent = fa ? toFaDigits(c) : c;
+            slot.toggleAttribute("data-filled", !!c);
+            slot.toggleAttribute("data-active", focused && i === active);
+        });
+    }
+}
+KashiOtp.observedAttributes = ["label", "hint", "error", "length", "digits", "group-after", "size", "disabled", "name", "value", "aria-label"];
+define("kashi-otp", KashiOtp, "block");

package/dist/index.d.ts

@@ -0,0 +1,54 @@
+import { KashiCardNumber, KashiIban, KashiLandline, KashiLegalId, KashiMobile, KashiNationalId, KashiPostalCode, KashiPrice } from "./inputs.js";
+import { KashiOtp } from "./fields.js";
+import { KashiCitySelect, KashiCombobox, KashiProvinceSelect } from "./combobox.js";
+import { KashiAddressForm, KashiIranMap } from "./map.js";
+import { KashiDropdownMenu, KashiPopover } from "./menu.js";
+import { KashiNumberInput, KashiPagination, KashiRating, KashiTagInput } from "./controls.js";
+import { KashiDataTable } from "./table.js";
+import { KashiCalendar, KashiDatePicker } from "./calendar.js";
+import { KashiCountdown, KashiDate, KashiMoney, KashiRelativeTime } from "./display.js";
+import { KashiCopyButton, KashiDialog, KashiTabs, KashiTooltip } from "./overlay.js";
+import { KashiToaster, toast } from "./toast.js";
+export { KashiCardNumber, KashiIban, KashiLandline, KashiLegalId, KashiMobile, KashiNationalId, KashiPostalCode, KashiPrice, KashiOtp, KashiProvinceSelect, KashiCombobox, KashiCitySelect, KashiIranMap, KashiAddressForm, KashiCalendar, KashiDatePicker, KashiCountdown, KashiDate, KashiMoney, KashiRelativeTime, KashiCopyButton, KashiDialog, KashiTabs, KashiTooltip, KashiToaster, toast, KashiDropdownMenu, KashiPopover, KashiTagInput, KashiNumberInput, KashiRating, KashiPagination, KashiDataTable, };
+export { KashiDigitsInput } from "./inputs.js";
+export type { ToastOptions, ToastTone } from "./toast.js";
+export type { ComboboxOption } from "./combobox.js";
+export type { TableColumn } from "./table.js";
+/** نام همهٔ عنصرها؛ مثلاً برای isCustomElement در Vue */
+export declare const KASHI_ELEMENTS: readonly ["kashi-national-id", "kashi-legal-id", "kashi-mobile", "kashi-landline", "kashi-card-number", "kashi-iban", "kashi-postal-code", "kashi-price", "kashi-otp", "kashi-combobox", "kashi-province-select", "kashi-city-select", "kashi-iran-map", "kashi-address-form", "kashi-calendar", "kashi-date-picker", "kashi-money", "kashi-date", "kashi-relative-time", "kashi-countdown", "kashi-dialog", "kashi-tabs", "kashi-tooltip", "kashi-copy-button", "kashi-toaster", "kashi-dropdown-menu", "kashi-popover", "kashi-tag-input", "kashi-number-input", "kashi-rating", "kashi-pagination", "kashi-data-table"];
+declare global {
+    interface HTMLElementTagNameMap {
+        "kashi-national-id": KashiNationalId;
+        "kashi-legal-id": KashiLegalId;
+        "kashi-mobile": KashiMobile;
+        "kashi-landline": KashiLandline;
+        "kashi-card-number": KashiCardNumber;
+        "kashi-iban": KashiIban;
+        "kashi-postal-code": KashiPostalCode;
+        "kashi-price": KashiPrice;
+        "kashi-otp": KashiOtp;
+        "kashi-province-select": KashiProvinceSelect;
+        "kashi-combobox": KashiCombobox;
+        "kashi-city-select": KashiCitySelect;
+        "kashi-iran-map": KashiIranMap;
+        "kashi-address-form": KashiAddressForm;
+        "kashi-calendar": KashiCalendar;
+        "kashi-date-picker": KashiDatePicker;
+        "kashi-money": KashiMoney;
+        "kashi-date": KashiDate;
+        "kashi-relative-time": KashiRelativeTime;
+        "kashi-countdown": KashiCountdown;
+        "kashi-dialog": KashiDialog;
+        "kashi-tabs": KashiTabs;
+        "kashi-tooltip": KashiTooltip;
+        "kashi-copy-button": KashiCopyButton;
+        "kashi-toaster": KashiToaster;
+        "kashi-dropdown-menu": KashiDropdownMenu;
+        "kashi-popover": KashiPopover;
+        "kashi-tag-input": KashiTagInput;
+        "kashi-number-input": KashiNumberInput;
+        "kashi-rating": KashiRating;
+        "kashi-pagination": KashiPagination;
+        "kashi-data-table": KashiDataTable;
+    }
+}

package/dist/index.js

@@ -0,0 +1,23 @@
+// @kashi-ui/elements — وب کامپوننت‌های کاشی برای HTML، Vue، Svelte، Angular و هر فریم‌ورک دیگر.
+// با import کردن این فایل همهٔ عنصرها ثبت می‌شوند؛ استایل از @kashi-ui/css می‌آید.
+import { KashiCardNumber, KashiIban, KashiLandline, KashiLegalId, KashiMobile, KashiNationalId, KashiPostalCode, KashiPrice, } from "./inputs.js";
+import { KashiOtp } from "./fields.js";
+import { KashiCitySelect, KashiCombobox, KashiProvinceSelect } from "./combobox.js";
+import { KashiAddressForm, KashiIranMap } from "./map.js";
+import { KashiDropdownMenu, KashiPopover } from "./menu.js";
+import { KashiNumberInput, KashiPagination, KashiRating, KashiTagInput } from "./controls.js";
+import { KashiDataTable } from "./table.js";
+import { KashiCalendar, KashiDatePicker } from "./calendar.js";
+import { KashiCountdown, KashiDate, KashiMoney, KashiRelativeTime } from "./display.js";
+import { KashiCopyButton, KashiDialog, KashiTabs, KashiTooltip } from "./overlay.js";
+import { KashiToaster, toast } from "./toast.js";
+export { KashiCardNumber, KashiIban, KashiLandline, KashiLegalId, KashiMobile, KashiNationalId, KashiPostalCode, KashiPrice, KashiOtp, KashiProvinceSelect, KashiCombobox, KashiCitySelect, KashiIranMap, KashiAddressForm, KashiCalendar, KashiDatePicker, KashiCountdown, KashiDate, KashiMoney, KashiRelativeTime, KashiCopyButton, KashiDialog, KashiTabs, KashiTooltip, KashiToaster, toast, KashiDropdownMenu, KashiPopover, KashiTagInput, KashiNumberInput, KashiRating, KashiPagination, KashiDataTable, };
+export { KashiDigitsInput } from "./inputs.js";
+/** نام همهٔ عنصرها؛ مثلاً برای isCustomElement در Vue */
+export const KASHI_ELEMENTS = [
+    "kashi-national-id", "kashi-legal-id", "kashi-mobile", "kashi-landline", "kashi-card-number", "kashi-iban",
+    "kashi-postal-code", "kashi-price", "kashi-otp", "kashi-combobox", "kashi-province-select", "kashi-city-select", "kashi-iran-map", "kashi-address-form", "kashi-calendar", "kashi-date-picker",
+    "kashi-money", "kashi-date", "kashi-relative-time", "kashi-countdown",
+    "kashi-dialog", "kashi-tabs", "kashi-tooltip", "kashi-copy-button", "kashi-toaster",
+    "kashi-dropdown-menu", "kashi-popover", "kashi-tag-input", "kashi-number-input", "kashi-rating", "kashi-pagination", "kashi-data-table",
+];

package/dist/inputs.d.ts

@@ -0,0 +1,107 @@
+import { type Bank } from "@kashi-ui/persian";
+import { HTMLBase } from "./base.js";
+/** آنچه در انتهای فیلد نمایش داده می‌شود: نام اپراتور، استان، بانک یا واحد پول */
+type Meta = {
+    text: string;
+    bank?: Bank;
+} | null;
+interface Kind {
+    label: string;
+    maxDigits: number;
+    format: (raw: string) => string;
+    normalize?: (digits: string) => string;
+    /** معتبر بودن مقدار کامل */
+    valid: (raw: string) => boolean;
+    invalidMessage: string;
+    placeholder: {
+        fa: string;
+        latin: string;
+    };
+    digits: "fa" | "latin";
+    type?: "text" | "tel";
+    inputMode?: "numeric" | "tel";
+    autocomplete?: string;
+    meta?: (raw: string, host: Element) => Meta;
+    /** مقداری که در فرم ارسال می‌شود */
+    submit?: (raw: string) => string;
+    /** اطلاعات اضافهٔ رویداد kashi-change */
+    detail?: (raw: string) => Record<string, unknown>;
+}
+/**
+ * پایهٔ فیلدهای عددی فارسی: ارقام فارسی و لاتین را می‌پذیرد، قالب می‌دهد، مکان‌نما را سر جایش نگه می‌دارد،
+ * پس از خروج از فیلد یا کامل شدن مقدار، خطا را نشان می‌دهد و مقدار خام را با name در فرم می‌فرستد.
+ */
+export declare abstract class KashiDigitsInput extends HTMLBase {
+    static observedAttributes: string[];
+    protected abstract kind: Kind;
+    protected raw: string;
+    private touched;
+    /** مقدار با ویژگی value پیش از وصل شدن به صفحه گذاشته شده (مثلاً Vue) */
+    private valueSet;
+    private rendered;
+    private key;
+    protected input: HTMLInputElement;
+    private logoSlug;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, old: string | null, next: string | null): void;
+    /** مقداری که در فرم ارسال می‌شود (ارقام لاتین) */
+    get value(): string;
+    set value(v: string);
+    /** آیا مقدار کامل و معتبر است */
+    get valid(): boolean;
+    protected isValid(): boolean;
+    focus(options?: FocusOptions): void;
+    protected clean(text: string): string;
+    private get digits();
+    private shown;
+    private render;
+    private onInput;
+    private setRaw;
+    /** پیام خطای فعلی؛ فیلد مبلغ آن را برای محدوده بازنویسی می‌کند */
+    protected invalidText(touched: boolean): string | null;
+    protected hintText(): string | null;
+    private paint;
+    /** لوگوی بانک فقط هنگام نیاز بارگذاری می‌شود تا حجم اولیه کم بماند */
+    private loadLogo;
+}
+/** کد ملی: ۱۰ رقم با بررسی رقم کنترل */
+export declare class KashiNationalId extends KashiDigitsInput {
+    protected kind: Kind;
+}
+/** شناسهٔ ملی شرکت‌ها: ۱۱ رقم با بررسی رقم کنترل */
+export declare class KashiLegalId extends KashiDigitsInput {
+    protected kind: Kind;
+}
+/** موبایل: +98 و 0098 را به 09 تبدیل می‌کند، گروه‌بندی و تشخیص اپراتور */
+export declare class KashiMobile extends KashiDigitsInput {
+    protected kind: Kind;
+}
+/** تلفن ثابت با پیش‌شماره و نام استان */
+export declare class KashiLandline extends KashiDigitsInput {
+    protected kind: Kind;
+}
+/** شمارهٔ کارت بانکی: گروه‌بندی چهارتایی، نام و لوگوی بانک، بررسی Luhn */
+export declare class KashiCardNumber extends KashiDigitsInput {
+    protected kind: Kind;
+}
+/** شمارهٔ شبا: IR خودکار، گروه‌بندی، نام و لوگوی بانک و بررسی رقم‌های کنترل */
+export declare class KashiIban extends KashiDigitsInput {
+    protected kind: Kind;
+    protected clean(text: string): string;
+}
+/** کد پستی ۱۰ رقمی با قالب ۱۲۳۴۵-۶۷۸۹۰ */
+export declare class KashiPostalCode extends KashiDigitsInput {
+    protected kind: Kind;
+}
+/** مبلغ: جداکنندهٔ هزارگان، واحد پول و مبلغ به حروف زیر فیلد */
+export declare class KashiPrice extends KashiDigitsInput {
+    static observedAttributes: string[];
+    protected kind: Kind;
+    /** مبلغ به شکل عدد، یا null برای فیلد خالی */
+    get valueAsNumber(): number | null;
+    private num;
+    private inRange;
+    protected invalidText(touched: boolean): string | null;
+    protected hintText(): string | null;
+}
+export {};

package/dist/inputs.js

@@ -0,0 +1,371 @@
+import { formatCardNumber, formatIban, formatLandline, formatMobile, formatNumber, formatPostalCode, getBankByCard, getBankByIban, getLandlineProvince, getMobileOperator, isValidCardNumber, isValidIban, isValidLandline, isValidLegalId, isValidMobile, isValidNationalId, isValidPostalCode, normalizeLandline, normalizeMobile, numberToWords, onlyDigits, toFaDigits, } from "@kashi-ui/persian";
+import { HTMLBase, bool, define, emit, esc, fieldHTML, setMessages, syncHidden, uid } from "./base.js";
+const fa = (s) => toFaDigits(s);
+/** موقعیت مکان‌نما پس از 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;
+}
+/**
+ * پایهٔ فیلدهای عددی فارسی: ارقام فارسی و لاتین را می‌پذیرد، قالب می‌دهد، مکان‌نما را سر جایش نگه می‌دارد،
+ * پس از خروج از فیلد یا کامل شدن مقدار، خطا را نشان می‌دهد و مقدار خام را با name در فرم می‌فرستد.
+ */
+export class KashiDigitsInput extends HTMLBase {
+    constructor() {
+        super(...arguments);
+        this.raw = "";
+        this.touched = false;
+        /** مقدار با ویژگی value پیش از وصل شدن به صفحه گذاشته شده (مثلاً Vue) */
+        this.valueSet = false;
+        this.rendered = false;
+        this.key = uid("kashi-in");
+        this.logoSlug = null;
+    }
+    connectedCallback() {
+        if (!this.rendered && !this.valueSet)
+            this.raw = this.clean(this.getAttribute("value") ?? "");
+        // مقداری که فریم‌ورک پیش از ثبت عنصر روی ویژگی value گذاشته
+        if (Object.prototype.hasOwnProperty.call(this, "value")) {
+            const v = this.value;
+            delete this.value;
+            this.raw = this.clean(String(v ?? ""));
+        }
+        this.render();
+    }
+    attributeChangedCallback(name, old, next) {
+        if (!this.rendered || old === next)
+            return;
+        if (name === "value")
+            this.setRaw(this.clean(next ?? ""), false);
+        else
+            this.render();
+    }
+    /** مقداری که در فرم ارسال می‌شود (ارقام لاتین) */
+    get value() {
+        return this.kind.submit ? this.kind.submit(this.raw) : this.raw;
+    }
+    set value(v) {
+        this.valueSet = true;
+        this.setRaw(this.clean(String(v ?? "")), false);
+    }
+    /** آیا مقدار کامل و معتبر است */
+    get valid() {
+        return this.isValid();
+    }
+    isValid() {
+        return this.kind.valid(this.raw);
+    }
+    focus(options) {
+        this.input?.focus(options);
+    }
+    clean(text) {
+        const k = this.kind;
+        return (k.normalize ?? ((d) => d))(onlyDigits(text)).slice(0, k.maxDigits);
+    }
+    get digits() {
+        const d = this.getAttribute("digits");
+        return d === "fa" || d === "latin" ? d : this.kind.digits;
+    }
+    shown() {
+        const f = this.kind.format(this.raw);
+        return this.digits === "fa" ? fa(f) : f;
+    }
+    render() {
+        const k = this.kind;
+        const id = this.key;
+        const ariaLabel = this.getAttribute("aria-label");
+        const label = this.hasAttribute("label") ? this.getAttribute("label") : ariaLabel ? null : k.label;
+        const size = this.getAttribute("size");
+        const required = this.hasAttribute("required");
+        const disabled = this.hasAttribute("disabled");
+        const placeholder = this.getAttribute("placeholder") ?? k.placeholder[this.digits];
+        const control = `<div class="k-input${size === "sm" || size === "lg" ? ` k-input--${size}` : ""}" data-size="${size ?? "md"}"${disabled ? ' data-state="disabled"' : ""}><input id="${id}" class="k-input__control" type="${k.type ?? "text"}" inputmode="${k.inputMode ?? "numeric"}" autocomplete="${k.autocomplete ?? "off"}" dir="ltr" spellcheck="false" placeholder="${esc(placeholder)}"${required ? " required" : ""}${disabled ? " disabled" : ""}${this.hasAttribute("readonly") ? " readonly" : ""}${!label && ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ""}></div>`;
+        this.querySelector(":scope > .k-field")?.remove();
+        this.insertAdjacentHTML("afterbegin", fieldHTML({ id, label, required, control }));
+        this.input = this.querySelector("input.k-input__control");
+        this.input.addEventListener("input", () => this.onInput());
+        this.input.addEventListener("blur", () => {
+            this.touched = true;
+            this.paint();
+        });
+        this.rendered = true;
+        this.paint();
+    }
+    onInput() {
+        const el = this.input;
+        const before = el.value.slice(0, el.selectionStart ?? el.value.length);
+        const next = this.clean(el.value);
+        const caret = Math.min(onlyDigits(before).length, next.length);
+        this.setRaw(next, true);
+        if (el.ownerDocument.activeElement === el) {
+            const pos = caretAfter(el.value, caret);
+            el.setSelectionRange(pos, pos);
+        }
+    }
+    setRaw(next, user) {
+        const changed = next !== this.raw;
+        this.raw = next;
+        if (!this.rendered)
+            return;
+        this.paint();
+        if (user && changed)
+            emit(this, "kashi-change", { value: this.value, valid: this.isValid(), ...this.kind.detail?.(this.raw) });
+    }
+    /** پیام خطای فعلی؛ فیلد مبلغ آن را برای محدوده بازنویسی می‌کند */
+    invalidText(touched) {
+        const show = this.raw.length > 0 && (touched || this.raw.length === this.kind.maxDigits) && !this.isValid();
+        return show ? (this.getAttribute("invalid-message") ?? this.kind.invalidMessage) : null;
+    }
+    hintText() {
+        return this.getAttribute("hint");
+    }
+    paint() {
+        const el = this.input;
+        const shown = this.shown();
+        if (el.value !== shown)
+            el.value = shown;
+        const box = el.parentElement;
+        // نشان انتهای فیلد
+        box.querySelector(":scope > .k-input__addon")?.remove();
+        const meta = bool(this, "show-meta", true) ? this.kind.meta?.(this.raw, this) : null;
+        const metaId = `${this.key}-meta`;
+        if (meta) {
+            const addon = document.createElement("span");
+            addon.className = "k-input__addon";
+            addon.innerHTML = meta.bank
+                ? `<span class="k-bank" id="${metaId}">${esc(meta.text)}</span>`
+                : `<span class="k-input__meta" id="${metaId}">${esc(meta.text)}</span>`;
+            box.append(addon);
+            if (meta.bank && bool(this, "bank-logo", true))
+                this.loadLogo(meta.bank, addon.firstElementChild);
+        }
+        const error = this.getAttribute("error") || this.invalidText(this.touched);
+        // اعتبارسنجی بومی فرم: فرم با مقدار نامعتبر ارسال نمی‌شود
+        el.setCustomValidity(this.raw && !this.isValid() ? (this.invalidText(true) ?? "") : "");
+        setMessages(this.querySelector(":scope > .k-field"), el, this.key, error, this.hintText(), meta ? metaId : null);
+        syncHidden(this, this.getAttribute("name"), this.raw ? this.value : "");
+    }
+    /** لوگوی بانک فقط هنگام نیاز بارگذاری می‌شود تا حجم اولیه کم بماند */
+    loadLogo(bank, badge) {
+        this.logoSlug = bank.slug;
+        import("@kashi-ui/bank-logos")
+            .then((m) => {
+            const uri = m.bankLogoDataUri(bank.slug);
+            if (!uri || this.logoSlug !== bank.slug || !badge.isConnected)
+                return;
+            const img = document.createElement("img");
+            img.className = "k-bank__logo";
+            img.src = uri;
+            img.alt = "";
+            img.width = img.height = 24;
+            badge.prepend(img);
+        })
+            .catch(() => { });
+    }
+}
+KashiDigitsInput.observedAttributes = ["label", "hint", "error", "placeholder", "required", "disabled", "readonly", "digits", "invalid-message", "name", "value", "size", "aria-label", "show-meta", "bank-logo"];
+/** کد ملی: ۱۰ رقم با بررسی رقم کنترل */
+export class KashiNationalId extends KashiDigitsInput {
+    constructor() {
+        super(...arguments);
+        this.kind = {
+            label: "کد ملی",
+            maxDigits: 10,
+            format: (d) => d,
+            valid: (d) => isValidNationalId(d),
+            invalidMessage: "کد ملی معتبر نیست.",
+            placeholder: { fa: "۰۰۰۰۰۰۰۰۰۰", latin: "0000000000" },
+            digits: "fa",
+        };
+    }
+}
+/** شناسهٔ ملی شرکت‌ها: ۱۱ رقم با بررسی رقم کنترل */
+export class KashiLegalId extends KashiDigitsInput {
+    constructor() {
+        super(...arguments);
+        this.kind = {
+            label: "شناسهٔ ملی شرکت",
+            maxDigits: 11,
+            format: (d) => d,
+            valid: (d) => isValidLegalId(d),
+            invalidMessage: "شناسهٔ ملی معتبر نیست.",
+            placeholder: { fa: "۰۰۰۰۰۰۰۰۰۰۰", latin: "00000000000" },
+            digits: "fa",
+        };
+    }
+}
+/** موبایل: +98 و 0098 را به 09 تبدیل می‌کند، گروه‌بندی و تشخیص اپراتور */
+export class KashiMobile extends KashiDigitsInput {
+    constructor() {
+        super(...arguments);
+        this.kind = {
+            label: "شمارهٔ موبایل",
+            maxDigits: 11,
+            normalize: normalizeMobile,
+            format: formatMobile,
+            valid: (d) => isValidMobile(d),
+            invalidMessage: "شماره موبایل معتبر نیست.",
+            placeholder: { fa: "۰۹۱۲ ۳۴۵ ۶۷۸۹", latin: "0912 345 6789" },
+            digits: "fa",
+            type: "tel",
+            inputMode: "tel",
+            autocomplete: "tel-national",
+            meta: (d) => {
+                const op = getMobileOperator(d);
+                return op ? { text: op.name } : null;
+            },
+            detail: (d) => ({ operator: getMobileOperator(d)?.name ?? null }),
+        };
+    }
+}
+/** تلفن ثابت با پیش‌شماره و نام استان */
+export class KashiLandline extends KashiDigitsInput {
+    constructor() {
+        super(...arguments);
+        this.kind = {
+            label: "تلفن ثابت",
+            maxDigits: 11,
+            normalize: normalizeLandline,
+            format: formatLandline,
+            valid: (d) => isValidLandline(d),
+            invalidMessage: "شمارهٔ تلفن ثابت معتبر نیست.",
+            placeholder: { fa: "۰۲۱ ۸۸۷۷ ۶۶۵۵", latin: "021 8877 6655" },
+            digits: "fa",
+            type: "tel",
+            inputMode: "tel",
+            autocomplete: "tel-national",
+            meta: (d) => {
+                const p = getLandlineProvince(d);
+                return p ? { text: p } : null;
+            },
+            detail: (d) => ({ province: getLandlineProvince(d) }),
+        };
+    }
+}
+/** شمارهٔ کارت بانکی: گروه‌بندی چهارتایی، نام و لوگوی بانک، بررسی Luhn */
+export class KashiCardNumber extends KashiDigitsInput {
+    constructor() {
+        super(...arguments);
+        this.kind = {
+            label: "شمارهٔ کارت",
+            maxDigits: 16,
+            format: formatCardNumber,
+            valid: (d) => isValidCardNumber(d),
+            invalidMessage: "شماره کارت معتبر نیست.",
+            placeholder: { fa: "۰۰۰۰ ۰۰۰۰ ۰۰۰۰ ۰۰۰۰", latin: "0000 0000 0000 0000" },
+            digits: "fa",
+            autocomplete: "cc-number",
+            meta: (d) => {
+                const bank = getBankByCard(d);
+                return bank ? { text: bank.name, bank } : null;
+            },
+            detail: (d) => ({ bank: getBankByCard(d)?.name ?? null }),
+        };
+    }
+}
+/** شمارهٔ شبا: IR خودکار، گروه‌بندی، نام و لوگوی بانک و بررسی رقم‌های کنترل */
+export class KashiIban extends KashiDigitsInput {
+    constructor() {
+        super(...arguments);
+        this.kind = {
+            label: "شمارهٔ شبا",
+            maxDigits: 24,
+            format: (d) => formatIban(d),
+            valid: (d) => isValidIban(d),
+            invalidMessage: "شماره شبا معتبر نیست.",
+            placeholder: { fa: "IR00 0000 0000 0000 0000 0000 00", latin: "IR00 0000 0000 0000 0000 0000 00" },
+            digits: "latin",
+            meta: (d) => {
+                const bank = getBankByIban(d);
+                return bank ? { text: bank.name, bank } : null;
+            },
+            submit: (d) => (d ? `IR${d}` : ""),
+            detail: (d) => ({ bank: getBankByIban(d)?.name ?? null }),
+        };
+    }
+    clean(text) {
+        return super.clean(text.replace(/^\s*IR/i, ""));
+    }
+}
+/** کد پستی ۱۰ رقمی با قالب ۱۲۳۴۵-۶۷۸۹۰ */
+export class KashiPostalCode extends KashiDigitsInput {
+    constructor() {
+        super(...arguments);
+        this.kind = {
+            label: "کد پستی",
+            maxDigits: 10,
+            format: formatPostalCode,
+            valid: (d) => isValidPostalCode(d),
+            invalidMessage: "کد پستی معتبر نیست.",
+            placeholder: { fa: "۱۲۳۴۵-۶۷۸۹۰", latin: "12345-67890" },
+            digits: "fa",
+            autocomplete: "postal-code",
+        };
+    }
+}
+/** مبلغ: جداکنندهٔ هزارگان، واحد پول و مبلغ به حروف زیر فیلد */
+export class KashiPrice extends KashiDigitsInput {
+    constructor() {
+        super(...arguments);
+        this.kind = {
+            label: "مبلغ",
+            maxDigits: 15,
+            normalize: (d) => d.replace(/^0+(?=\d)/, ""),
+            format: (d) => (d ? formatNumber(d, { digits: "latin" }).replace(/,/g, "٬") : ""),
+            valid: () => this.inRange(),
+            invalidMessage: "",
+            placeholder: { fa: "۰", latin: "0" },
+            digits: "fa",
+            meta: (_d, host) => {
+                const unit = host.getAttribute("unit") ?? "تومان";
+                return unit ? { text: unit } : null;
+            },
+            detail: (d) => ({ value: d ? Number(d) : null }),
+        };
+    }
+    /** مبلغ به شکل عدد، یا null برای فیلد خالی */
+    get valueAsNumber() {
+        return this.raw ? Number(this.raw) : null;
+    }
+    num(name) {
+        const v = this.getAttribute(name);
+        return v === null || v === "" || Number.isNaN(Number(v)) ? undefined : Number(v);
+    }
+    inRange() {
+        if (!this.raw)
+            return true;
+        const n = Number(this.raw), min = this.num("min"), max = this.num("max");
+        return !((min !== undefined && n < min) || (max !== undefined && n > max));
+    }
+    invalidText(touched) {
+        if (!touched || this.inRange())
+            return null;
+        const custom = this.getAttribute("invalid-message");
+        if (custom)
+            return custom;
+        const min = this.num("min"), max = this.num("max");
+        const f = (n) => fa(formatNumber(n));
+        return `مبلغ باید ${min !== undefined ? `حداقل ${f(min)}` : ""}${min !== undefined && max !== undefined ? " و " : ""}${max !== undefined ? `حداکثر ${f(max)}` : ""} باشد.`;
+    }
+    hintText() {
+        if (this.raw && bool(this, "show-words", true)) {
+            const unit = this.getAttribute("unit") ?? "تومان";
+            return `${numberToWords(Number(this.raw))}${unit ? ` ${unit}` : ""}`;
+        }
+        return this.getAttribute("hint");
+    }
+}
+KashiPrice.observedAttributes = [...KashiDigitsInput.observedAttributes, "unit", "min", "max", "show-words"];
+define("kashi-national-id", KashiNationalId, "block");
+define("kashi-legal-id", KashiLegalId, "block");
+define("kashi-mobile", KashiMobile, "block");
+define("kashi-landline", KashiLandline, "block");
+define("kashi-card-number", KashiCardNumber, "block");
+define("kashi-iban", KashiIban, "block");
+define("kashi-postal-code", KashiPostalCode, "block");
+define("kashi-price", KashiPrice, "block");

package/dist/iranMapData.d.ts

@@ -0,0 +1,6 @@
+export declare const IRAN_VIEWBOX = "0 0 1000 907";
+export declare const IRAN_PROVINCES: Record<string, {
+    d: string;
+    x: number;
+    y: number;
+}>;