"use client"; import { forwardRef, useId, useRef, useState, type ChangeEvent, type InputHTMLAttributes, type ReactNode, type TextareaHTMLAttributes, } from "react"; import { toFaDigits } from "@kashi-ui/persian"; import { cx } from "./cx"; import { Field, describedBy, type FieldClassNames } from "./Field"; import { mergeRefs, useIsomorphicLayoutEffect } from "./utils"; import { useKashi } from "./KashiProvider"; export type InputSize = "sm" | "md" | "lg"; /** کلاس دلخواه برای هر بخش داخلی فیلد */ export interface InputClassNames extends FieldClassNames { /** کادر دور فیلد (k-input) */ box?: string; /** خود input یا textarea */ control?: string; addon?: string; } interface FieldOwnProps { /** برچسب بالای فیلد — اگر نمی‌دهید حتماً aria-label بدهید */ label?: ReactNode; /** متن راهنمای زیر فیلد */ hint?: ReactNode; /** پیام خطا؛ فیلد را aria-invalid می‌کند */ error?: ReactNode; /** نشان «اختیاری» کنار برچسب؛ رشته برای متن دلخواه */ optional?: boolean | string; /** محتوای انتهای ردیف برچسب، مثل لینک «فراموشی رمز» */ labelEnd?: ReactNode; /** نمایش شمارندهٔ نویسه؛ با maxLength به شکل «۱۲ / ۱۰۰» */ showCount?: boolean; /** کلاس روی ظرف بیرونی (k-field) */ fieldClassName?: string; classNames?: InputClassNames; } export interface InputProps extends FieldOwnProps, Omit, "size"> { /** @default "md" */ size?: InputSize; /** آیکون یا متن ابتدای فیلد */ addonStart?: ReactNode; /** آیکون یا متن انتهای فیلد */ addonEnd?: ReactNode; /** دکمهٔ پاک کردن وقتی فیلد مقدار دارد */ clearable?: boolean; /** پس از پاک کردن */ onClear?: () => void; /** برای type="password": دکمهٔ نمایش و پنهان کردن رمز @default true */ revealable?: boolean; /** اسپینر در انتهای فیلد، مثلاً هنگام بررسی نام کاربری */ loading?: boolean; /** * «code» برای کد تخفیف، کلید لایسنس، شناسه و مقدارهای شبیه شبا: متن تایپ‌شده تک‌فاصله، چپ‌به‌راست و جدا از متن فارسی * (unicode-bidi: isolate) با فاصلهٔ حروف بیشتر، ولی متن placeholder با همان فونت فارسی می‌ماند. غلط‌گیر و حروف بزرگ خودکار خاموش‌اند. * @default "default" */ variant?: "default" | "code"; labels?: { clear?: string; show?: string; hide?: string; loading?: string }; } const Eye = ({ off }: { off?: boolean }) => ( ); const X = () => ( ); /** طول متن فعلی، برای کنترل‌شده و کنترل‌نشده */ function useLength(value: unknown, defaultValue: unknown) { const [len, setLen] = useState(() => String(defaultValue ?? "").length); const controlled = value !== undefined; return [controlled ? String(value ?? "").length : len, (e: { target: { value: string } }) => !controlled && setLen(e.target.value.length)] as const; } /** مقدار input را از بیرون عوض می‌کند و رویداد input می‌فرستد تا onChange در React هم اجرا شود */ function setNativeValue(el: HTMLInputElement | HTMLTextAreaElement, value: string) { const proto = el instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype; Object.getOwnPropertyDescriptor(proto, "value")?.set?.call(el, value); el.dispatchEvent(new Event("input", { bubbles: true })); } function Counter({ id, length, max }: { id: string; length: number; max?: number }) { return ( max ? "" : undefined}> {max !== undefined ? `${toFaDigits(length)} / ${toFaDigits(max)}` : toFaDigits(length)} ); } export const Input = forwardRef(function Input( { label, hint, error, optional, labelEnd, showCount, size = "md", addonStart, addonEnd, clearable, onClear, revealable = true, loading, variant = "default", labels = {}, required, id, type = "text", className, fieldClassName, classNames = {}, "aria-describedby": ariaDescribedBy, onChange, value, defaultValue, maxLength, disabled, readOnly, ...rest }, ref, ) { const autoId = useId(); const inputId = id ?? autoId; const inner = useRef(null); const [revealed, setRevealed] = useState(false); const [length, trackLength] = useLength(value, defaultValue); const isPassword = type === "password"; const { messages: M } = useKashi(); const { clear = M.input.clear, show = M.input.show, hide = M.input.hide, loading: loadingLabel = M.input.checking } = labels; const counterId = `${inputId}-count`; const canClear = clearable && length > 0 && !disabled && !readOnly; const end = ( <> {loading && } {canClear && ( )} {isPassword && revealable && ( )} {addonEnd && {addonEnd}} ); return ( : undefined} className={fieldClassName} classNames={classNames} >

{addonStart && {addonStart}} ) => { trackLength(e); onChange?.(e); }} {...rest} /> {end}

); }); export interface TextareaProps extends FieldOwnProps, TextareaHTMLAttributes { /** ارتفاع خودکار بر اساس متن */ autoResize?: boolean; /** بیشترین تعداد خط در autoResize */ maxRows?: number; } export const Textarea = forwardRef(function Textarea( { label, hint, error, optional, labelEnd, showCount, autoResize, maxRows, required, id, className, fieldClassName, classNames = {}, "aria-describedby": ariaDescribedBy, onChange, value, defaultValue, maxLength, rows = 4, style, ...rest }, ref, ) { const autoId = useId(); const inputId = id ?? autoId; const inner = useRef(null); const [length, trackLength] = useLength(value, defaultValue); const counterId = `${inputId}-count`; // ارتفاع خودکار: در مرورگرهای جدید با field-sizing، وگرنه با اندازه‌گیری scrollHeight const resize = () => { const el = inner.current; if (!el || !autoResize || CSS.supports?.("field-sizing", "content")) return; el.style.blockSize = "auto"; el.style.blockSize = `${el.scrollHeight}px`; }; useIsomorphicLayoutEffect(resize, [value, autoResize]); return ( : undefined} className={fieldClassName} classNames={classNames} >