@kashi-ui/react 0.0.0-stage → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kashi contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,27 @@
-# Temporary Holding Version
+# @kashi-ui/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+کامپوننت‌های React [کاشی](https://github.com/Sepantapouya/Kashi)، دیزاین‌سیستم فارسی، دسترس‌پذیر و متن‌باز.
+
+```bash
+npm i @kashi-ui/react @kashi-ui/css
+```
+
+```tsx
+import "@kashi-ui/css";
+import { Button, Input } from "@kashi-ui/react";
+
+export function SignUp() {
+  return (
+    <form>
+      <Input label="ایمیل" type="email" required />
+      <Button variant="primary" type="submit">ثبت‌نام</Button>
+    </form>
+  );
+}
+```
+
+کامپوننت‌ها: 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/Alert.d.ts

@@ -0,0 +1,18 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export type AlertTone = "neutral" | "brand" | "info" | "success" | "warning" | "error";
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** @default "neutral" */
+    tone?: AlertTone;
+    title?: ReactNode;
+    /** آیکون سفارشی؛ false برای حذف */
+    icon?: ReactNode | false;
+    /** دکمه‌ها یا لینک‌های زیر متن */
+    actions?: ReactNode;
+    /** با دادن این تابع دکمهٔ بستن نمایش داده می‌شود */
+    onClose?: () => void;
+    /** @default "بستن" */
+    closeLabel?: string;
+    /** پس‌زمینهٔ رنگی کم‌رنگ */
+    tinted?: boolean;
+}
+export declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Alert.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cx } from "./cx.js";
+import { CloseIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from "./icons.js";
+const ICONS = {
+    neutral: InfoIcon,
+    brand: InfoIcon,
+    info: InfoIcon,
+    success: SuccessIcon,
+    warning: WarningIcon,
+    error: ErrorIcon,
+};
+export const Alert = forwardRef(function Alert({ tone = "neutral", title, icon, actions, onClose, closeLabel = "بستن", tinted = false, role, className, children, ...rest }, ref) {
+    const Icon = ICONS[tone];
+    return (_jsxs("div", { ref: ref, 
+        // خطا و هشدار فوراً خوانده می‌شوند؛ بقیه مؤدبانه
+        role: role ?? (tone === "error" || tone === "warning" ? "alert" : "status"), className: cx("k-alert", tone !== "neutral" && `k-alert--${tone}`, tinted && "k-alert--tinted", className), ...rest, children: [icon !== false && _jsx("span", { className: "k-alert__icon", "aria-hidden": "true", children: icon ?? _jsx(Icon, {}) }), _jsxs("div", { className: "k-alert__content", children: [title && _jsx("p", { className: "k-alert__title", children: title }), children && _jsx("div", { className: "k-alert__description", children: children }), actions && _jsx("div", { className: "k-alert__actions", children: actions })] }), onClose && (_jsx("button", { type: "button", className: "k-btn k-btn--tertiary k-btn--icon k-btn--sm k-alert__close", "aria-label": closeLabel, onClick: onClose, children: _jsx(CloseIcon, {}) }))] }));
+});

package/dist/Avatar.d.ts

@@ -0,0 +1,29 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type AvatarStatus = "online" | "offline" | "busy" | "away";
+/** حروف اول دو کلمهٔ اول؛ با نیم‌فاصله تا حروف فارسی به هم نچسبند */
+export declare function initials(name: string): string;
+export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    /** نام شخص — برای alt تصویر و حروف اول جایگزین */
+    name: string;
+    src?: string;
+    /** @default "md" */
+    size?: AvatarSize;
+    square?: boolean;
+    /** رنگ برند برای حالت حروف اول */
+    brand?: boolean;
+    status?: AvatarStatus;
+    /** برچسب‌های وضعیت برای صفحه‌خوان (پیش‌فرض فارسی) */
+    statusLabels?: Partial<Record<AvatarStatus, string>>;
+}
+export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
+export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** حداکثر تعداد نمایش؛ بقیه به شکل «+۳» */
+    max?: number;
+    /** اندازهٔ آواتار «+n» @default "md" */
+    size?: AvatarSize;
+    /** @default (n) => `${n} نفر دیگر` */
+    moreLabel?: (count: number) => string;
+    children: ReactNode;
+}
+export declare function AvatarGroup({ max, size, moreLabel, className, children, ...rest }: AvatarGroupProps): import("react").JSX.Element;

