{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "credit-card",
"title": "Credit Card",
"author": "@fma-ds/ds",
"description": "A payment card drawn from its data, to show a saved card or preview one while it's typed.\n\n- **Front**: the chip, the issuer's logo and color, the number padded with `•` and grouped by issuer (Amex 4-6-5), the holder and the expiry.\n- **Back**: the stripe, the signature panel and the security code.\n\n### Props\n\n- **Data**: `number`, `name`, `expiry` (`MM/YY`, `MM/YYYY` or digits only) and `cvc` are plain strings. `*` or `x` in `number` hide digits of a saved card.\n- **`issuer`**: `visa`, `mastercard`, `amex`… — pass it for a saved card; by default it is detected from the number.\n- **`focused`**: `number`, `name`, `expiry` or `cvc` highlights the field being typed, and `cvc` turns the card over (Amex keeps its code on the front). With reduced motion it turns without the 3D spin.\n- **Size**: its width sets its size (`w-72` by default) and the text scales with it.\n- **`labels`**: translates the captions and the accessible name. The card is one `role=\"img\"` (\"Visa card ending in 4242, expires 12/28\").\n\nLogos for Visa, Mastercard, Elo, American Express, Hipercard, Diners Club, Discover and JCB; other issuers show their name on the theme gray.\n\nIssuer detection and the form's validation (number, expiry, security code) live in the `credit-card-validation` lib, usable without the card. Pair the number field with the `credit-card` mask, which follows the issuer too.",
"dependencies": [
"cn@^0.5.0"
],
"registryDependencies": [
"@fma-ds/credit-card-validation"
],
"files": [
{
"path": "src/core/credit-card/credit-card.tsx",
"content": "import { cn } from \"cn\";\nimport type { ComponentProps } from \"react\";\nimport {\n type CreditCardIssuer,\n getCreditCardIssuer,\n getCreditCardIssuerById,\n} from \"@/lib/credit-card-validation\";\n\n/* -------------------------------------------------------------------------- */\n/* Artwork */\n/* -------------------------------------------------------------------------- */\n\n/*\n * The chip and the issuer logos of react-credit-cards-2 (MIT), minified. They\n * render as images, so their gradient ids stay apart.\n */\nconst ARTWORK = {\n chip: ``,\n visa: ``,\n mastercard: ``,\n elo: ``,\n \"american-express\": ``,\n hipercard: ``,\n \"diners-club\": ``,\n discover: ``,\n jcb: ``,\n};\n\nfunction svgSource(svg: string) {\n return `data:image/svg+xml,${encodeURIComponent(svg)}`;\n}\n\ntype IssuerLook = {\n /** The gradient that sweeps over the card once the issuer is known. */\n background?: string;\n /** Dark text, on the light Mastercard, Diners and Discover cards. */\n isLight?: boolean;\n logo?: keyof typeof ARTWORK;\n logoClassName?: string;\n};\n\n/*\n * The issuer colors are content, like a file type's brand color: they stay\n * the same in every theme. Issuers without a look of their own take the theme\n * gray and their name as text.\n */\nconst ISSUER_LOOKS: Record = {\n \"american-express\": {\n background: \"bg-[linear-gradient(25deg,#308c67,#a3f2cf)]\",\n logo: \"american-express\",\n },\n \"diners-club\": {\n background: \"bg-[linear-gradient(25deg,#fff,#eee)]\",\n isLight: true,\n logo: \"diners-club\",\n },\n discover: {\n background: \"bg-[linear-gradient(25deg,#fff,#eee)]\",\n isLight: true,\n logo: \"discover\",\n },\n elo: { background: \"bg-[linear-gradient(25deg,#211c18,#aaa7a2)]\", logo: \"elo\" },\n hipercard: { background: \"bg-[linear-gradient(25deg,#8b181b,#de1f27)]\", logo: \"hipercard\" },\n jcb: { logo: \"jcb\" },\n mastercard: {\n background: \"bg-[linear-gradient(25deg,#fbfbfb,#e8e9e5)]\",\n isLight: true,\n logo: \"mastercard\",\n },\n visa: {\n background: \"bg-[linear-gradient(25deg,#0f509e,#1399cd)]\",\n logo: \"visa\",\n logoClassName: \"w-[30%]\",\n },\n};\n\n/* -------------------------------------------------------------------------- */\n/* Formatting */\n/* -------------------------------------------------------------------------- */\n\nconst PLACEHOLDER = \"•\";\n/** Characters that stand for a hidden digit in a saved card's number. */\nconst HIDDEN_DIGIT = /[*•xX]/;\n\n/**\n * The number padded with `•` to its issuer's length and broken into groups:\n * 4-4-4-4, Amex 4-6-5. Hidden digits (`*`, `x`) show as `•` too.\n */\nfunction formatNumber(number: string, issuer: CreditCardIssuer | null) {\n const chars = [...number].filter((char) => /\\d/.test(char) || HIDDEN_DIGIT.test(char));\n const lengths = issuer?.lengths ?? [16, 19];\n const length = Math.min(\n lengths.find((candidate) => candidate >= chars.length) ?? Math.max(...lengths),\n 19,\n );\n const gaps = issuer?.gaps ?? [4, 8, 12];\n let text = \"\";\n for (let index = 0; index < length; index++) {\n if (gaps.includes(index)) text += \" \";\n const char = chars[index];\n text += char && /\\d/.test(char) ? char : PLACEHOLDER;\n }\n return { text, length, isFilled: chars.length > 0, digits: chars.slice(0, length).join(\"\") };\n}\n\n/** `MM/YY` from `MM/YY`, `MM/YYYY`, `MMYY` or `MMYYYY`, padded with `•`. */\nfunction formatExpiry(expiry: string) {\n let [month = \"\", year = \"\"] = expiry.includes(\"/\")\n ? expiry.split(\"/\")\n : [expiry.slice(0, 2), expiry.slice(2)];\n month = month.replace(/\\D/g, \"\").slice(0, 2);\n year = year.replace(/\\D/g, \"\");\n if (year.length > 2) year = year.slice(2, 4);\n return {\n text: `${month.padEnd(2, PLACEHOLDER)}/${year.padEnd(2, PLACEHOLDER)}`,\n isComplete: month.length === 2 && year.length === 2,\n isFilled: month.length > 0,\n };\n}\n\n/* -------------------------------------------------------------------------- */\n/* Component */\n/* -------------------------------------------------------------------------- */\n\ntype CreditCardField = \"number\" | \"name\" | \"expiry\" | \"cvc\";\n\ntype CreditCardLabels = {\n /** The caption above the expiry date. */\n validThru: string;\n /** Shown while `name` is empty. */\n namePlaceholder: string;\n /** The card's accessible name, read in place of the drawing. */\n card: (card: { issuer?: string; lastDigits?: string; expiry?: string }) => string;\n};\n\nconst defaultCreditCardLabels: CreditCardLabels = {\n validThru: \"valid thru\",\n namePlaceholder: \"YOUR NAME HERE\",\n card: ({ issuer, lastDigits, expiry }) =>\n `${issuer ?? \"Credit\"} card${lastDigits ? ` ending in ${lastDigits}` : \"\"}${\n expiry ? `, expires ${expiry}` : \"\"\n }`,\n};\n\ntype CreditCardProps = Omit, \"children\"> & {\n /** The card number, with or without spaces; `*` or `x` hide a digit (`**** **** **** 4242`). */\n number?: string;\n /** The holder's name, shown in capitals. */\n name?: string;\n /** `MM/YY`, `MM/YYYY`, `MMYY` or `MMYYYY`. */\n expiry?: string;\n /** The security code, on the back (on the front for Amex). */\n cvc?: string;\n /**\n * The field being typed, highlighted on the card; `cvc` turns it to the back.\n * Wire it to the form's focus.\n */\n focused?: CreditCardField | null;\n /**\n * The issuer id (`visa`, `mastercard`, `amex`…), for a saved card whose\n * number is hidden. By default it comes from the number.\n */\n issuer?: string;\n labels?: Partial;\n};\n\n/** The look of a field: dim while empty, brighter once filled, bold while typed. */\nconst FIELD =\n \"opacity-50 transition-opacity duration-300 data-filled:opacity-80 data-focused:font-bold data-focused:opacity-100\";\n\n/**\n * A payment card drawn from its data, front and back: chip, issuer logo and\n * color, number, holder and expiry, and the security code. Shows a saved card\n * or previews one being typed. Sized by its width (`w-72` by default); the\n * text scales with it.\n */\nfunction CreditCard({\n number = \"\",\n name = \"\",\n expiry = \"\",\n cvc = \"\",\n focused,\n issuer: issuerProp,\n labels: labelsProp,\n className,\n ...props\n}: CreditCardProps) {\n const labels = { ...defaultCreditCardLabels, ...labelsProp };\n const issuer = issuerProp ? getCreditCardIssuerById(issuerProp) : getCreditCardIssuer(number);\n const look = (issuer && ISSUER_LOOKS[issuer.type]) || {};\n const isAmex = issuer?.type === \"american-express\";\n const isFlipped = focused === \"cvc\" && !isAmex;\n\n const cardNumber = formatNumber(number, issuer);\n const cardExpiry = formatExpiry(expiry);\n const lastDigits = /\\d{4}$/.test(cardNumber.digits) ? cardNumber.digits.slice(-4) : undefined;\n\n const face = cn(\n \"absolute inset-0 overflow-hidden rounded-[5cqw] bg-muted-foreground backface-hidden\",\n look.background\n ? cn(\"shadow-lg\", look.isLight ? \"text-[#555]\" : \"text-white\")\n : \"text-background\",\n );\n const sweep = (\n \n );\n const logo = (className?: string) =>\n look.logo ? (\n \n ) : issuer ? (\n \n {issuer.niceType}\n \n ) : null;\n\n return (\n \n \n