Release Badge

# Brok UI: Release Badge (`release-badge`)

A release/version badge showing the latest tag, release name, date, asset count and an optional pre-release marker, as a pill, row or card.

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

## Install

```bash
php artisan ui:add release-badge
```

## Usage

```blade
<div class="flex flex-col items-start gap-4">
    <div class="flex flex-wrap items-center gap-2">
        <x-ui.release-badge version="v2.4.0" date="2d ago" />
        <x-ui.release-badge version="v3.0.0-rc.1" :prerelease="true" date="5h ago" />
        <x-ui.release-badge version="v2.4.0" variant="primary" :show-date="false" />
    </div>

    <x-ui.release-badge layout="row" version="v2.4.0" name="Spring release" date="2d ago" />

    <x-ui.release-badge
        layout="card"
        version="v2.4.0"
        name="Spring release"
        date="Released 2 days ago"
        :assets="6"
        :show-assets="true"
    />
</div>
```

## Props

- `version` (string, default `v1.0.0`)
- `name` (mixed|null, default `null`)
- `date` (mixed|null, default `null`)
- `assets` (mixed|null, default `null`)
- `prerelease` (bool, default `false`)
- `layout` (string, default `inline`)
- `variant` (default|outline|primary, default `default`)
- `href` (mixed|null, default `null`)
- `showDate` (bool, default `true`)
- `showAssets` (bool, default `false`)

## Use when

- Use for exact technical detail, code readability, diagnostics, and copyable reference material.
- Showing the latest published version of a package or repository.
- Linking a release tag to its notes from a docs header or a changelog.

## Avoid when

- Do not surface developer-specific patterns in end-user flows unless the task genuinely requires them.
- Showing build state; ci-badge covers a run outcome.
- Labelling arbitrary metadata, where badge is the general primitive.

## Anti-patterns

- Exposing developer tooling in end-user flows without a task need

## Rules

- Use the `<brok:release-badge>` tag (or `<x-ui.release-badge>`) 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/release-badge
- Registry JSON (files, props, contract): https://brokui.dev/r/open/release-badge.json

@props([
    'version' => 'v1.0.0',
    'name' => null,
    'date' => null,
    'assets' => null,
    'prerelease' => false,
    'layout' => 'inline',
    'variant' => 'default',
    'href' => null,
    'showDate' => true,
    'showAssets' => false,
])

@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    $variant = $styles['normalizeVariant']($variant);
    $layout = in_array($layout, ['inline', 'row', 'card'], true) ? $layout : 'inline';
    $variant = in_array($variant, ['default', 'outline', 'primary'], true) ? $variant : 'default';
    $prerelease = filter_var($prerelease, FILTER_VALIDATE_BOOLEAN);
    $showDate = filter_var($showDate, FILTER_VALIDATE_BOOLEAN);
    $showAssets = filter_var($showAssets, FILTER_VALIDATE_BOOLEAN);

    $shell = match ($variant) {
        'primary' => 'border-transparent bg-primary text-primary-foreground',
        'outline' => 'border-border bg-transparent text-foreground',
        default => 'border-border bg-card text-foreground',
    };
    $tagIcon = '<svg class="size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/></svg>';
    $a11y = trim(__('Release').' '.$version.($prerelease ? ' '.__('pre-release') : '').($name ? ' '.$name : ''));
@endphp

@php
    // Pre-release marker — amber, via the warning token.
    $pre = $prerelease
        ? '<span class="inline-flex items-center rounded-sm bg-warning/15 px-2 py-0.5 text-[0.625rem] font-semibold uppercase tracking-wide text-warning">'.__('pre').'</span>'
        : '';
@endphp

@if ($layout === 'card')
    <{{ $href ? 'a' : 'div' }}
        @if ($href) href="{{ $href }}" @endif
        data-slot="release-badge"
        data-layout="card"
        data-prerelease="{{ $prerelease ? 'true' : 'false' }}"
        aria-label="{{ $a11y }}"
        {{ $attributes->merge(['class' => 'flex items-start gap-3 rounded-md border border-border bg-card p-3 text-foreground '.($href ? 'transition-colors hover:bg-muted/50' : '')]) }}
    >
        <span class="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">{!! $tagIcon !!}</span>
        <div class="min-w-0 flex-1">
            <div class="flex items-center gap-2">
                <code class="font-mono font-semibold text-foreground">{{ $version }}</code>
                {!! $pre !!}
            </div>
            @if ($name)<p class="mt-0.5 truncate text-sm text-muted-foreground">{{ $name }}</p>@endif
            <div class="mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-muted-foreground">
                @if ($showDate && $date)<span>{{ $date }}</span>@endif
                @if ($showAssets && $assets !== null)<span>{{ trans_choice('{0}no assets|{1}:count asset|[2,*]:count assets', (int) $assets, ['count' => $assets]) }}</span>@endif
            </div>
        </div>
    </{{ $href ? 'a' : 'div' }}>
@elseif ($layout === 'row')
    <{{ $href ? 'a' : 'div' }}
        @if ($href) href="{{ $href }}" @endif
        data-slot="release-badge"
        data-layout="row"
        data-prerelease="{{ $prerelease ? 'true' : 'false' }}"
        aria-label="{{ $a11y }}"
        {{ $attributes->merge(['class' => 'inline-flex items-stretch divide-x divide-border overflow-hidden rounded-md border border-border bg-card text-xs text-foreground rtl:divide-x-reverse '.($href ? 'transition-colors hover:bg-muted/50' : '')]) }}
    >
        <span class="inline-flex items-center gap-2 bg-muted/50 px-2 py-1 font-mono font-semibold">{!! $tagIcon !!}{{ $version }}</span>
        @if ($name)<span class="inline-flex items-center px-2 py-1 text-muted-foreground">{{ $name }}</span>@endif
        @if ($showDate && $date)<span class="inline-flex items-center px-2 py-1 text-muted-foreground">{{ $date }}</span>@endif
        @if ($prerelease)<span class="inline-flex items-center px-2 py-1">{!! $pre !!}</span>@endif
    </{{ $href ? 'a' : 'div' }}>
@else
    <{{ $href ? 'a' : 'span' }}
        @if ($href) href="{{ $href }}" @endif
        data-slot="release-badge"
        data-layout="inline"
        data-prerelease="{{ $prerelease ? 'true' : 'false' }}"
        aria-label="{{ $a11y }}"
        {{ $attributes->merge(['class' => 'inline-flex items-center gap-2 rounded-full border px-2 py-1 text-xs font-medium '.$shell.($href ? ' transition-colors hover:opacity-90' : '')]) }}
    >
        {!! $tagIcon !!}
        <code class="font-mono font-semibold {{ $variant === 'primary' ? '' : 'text-foreground' }}">{{ $version }}</code>
        {!! $pre !!}
        @if ($showDate && $date)<span class="{{ $variant === 'primary' ? 'opacity-80' : 'text-muted-foreground' }}">{{ $date }}</span>@endif
    </{{ $href ? 'a' : 'span' }}>
@endif