package/dist/Avatar.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, forwardRef, useState } from "react";
+import { cx } from "./cx.js";
+import { toFaDigits } from "./utils.js";
+const STATUS_LABEL = {
+    online: "آنلاین",
+    offline: "آفلاین",
+    busy: "مشغول",
+    away: "غایب",
+};
+/** حروف اول دو کلمهٔ اول؛ با نیم‌فاصله تا حروف فارسی به هم نچسبند */
+export function initials(name) {
+    return name
+        .trim()
+        .split(/\s+/)
+        .slice(0, 2)
+        .map((w) => w[0])
+        .join("‌")
+        .toUpperCase();
+}
+export const Avatar = forwardRef(function Avatar({ name, src, size = "md", square = false, brand = false, status, statusLabels, className, ...rest }, ref) {
+    const [failed, setFailed] = useState(false);
+    const showImage = src && !failed;
+    const statusText = status ? (statusLabels?.[status] ?? STATUS_LABEL[status]) : undefined;
+    return (_jsxs("span", { ref: ref, role: "img", "aria-label": statusText ? `${name}، ${statusText}` : name, className: cx("k-avatar", size !== "md" && `k-avatar--${size}`, square && "k-avatar--square", brand && "k-avatar--brand", className), ...rest, children: [showImage ? (_jsx("img", { className: "k-avatar__image", src: src, alt: "", onError: () => setFailed(true) })) : (_jsx("span", { "aria-hidden": "true", children: initials(name) })), status && _jsx("span", { className: `k-avatar__status k-avatar__status--${status}`, "aria-hidden": "true" })] }));
+});
+export function AvatarGroup({ max, size = "md", moreLabel = (n) => `${toFaDigits(n)} نفر دیگر`, className, children, ...rest }) {
+    const items = Children.toArray(children);
+    const visible = max ? items.slice(0, max) : items;
+    const extra = items.length - visible.length;
+    return (_jsxs("div", { role: "group", className: cx("k-avatar-group", className), ...rest, children: [visible, extra > 0 && (_jsx("span", { role: "img", "aria-label": moreLabel(extra), className: cx("k-avatar", size !== "md" && `k-avatar--${size}`), children: _jsxs("span", { "aria-hidden": "true", children: ["+", toFaDigits(extra)] }) }))] }));
+}

package/dist/Badge.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes } from "react";
+export type BadgeTone = "neutral" | "brand" | "error" | "warning" | "success" | "info";
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** @default "neutral" */
+    tone?: BadgeTone;
+    /** @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** نقطهٔ رنگی ابتدای متن */
+    dot?: boolean;
+    /** گوشهٔ کم به‌جای گرد */
+    square?: boolean;
+}
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/Badge.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cx } from "./cx.js";
+export const Badge = forwardRef(function Badge({ tone = "neutral", size = "md", dot = false, square = false, className, children, ...rest }, ref) {
+    return (_jsxs("span", { ref: ref, className: cx("k-badge", tone !== "neutral" && `k-badge--${tone}`, size !== "md" && `k-badge--${size}`, square && "k-badge--square", className), ...rest, children: [dot && _jsx("span", { className: "k-badge__dot", "aria-hidden": "true" }), children] }));
+});

package/dist/Button.d.ts

