{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bank-card",
  "type": "registry:ui",
  "title": "BankCard",
  "description": "نمایش کارت بانکی با رنگ و لوگوی بانک، شمارهٔ چهاررقمی و تاریخ انقضا؛ برای کیف پول و انتخاب کارت ذخیره‌شده",
  "dependencies": [
    "@kashi-ui/persian@^1.8.0"
  ],
  "registryDependencies": [
    "https://kashi.sepantapouya.com/r/bank-badge.json",
    "https://kashi.sepantapouya.com/r/cx.json",
    "https://kashi.sepantapouya.com/r/kashi-provider.json"
  ],
  "files": [
    {
      "path": "registry/kashi/BankCard.tsx",
      "type": "registry:ui",
      "target": "components/kashi/BankCard.tsx",
      "content": "\"use client\";\n\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { formatCardNumber, getBankByCard, onlyDigits, toFaDigits, type Bank, bankName } from \"@kashi-ui/persian\";\nimport { useBankLogo } from \"./BankBadge\";\nimport { cx } from \"./cx\";\nimport { useKashi } from \"./KashiProvider\";\n\nexport interface BankCardProps extends Omit<HTMLAttributes<HTMLElement>, \"children\"> {\n  /** شمارهٔ کارت با هر خطی؛ بانک از شش رقم اول تشخیص داده می‌شود */\n  number: string;\n  /** نام دارندهٔ کارت */\n  holder?: ReactNode;\n  /** تاریخ انقضا: «۰۸/۰۵» یا { year: 1408, month: 5 } */\n  expiry?: string | { year: number; month: number };\n  /** پنهان کردن ارقام میانی: ۶۱۰۴ ۳۳** **** ۱۲۳۴ @default false */\n  masked?: boolean;\n  /** بانک دستی، اگر از روی شماره تشخیص داده نشود */\n  bank?: Bank | null;\n  /** @default \"fa\" */\n  digits?: \"fa\" | \"latin\";\n  /** نمایش لوگوی بانک @default true */\n  showLogo?: boolean;\n}\n\n// رنگ تقریبی هویت بصری بانک‌ها؛ برای بقیه رنگ برند کاشی\nconst COLORS: Record<string, string> = {\n  mellat: \"#b5172b\", melli: \"#0b3f7d\", saderat: \"#203b8c\", tejarat: \"#173c7a\", sepah: \"#0d56a0\", pasargad: \"#2a2418\",\n  saman: \"#0a78b8\", parsian: \"#7f1c3c\", keshavarzi: \"#0d6b3a\", maskan: \"#d4600a\", refah: \"#0a5a94\", \"eghtesad-novin\": \"#5d2a86\",\n  ayandeh: \"#5a3a26\", shahr: \"#b3232a\", resalat: \"#23853a\", postbank: \"#0a703a\", dey: \"#00676d\", sina: \"#1d4a92\",\n  karafarin: \"#00877c\", \"mehr-iran\": \"#178e42\", tosee: \"#3b3f8f\", gardeshgari: \"#8a1f4c\", \"iran-zamin\": \"#6a1f7a\", sarmayeh: \"#2b2b6e\",\n};\n\nconst Chip = () => (\n  <svg className=\"k-bankcard__chip\" viewBox=\"0 0 40 30\" aria-hidden=\"true\">\n    <rect x=\"0.5\" y=\"0.5\" width=\"39\" height=\"29\" rx=\"5\" />\n    <path d=\"M14 1v28M26 1v28M1 10h13M26 10h13M1 20h13M26 20h13\" />\n  </svg>\n);\n\n/** نمایش کارت بانکی با رنگ و لوگوی بانک، شمارهٔ چهاررقمی و تاریخ انقضا؛ برای کیف پول و انتخاب کارت ذخیره‌شده */\nexport const BankCard = forwardRef<HTMLElement, BankCardProps>(function BankCard(\n  { number, holder, expiry, masked, bank, digits, showLogo = true, className, style, ...rest },\n  ref,\n) {\n  const { messages: M, digits: D, locale } = useKashi();\n  digits ??= D;\n  const raw = onlyDigits(number).slice(0, 16);\n  const detected = bank === undefined ? getBankByCard(raw) : bank;\n  const logo = useBankLogo(detected?.slug, showLogo);\n  const shownRaw = masked && raw.length === 16 ? `${raw.slice(0, 6)}******${raw.slice(12)}` : raw;\n  const grouped = shownRaw.replace(/(.{4})(?=.)/g, \"$1 \");\n  const pad = (n: number) => String(n).padStart(2, \"0\");\n  const exp = typeof expiry === \"object\" ? `${pad(expiry.year % 100)}/${pad(expiry.month)}` : expiry;\n  const d = (s: string) => (digits === \"fa\" ? toFaDigits(s) : s);\n  const spokenNumber = masked ? M.bankCard.endingIn(d(raw.slice(-4))) : d(formatCardNumber(raw));\n  const color = detected ? COLORS[detected.slug] : undefined;\n\n  return (\n    <figure\n      ref={ref as never}\n      className={cx(\"k-bankcard\", className)}\n      style={color ? { ...style, [\"--k-bankcard-color\" as string]: color } : style}\n      aria-label={`${detected ? M.bankCard.cardOf(bankName(detected, locale)) : M.bankCard.card}${M.common.list}${spokenNumber}`}\n      {...rest}\n    >\n      <div className=\"k-bankcard__top\">\n        <span className=\"k-bankcard__bank\">\n          {logo && <img className=\"k-bankcard__logo\" src={logo} alt=\"\" width={28} height={28} />}\n          {detected ? bankName(detected, locale) : M.bankCard.card}\n        </span>\n        <Chip />\n      </div>\n      <div className=\"k-bankcard__number\" dir=\"ltr\" aria-hidden=\"true\">{d(grouped)}</div>\n      <div className=\"k-bankcard__bottom\" aria-hidden={holder || exp ? undefined : true}>\n        {holder && <span className=\"k-bankcard__holder\">{holder}</span>}\n        {exp && <span className=\"k-bankcard__exp\"><small>{M.bankCard.expiry}</small><span dir=\"ltr\">{d(exp)}</span></span>}\n      </div>\n    </figure>\n  );\n});\n"
    }
  ]
}