مبلغ

amount-inputکامپوننت

ورودی مبلغ با جداکننده‌ی هزارگان هنگام تایپ، واحد بعد از عدد و مبلغ به حروف زیر فیلد، مثل «یک میلیون و دویست و پنجاه هزار تومان».

تومان

یک میلیون و دویست و پنجاه هزار تومان

نصب

  1. با CLI

    اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.

    $ npx vibefarsi add amount-input
  2. نصب دستی

    محتوای تب «کد» را در components/ui/amount-input.tsx بگذارید.

    $ npm i lucide-react
    کپی کل فایلregistry json

استفاده

usage.tsx
1import { AmountInput } from "@/components/ui/amount-input"23<AmountInput min={10_000} max={50_000_000} quick={[100_000, 500_000, 1_000_000]} onChange={setAmount} />

پراپ‌ها

پراپنوعپیش‌فرضتوضیح
value / defaultValuenumber | null-مقدار عددی خام. نمایش با «٬» و اعداد فارسیه.
unitstring«تومان»واحد در انتهای فیلد و آخر جمله‌ی حروفی.
wordsbooleantrueنمایش مبلغ به حروف زیر فیلد.
quicknumber[]-چیپ‌های مبلغ آماده با برچسب کوتاه، مثل «۵۰۰ هزار» و «۱ میلیون».

نکته‌های راست‌چین

  • تبدیل عدد به حروف در lib/number-to-words.ts هست و جدا هم میشه ازش استفاده کرد، با numberToWords، tomanToWords و rialToWords.
  • «هزار» بدون «یک» می‌آد (هزار تومان، نه یک هزار تومان) ولی از میلیون به بالا «یک میلیون» نوشته میشه.