@@ -0,0 +1,22 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+export type ButtonVariant = "primary" | "secondary" | "tertiary" | "link" | "danger" | "danger-secondary";
+export type ButtonSize = "sm" | "md" | "lg" | "xl";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** @default "secondary" */
+    variant?: ButtonVariant;
+    /** @default "md" */
+    size?: ButtonSize;
+    /** نمایش اسپینر؛ دکمه فوکوس‌پذیر می‌ماند ولی کلیک نمی‌گیرد */
+    loading?: boolean;
+    /** متنی که صفحه‌خوان هنگام بارگذاری می‌خواند @default "در حال بارگذاری" */
+    loadingLabel?: string;
+    /** دکمهٔ تمام‌عرض */
+    block?: boolean;
+    /** دکمهٔ مربعی فقط‌آیکون — حتماً aria-label بدهید */
+    iconOnly?: boolean;
+    /** آیکون ابتدای متن (در RTL سمت راست) */
+    iconStart?: ReactNode;
+    /** آیکون انتهای متن (در RTL سمت چپ) */
+    iconEnd?: ReactNode;
+}
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/Button.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cx } from "./cx.js";
+import { isDev } from "./utils.js";
+export const Button = forwardRef(function Button({ variant = "secondary", size = "md", loading = false, loadingLabel = "در حال بارگذاری", block = false, iconOnly = false, iconStart, iconEnd, disabled, type = "button", className, children, onClick, ...rest }, ref) {
+    if (isDev() && iconOnly && !rest["aria-label"] && !rest["aria-labelledby"]) {
+        console.warn("[kashi] <Button iconOnly> بدون aria-label برای صفحه‌خوان‌ها بی‌نام است.");
+    }
+    return (_jsxs("button", { ref: ref, type: type, disabled: disabled, "aria-disabled": loading || undefined, "aria-busy": loading || undefined, onClick: loading ? (e) => e.preventDefault() : onClick, className: cx("k-btn", `k-btn--${variant}`, size !== "md" && `k-btn--${size}`, block && "k-btn--block", iconOnly && "k-btn--icon", className), ...rest, children: [iconStart, children, iconEnd, loading && (_jsx("span", { className: "k-sr-only", role: "status", children: loadingLabel }))] }));
+});

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

@@ -0,0 +1,26 @@
+import { type ElementType, type HTMLAttributes } from "react";
+export interface CardProps extends HTMLAttributes<HTMLElement> {
+    /** @default "article" */
+    as?: ElementType;
+    /** بدون سایه */
+    flat?: boolean;
+    /** کارت قابل‌کلیک؛ یک لینک یا دکمه با کلاس k-card__link داخلش بگذارید */
+    interactive?: boolean;
+}
+export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLElement>>;
+export declare const CardHeader: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    as?: ElementType;
+} & import("react").RefAttributes<HTMLElement>>;
+/** پیش‌فرض h3؛ با as سطح عنوان را با ساختار صفحه هماهنگ کنید */
+export declare const CardTitle: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    as?: ElementType;
+} & import("react").RefAttributes<HTMLElement>>;
+export declare const CardDescription: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    as?: ElementType;
+} & import("react").RefAttributes<HTMLElement>>;
+export declare const CardBody: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    as?: ElementType;
+} & import("react").RefAttributes<HTMLElement>>;
+export declare const CardFooter: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    as?: ElementType;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/Card.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cx } from "./cx.js";
+export const Card = forwardRef(function Card({ as: Tag = "article", flat = false, interactive = false, className, ...rest }, ref) {
+    return _jsx(Tag, { ref: ref, className: cx("k-card", flat && "k-card--flat", interactive && "k-card--interactive", className), ...rest });
+});
+const part = (tag, base, name) => {
+    const Part = forwardRef(function Part({ as: Tag = tag, className, ...rest }, ref) {
+        return _jsx(Tag, { ref: ref, className: cx(base, className), ...rest });
+    });
+    Part.displayName = name;
+    return Part;
+};
+export const CardHeader = part("header", "k-card__header", "CardHeader");
+/** پیش‌فرض h3؛ با as سطح عنوان را با ساختار صفحه هماهنگ کنید */
+export const CardTitle = part("h3", "k-card__title", "CardTitle");
+export const CardDescription = part("p", "k-card__description", "CardDescription");
+export const CardBody = part("div", "k-card__body", "CardBody");
+export const CardFooter = part("footer", "k-card__footer", "CardFooter");

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

