{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "payment-receipt",
  "type": "registry:ui",
  "title": "PaymentReceipt",
  "description": "رسید پرداخت: وضعیت، مبلغ به عدد و حروف، کد پیگیری با دکمهٔ کپی، کارت پوشانده با لوگوی بانک و تاریخ شمسی",
  "dependencies": [
    "@kashi-ui/persian@^1.8.0"
  ],
  "registryDependencies": [
    "https://kashi.sepantapouya.com/r/bank-badge.json",
    "https://kashi.sepantapouya.com/r/copy-button.json",
    "https://kashi.sepantapouya.com/r/cx.json",
    "https://kashi.sepantapouya.com/r/icons.json",
    "https://kashi.sepantapouya.com/r/kashi-provider.json",
    "https://kashi.sepantapouya.com/r/money.json"
  ],
  "files": [
    {
      "path": "registry/kashi/PaymentReceipt.tsx",
      "type": "registry:ui",
      "target": "components/kashi/PaymentReceipt.tsx",
      "content": "\"use client\";\n\nimport { forwardRef, useId, type HTMLAttributes, type ReactNode } from \"react\";\nimport { formatJalali, formatTime, getBankByCard, numberToWords, onlyDigits, toFaDigits, bankName } from \"@kashi-ui/persian\";\nimport { useBankLogo } from \"./BankBadge\";\nimport { CopyButton } from \"./CopyButton\";\nimport { cx } from \"./cx\";\nimport { ErrorIcon, SuccessIcon, WarningIcon } from \"./icons\";\nimport { Money } from \"./Money\";\nimport { useKashi } from \"./KashiProvider\";\n\nexport type ReceiptStatus = \"success\" | \"failed\" | \"pending\";\n\nexport interface PaymentReceiptProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  status: ReceiptStatus;\n  /** مبلغ به تومان (یا unit) */\n  amount: number;\n  unit?: \"toman\" | \"rial\";\n  /** عنوان؛ پیش‌فرض بر اساس وضعیت */\n  title?: ReactNode;\n  /** توضیح کوتاه زیر عنوان، مثل علت خطا */\n  description?: ReactNode;\n  merchant?: ReactNode;\n  /** کد پیگیری؛ دکمهٔ کپی دارد */\n  trackingCode?: string;\n  /** شمارهٔ مرجع */\n  referenceId?: string;\n  /** شمارهٔ کارت؛ خودکار پوشانده و بانکش تشخیص داده می‌شود */\n  cardNumber?: string;\n  date?: Date;\n  /** ردیف‌های دیگر */\n  rows?: [ReactNode, ReactNode][];\n  /** دکمه‌ها، مثل بازگشت به فروشگاه */\n  children?: ReactNode;\n}\n\nconst ICONS = { success: SuccessIcon, failed: ErrorIcon, pending: WarningIcon };\n\n/** رسید پرداخت: وضعیت، مبلغ به عدد و حروف، کد پیگیری با دکمهٔ کپی، کارت پوشانده با لوگوی بانک و تاریخ شمسی */\nexport const PaymentReceipt = forwardRef<HTMLElement, PaymentReceiptProps>(function PaymentReceipt(\n  { status, amount, unit = \"toman\", title, description, merchant, trackingCode, referenceId, cardNumber, date, rows = [], children, className, ...rest },\n  ref,\n) {\n  const { messages: M, digits: D, locale, n } = useKashi();\n  const R = M.receipt;\n  const id = useId();\n  const card = cardNumber ? onlyDigits(cardNumber) : \"\";\n  const bank = card ? getBankByCard(card) : null;\n  const logo = useBankLogo(bank?.slug, Boolean(bank));\n  const Icon = ICONS[status];\n  const all: [ReactNode, ReactNode][] = [\n    ...(merchant ? [[R.merchant, merchant] as [ReactNode, ReactNode]] : []),\n    ...(trackingCode ? [[R.tracking, <span className=\"k-receipt__code\"><span dir=\"ltr\">{n(trackingCode)}</span><CopyButton value={trackingCode} iconOnly size=\"xs\" variant=\"tertiary\" labels={{ copy: R.copyTracking }} /></span>] as [ReactNode, ReactNode]] : []),\n    ...(referenceId ? [[R.reference, <span dir=\"ltr\">{n(referenceId)}</span>] as [ReactNode, ReactNode]] : []),\n    ...(card ? [[R.card, <span className=\"k-receipt__card\">{logo && <img src={logo} alt=\"\" width={20} height={20} />}<span dir=\"ltr\" aria-label={`${bank ? bankName(bank, locale) : R.card} ${M.bankCard.endingIn(n(card.slice(-4)))}`}>{n(`${card.slice(0, 4)}-${card.slice(4, 6)}**-****-${card.slice(-4)}`)}</span></span>] as [ReactNode, ReactNode]] : []),\n    ...(date ? [[R.date, `${formatJalali(date, { style: \"long\", digits: D, locale })}${M.common.list}${R.at(n(formatTime({ hours: date.getHours(), minutes: date.getMinutes() })))}`] as [ReactNode, ReactNode]] : []),\n    ...rows,\n  ];\n  return (\n    <section ref={ref} className={cx(\"k-receipt\", className)} data-status={status} aria-labelledby={`${id}-t`} {...rest}>\n      <div className=\"k-receipt__head\">\n        <span className=\"k-receipt__icon\"><Icon /></span>\n        <h2 className=\"k-receipt__title\" id={`${id}-t`}>{title ?? R[status]}</h2>\n        {description && <p className=\"k-receipt__desc\">{description}</p>}\n        <Money className=\"k-receipt__amount\" value={amount} unit={unit} from={unit} size=\"xl\" words={false} />\n        <p className=\"k-receipt__words\">{numberToWords(Math.round(amount), { locale })} {unit === \"toman\" ? M.money.toman : M.money.rial}</p>\n      </div>\n      {all.length > 0 && (\n        <dl className=\"k-receipt__rows\">\n          {all.map(([k, v], i) => <div className=\"k-receipt__row\" key={i}><dt>{k}</dt><dd>{v}</dd></div>)}\n        </dl>\n      )}\n      {children && <div className=\"k-receipt__actions\">{children}</div>}\n    </section>\n  );\n});\n"
    }
  ]
}