{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-number-input",
  "type": "registry:ui",
  "title": "CardNumberInput",
  "description": "فیلد شماره کارت بانکی: گروه‌بندی چهارتایی، تشخیص بانک با لوگو و بررسی Luhn",
  "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/input.json",
    "https://kashi.sepantapouya.com/r/kashi-provider.json",
    "https://kashi.sepantapouya.com/r/use-digits-input.json",
    "https://kashi.sepantapouya.com/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/kashi/CardNumberInput.tsx",
      "type": "registry:ui",
      "target": "components/kashi/CardNumberInput.tsx",
      "content": "\"use client\";\n\nimport { forwardRef, useId, useState, type ReactNode } from \"react\";\nimport { formatCardNumber, getBankByCard, isValidCardNumber } from \"@kashi-ui/persian\";\nimport { BankBadge } from \"./BankBadge\";\nimport { Input, type InputProps } from \"./Input\";\nimport { useDigitsInput } from \"./useDigitsInput\";\nimport { mergeRefs } from \"./utils\";\nimport { useKashi } from \"./KashiProvider\";\n\ntype Base = Omit<InputProps, \"value\" | \"defaultValue\" | \"onChange\" | \"type\" | \"inputMode\" | \"addonEnd\">;\n\nexport interface CardNumberInputProps extends Base {\n  /** مقدار کنترل‌شده: ۱۶ رقم لاتین بدون فاصله */\n  value?: string;\n  defaultValue?: string;\n  /** با هر تغییر: ارقام لاتین، معتبر بودن و بانک تشخیص‌داده‌شده */\n  onValueChange?: (value: string, valid: boolean, bank: string | null) => void;\n  /** @default \"fa\" */\n  digits?: \"fa\" | \"latin\";\n  /** نمایش نام بانک از روی شش رقم اول @default true */\n  showBank?: boolean;\n  /** نمایش لوگوی بانک (فقط هنگام نیاز بارگذاری می‌شود) @default true */\n  showBankLogo?: boolean;\n  /** @default \"شماره کارت معتبر نیست.\" */\n  invalidMessage?: ReactNode;\n}\n\n/** فیلد شماره کارت بانکی: گروه‌بندی چهارتایی، تشخیص بانک با لوگو و بررسی Luhn */\nexport const CardNumberInput = forwardRef<HTMLInputElement, CardNumberInputProps>(function CardNumberInput(\n  { value, defaultValue, onValueChange, digits, showBank = true, showBankLogo = true, invalidMessage, error, name, id, onBlur, placeholder, ...rest },\n  ref,\n) {\n  const { messages: M, digits: D, locale } = useKashi();\n  digits ??= D;\n  invalidMessage ??= M.invalid.card;\n  const autoId = useId();\n  const inputId = id ?? autoId;\n  const [touched, setTouched] = useState(false);\n  const { raw, shown, inputRef, handleChange } = useDigitsInput({ value, defaultValue, maxDigits: 16, format: formatCardNumber, digits });\n  const bank = showBank ? getBankByCard(raw) : null;\n  const showInvalid = raw.length > 0 && (touched || raw.length === 16) && !isValidCardNumber(raw);\n  const bankId = `${inputId}-bank`;\n\n  return (\n    <>\n      <Input\n        ref={mergeRefs(ref, inputRef)}\n        id={inputId}\n        type=\"text\"\n        inputMode=\"numeric\"\n        autoComplete=\"cc-number\"\n        dir=\"ltr\"\n        placeholder={placeholder ?? (digits === \"fa\" ? \"۰۰۰۰ ۰۰۰۰ ۰۰۰۰ ۰۰۰۰\" : \"0000 0000 0000 0000\")}\n        value={shown}\n        onChange={(e) => {\n          const next = handleChange(e);\n          onValueChange?.(next, isValidCardNumber(next), getBankByCard(next)?.name ?? null);\n        }}\n        onBlur={(e) => {\n          setTouched(true);\n          onBlur?.(e);\n        }}\n        addonEnd={bank ? <BankBadge bank={bank} id={bankId} showLogo={showBankLogo} /> : undefined}\n        aria-describedby={bank ? bankId : undefined}\n        error={error ?? (showInvalid ? invalidMessage : undefined)}\n        {...rest}\n      />\n      {name && <input type=\"hidden\" name={name} value={raw} />}\n    </>\n  );\n});\n"
    }
  ]
}