@@ -0,0 +1,22 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+interface CheckOwnProps {
+    /** برچسب کنار کنترل */
+    label?: ReactNode;
+    /** توضیح زیر برچسب */
+    description?: ReactNode;
+    /** حالت خطا */
+    invalid?: boolean;
+}
+export interface CheckboxProps extends CheckOwnProps, Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    /** حالت نیمه‌انتخاب (مثلاً برای «انتخاب همه») */
+    indeterminate?: boolean;
+    /** @default "md" */
+    size?: "md" | "lg";
+}
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface SwitchProps extends CheckOwnProps, Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "role"> {
+    /** @default "md" */
+    size?: "sm" | "md" | "lg";
+}
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/Checkbox.js

@@ -0,0 +1,26 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useRef } from "react";
+import { cx } from "./cx.js";
+import { mergeRefs } from "./utils.js";
+/** برچسب و توضیح مشترک بین Checkbox و Switch */
+function CheckLabel({ id, label, description, className, children }) {
+    if (!label && !description)
+        return _jsx(_Fragment, { children: children });
+    return (_jsxs("label", { className: cx("k-check", className), htmlFor: id, children: [children, _jsxs("span", { className: "k-check__text", children: [label && _jsx("span", { className: "k-check__label", children: label }), description && _jsx("span", { className: "k-check__description", id: `${id}-desc`, children: description })] })] }));
+}
+export const Checkbox = forwardRef(function Checkbox({ label, description, invalid, indeterminate = false, size = "md", id, className, ...rest }, ref) {
+    const autoId = useId();
+    const inputId = id ?? autoId;
+    const inner = useRef(null);
+    // indeterminate فقط از طریق DOM قابل‌تنظیم است
+    useEffect(() => {
+        if (inner.current)
+            inner.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    return (_jsx(CheckLabel, { id: inputId, label: label, description: description, className: className, children: _jsx("input", { ref: mergeRefs(ref, inner), type: "checkbox", id: inputId, className: cx("k-checkbox", size === "lg" && "k-checkbox--lg", !label && !description && className), "aria-invalid": invalid || undefined, "aria-describedby": description ? `${inputId}-desc` : undefined, "data-indeterminate": indeterminate || undefined, ...rest }) }));
+});
+export const Switch = forwardRef(function Switch({ label, description, invalid, size = "md", id, className, ...rest }, ref) {
+    const autoId = useId();
+    const inputId = id ?? autoId;
+    return (_jsx(CheckLabel, { id: inputId, label: label, description: description, className: className, children: _jsx("input", { ref: ref, type: "checkbox", role: "switch", id: inputId, className: cx("k-switch", size !== "md" && `k-switch--${size}`, !label && !description && className), "aria-invalid": invalid || undefined, "aria-describedby": description ? `${inputId}-desc` : undefined, ...rest }) }));
+});

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

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+export interface FieldProps {
+    id: string;
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+/** شناسهٔ متن‌های راهنما و خطا برای aria-describedby */
+export declare const hintId: (id: string) => string;
+export declare const errorId: (id: string) => string;
+export declare function describedBy(id: string, hint: unknown, error: unknown, extra?: string): string | undefined;
+/** قالب مشترک برچسب + کنترل + راهنما/خطا */
+export declare function Field({ id, label, hint, error, required, className, children }: FieldProps): import("react").JSX.Element;

package/dist/Field.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** شناسهٔ متن‌های راهنما و خطا برای aria-describedby */
+export const hintId = (id) => `${id}-hint`;
+export const errorId = (id) => `${id}-error`;
+export function describedBy(id, hint, error, extra) {
+    return [extra, error ? errorId(id) : null, hint ? hintId(id) : null].filter(Boolean).join(" ") || undefined;
+}
+/** قالب مشترک برچسب + کنترل + راهنما/خطا */
+export function Field({ id, label, hint, error, required, className, children }) {
+    return (_jsxs("div", { className: className ? `k-field ${className}` : "k-field", children: [label && (_jsxs("label", { className: "k-label", htmlFor: id, children: [label, required && _jsx("span", { className: "k-label__required", "aria-hidden": "true", children: "*" })] })), children, error && _jsx("p", { className: "k-hint k-hint--error", id: errorId(id), children: error }), hint && _jsx("p", { className: "k-hint", id: hintId(id), children: hint })] }));
+}

package/dist/Input.d.ts

@@ -0,0 +1,25 @@
+import { type InputHTMLAttributes, type ReactNode, type TextareaHTMLAttributes } from "react";
+export type InputSize = "sm" | "md" | "lg";
+interface FieldOwnProps {
+    /** برچسب بالای فیلد — اگر نمی‌دهید حتماً aria-label بدهید */
+    label?: ReactNode;
+    /** متن راهنمای زیر فیلد */
+    hint?: ReactNode;
+    /** پیام خطا؛ فیلد را aria-invalid می‌کند */
+    error?: ReactNode;
+    /** کلاس روی ظرف بیرونی (k-field) */
+    fieldClassName?: string;
+}
+export interface InputProps extends FieldOwnProps, Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** @default "md" */
+    size?: InputSize;
+    /** آیکون یا متن ابتدای فیلد */
+    addonStart?: ReactNode;
+    /** آیکون یا متن انتهای فیلد */
+    addonEnd?: ReactNode;
+}
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface TextareaProps extends FieldOwnProps, TextareaHTMLAttributes<HTMLTextAreaElement> {
+}
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist/Input.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { cx } from "./cx.js";
+import { Field, describedBy } from "./Field.js";
+export const Input = forwardRef(function Input({ label, hint, error, size = "md", addonStart, addonEnd, required, id, className, fieldClassName, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
+    const autoId = useId();
+    const inputId = id ?? autoId;
+    return (_jsx(Field, { id: inputId, label: label, hint: hint, error: error, required: required, className: fieldClassName, children: _jsxs("div", { className: cx("k-input", size !== "md" && `k-input--${size}`, className), children: [addonStart && _jsx("span", { className: "k-input__addon", children: addonStart }), _jsx("input", { ref: ref, id: inputId, className: "k-input__control", required: required, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy(inputId, hint, error, ariaDescribedBy), ...rest }), addonEnd && _jsx("span", { className: "k-input__addon", children: addonEnd })] }) }));
+});
+export const Textarea = forwardRef(function Textarea({ label, hint, error, required, id, className, fieldClassName, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
+    const autoId = useId();
+    const inputId = id ?? autoId;
+    return (_jsx(Field, { id: inputId, label: label, hint: hint, error: error, required: required, className: fieldClassName, children: _jsx("div", { className: cx("k-input", "k-input--textarea", className), children: _jsx("textarea", { ref: ref, id: inputId, className: "k-input__control", required: required, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy(inputId, hint, error, ariaDescribedBy), ...rest }) }) }));
+});

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

@@ -0,0 +1,2 @@
+/** کلاس‌ها را به هم می‌چسباند و مقادیر خالی را نادیده می‌گیرد */
+export declare function cx(...parts: Array<string | false | null | undefined>): string;

package/dist/cx.js

@@ -0,0 +1,4 @@
+/** کلاس‌ها را به هم می‌چسباند و مقادیر خالی را نادیده می‌گیرد */
+export function cx(...parts) {
+    return parts.filter(Boolean).join(" ");
+}

package/dist/icons.d.ts

@@ -0,0 +1,5 @@
+export declare const InfoIcon: () => import("react").JSX.Element;
+export declare const SuccessIcon: () => import("react").JSX.Element;
+export declare const WarningIcon: () => import("react").JSX.Element;
+export declare const ErrorIcon: () => import("react").JSX.Element;
+export declare const CloseIcon: () => import("react").JSX.Element;

package/dist/icons.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// آیکون‌های داخلی کوچک — همه aria-hidden هستند
+const base = {
+    viewBox: "0 0 20 20",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.7,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+};
+export const InfoIcon = () => (_jsxs("svg", { ...base, children: [_jsx("circle", { cx: "10", cy: "10", r: "7.5" }), _jsx("path", { d: "M10 13.5V9.5M10 6.5h.01" })] }));
+export const SuccessIcon = () => (_jsxs("svg", { ...base, children: [_jsx("circle", { cx: "10", cy: "10", r: "7.5" }), _jsx("path", { d: "m6.75 10 2.25 2.25 4.25-4.5" })] }));
+export const WarningIcon = () => (_jsxs("svg", { ...base, children: [_jsx("path", { d: "M8.6 3.4 2.4 14a1.6 1.6 0 0 0 1.4 2.4h12.4a1.6 1.6 0 0 0 1.4-2.4L11.4 3.4a1.6 1.6 0 0 0-2.8 0Z" }), _jsx("path", { d: "M10 7.5v3.25M10 13.5h.01" })] }));
+export const ErrorIcon = () => (_jsxs("svg", { ...base, children: [_jsx("circle", { cx: "10", cy: "10", r: "7.5" }), _jsx("path", { d: "M10 6.5v4M10 13.5h.01" })] }));
+export const CloseIcon = () => (_jsx("svg", { ...base, children: _jsx("path", { d: "m5 5 10 10M15 5 5 15" }) }));

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+export { Button } from "./Button.js";
+export type { ButtonProps, ButtonVariant, ButtonSize } from "./Button.js";
+export { Input, Textarea } from "./Input.js";
+export type { InputProps, InputSize, TextareaProps } from "./Input.js";
+export { Badge } from "./Badge.js";
+export type { BadgeProps, BadgeTone } from "./Badge.js";
+export { Card, CardHeader, CardTitle, CardDescription, CardBody, CardFooter } from "./Card.js";
+export type { CardProps } from "./Card.js";
+export { Alert } from "./Alert.js";
+export type { AlertProps, AlertTone } from "./Alert.js";
+export { Avatar, AvatarGroup, initials } from "./Avatar.js";
+export type { AvatarProps, AvatarGroupProps, AvatarSize, AvatarStatus } from "./Avatar.js";
+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

@@ -0,0 +1,13 @@
+export { Button } from "./Button.js";
+export { Input, Textarea } from "./Input.js";
+export { Badge } from "./Badge.js";
+export { Card, CardHeader, CardTitle, CardDescription, CardBody, CardFooter } from "./Card.js";
+export { Alert } from "./Alert.js";
+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

@@ -0,0 +1,5 @@
+import type { Ref, 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;

package/dist/utils.js

@@ -0,0 +1,15 @@
+export { toFaDigits } from "@kashi-ui/persian";
+/** چند ref را یکی می‌کند */
+export function mergeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }
+    };
+}
+export function isDev() {
+    return typeof process !== "undefined" && process.env.NODE_ENV !== "production";
+}

package/package.json

@@ -1,6 +1,64 @@
 {
   "name": "@kashi-ui/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.3.0",
+  "description": "کامپوننت‌های React دیزاین‌سیستم کاشی",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "test": "node --test test/*.test.mjs"
+  },
+  "peerDependencies": {
+    "@kashi-ui/css": "^0.3.0",
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.6.0"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Sepantapouya/Kashi.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://kashi.sepantapouya.com",
+  "bugs": "https://github.com/Sepantapouya/Kashi/issues",
+  "author": "Sepanta Pouya (https://sepantapouya.com)",
+  "keywords": [
+    "design-system",
+    "persian",
+    "farsi",
+    "rtl",
+    "accessibility",
+    "ui",
+    "css",
+    "react"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependenciesMeta": {
+    "@kashi-ui/css": {
+      "optional": false
+    }
+  },
+  "dependencies": {
+    "@kashi-ui/persian": "^0.3.0"
+  }
+}