Credit Card

# Brok UI: Credit Card (`credit-card`)

A visual credit/debit card surface showing brand mark, chip, masked number, holder name, and expiry.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add credit-card
```

## Usage

```blade
<x-ui.credit-card brand="visa" variant="primary" number="4242 4242 4242 4242" holder="Jordan Reyes" expiry="08/27" />
```

## Props

- `brand` (string, default `generic`)
- `number` (string, default `4242 4242 4242 4242`)
- `holder` (string, default `A. Cardholder`)
- `expiry` (string, default `12/28`)
- `variant` (default|muted|primary, default `default`)

## Use when

- Use to group related content into scannable units for browsing, prioritization, or rearrangement.
- Showing a saved payment method in a wallet, checkout or billing settings.
- Illustrating a card in marketing or onboarding, with a brand mark and masked number.

## Avoid when

- Do not use card-like structures when dense row-by-row comparison would be clearer in a list or table.
- Collecting card details; use a payment provider's element.
- Displaying a full card number: pass it masked, the card renders what it is given.

## Anti-patterns

- Turning every object into a card

## Rules

- Use the `<brok:credit-card>` tag (or `<x-ui.credit-card>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/credit-card
- Registry JSON (files, props, contract): https://brokui.dev/r/open/credit-card.json

@props([
    'brand' => 'generic',
    'number' => '4242 4242 4242 4242',
    'holder' => 'A. Cardholder',
    'expiry' => '12/28',
    'variant' => 'default',
])

@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    $variant = $styles['normalizeVariant']($variant);
    $brand = in_array($brand, ['visa', 'mastercard', 'amex', 'generic'], true) ? $brand : 'generic';
    $variant = in_array($variant, ['default', 'muted', 'primary'], true) ? $variant : 'default';

    // Token-only surfaces — gradients use from-/to- token classes, never raw colour.
    $surfaces = [
        'default' => 'bg-gradient-to-br from-card to-muted text-card-foreground border border-border',
        'muted' => 'bg-gradient-to-br from-muted to-muted/60 text-foreground border border-border',
        'primary' => 'bg-gradient-to-br from-primary to-primary/70 text-primary-foreground border border-primary/20',
    ];
    $surface = $surfaces[$variant];

    // Group the number into 4-digit blocks, masking all but the last group.
    $digits = preg_replace('/\D/', '', (string) $number);
    $last4 = substr($digits, -4);
    $masked = trim('•••• •••• •••• ' . $last4);

    $brandLabel = match ($brand) {
        'visa' => 'Visa',
        'mastercard' => 'Mastercard',
        'amex' => 'American Express',
        default => 'Card',
    };
@endphp

<figure
    data-slot="credit-card"
    data-brand="{{ $brand }}"
    data-variant="{{ $variant }}"
    role="img"
    aria-label="{{ __(':brand card ending in :last4', ['brand' => $brandLabel, 'last4' => $last4]) }}"
    {{ $attributes->merge(['class' => 'relative flex aspect-[1.586] w-full max-w-sm flex-col justify-between overflow-hidden rounded-lg p-6 shadow-lg ' . $surface]) }}
>
    {{-- Top row: brand mark --}}
    <div class="flex items-start justify-between">
        <span class="text-sm font-medium uppercase tracking-widest opacity-70">{{ __('Card') }}</span>

        <span class="inline-flex items-center" aria-hidden="true">
            @if ($brand === 'visa')
                <span class="text-xl font-bold italic tracking-tight">VISA</span>
            @elseif ($brand === 'mastercard')
                <span class="flex items-center -space-x-2">
                    <span class="size-6 rounded-full bg-current opacity-80"></span>
                    <span class="size-6 rounded-full bg-current opacity-50"></span>
                </span>
            @elseif ($brand === 'amex')
                <span class="text-sm font-semibold uppercase tracking-tight">AMEX</span>
            @else
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-6 opacity-80">
                    <rect x="2" y="5" width="20" height="14" rx="2" />
                    <path d="M2 10h20" />
                </svg>
            @endif
        </span>
    </div>

    {{-- Chip + number --}}
    <div class="space-y-3">
        <div class="flex h-7 w-10 items-center justify-center rounded-md border border-border bg-muted" aria-hidden="true">
            <div class="h-4 w-7 rounded-sm border border-border/60"></div>
        </div>

        <p class="font-mono text-lg tracking-[0.18em] tabular-nums sm:text-xl">{{ $masked }}</p>
    </div>

    {{-- Bottom row: holder + expiry --}}
    <dl class="flex items-end justify-between text-sm uppercase">
        <div class="space-y-0.5">
            <dt class="font-medium tracking-widest opacity-60">{{ __('Card holder') }}</dt>
            <dd class="text-sm font-medium normal-case tracking-normal">{{ $holder }}</dd>
        </div>
        <div class="space-y-0.5 text-end">
            <dt class="font-medium tracking-widest opacity-60">{{ __('Expires') }}</dt>
            <dd class="text-sm font-medium tabular-nums tracking-normal">{{ $expiry }}</dd>
        </div>
    </dl>
</figure>