Todo Item

# Brok UI: Todo Item (`todo-item`)

A single task row with a checkbox that strikes the title through on completion, plus optional due date, tags and a priority badge.

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

## Install

```bash
php artisan ui:add todo-item
```

## Usage

```blade
<div class="mx-auto w-full max-w-sm space-y-2">
    <x-ui.todo-item
        title="Finalise the launch announcement"
        due="Today"
        priority="high"
        :tags="['Marketing']"
    />
    <x-ui.todo-item
        title="Review pull request #482"
        description="Token migration for the chart suite."
        due="Tomorrow"
        priority="medium"
    />
    <x-ui.todo-item
        title="Archive last quarter's boards"
        :done="true"
        priority="low"
    />
</div>
```

## Props

- `title` (string, default `Draft the launch announcement`)
- `description` (mixed|null, default `null`)
- `done` (bool, default `false`)
- `priority` (mixed|null, default `null`)
- `due` (mixed|null, default `null`)
- `tags` (array, default `[]`)

## Use when

- Use when self-contained content objects benefit from a recognizable card-like presentation with local actions or metadata.
- Rendering one task in a to-do list with its done state, due date, tags and priority.
- Building a task list where each row must stay operable as a real checkbox.

## Avoid when

- Do not use card widgets where a simpler list, table, or plain text block would make comparison faster.
- Presenting a read-only step; timeline-steps or stepper show progress without a checkbox.
- Managing the list itself: ordering, filtering and persistence belong to the surrounding block.

## Anti-patterns

- Using cards for dense cross-item comparison

## Rules

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

@props([
    'title' => 'Draft the launch announcement',
    'description' => null,
    'done' => false,
    'priority' => null,
    'due' => null,
    'tags' => [],
])

@php
    $tags = is_array($tags) ? $tags : [];

    // Priority → badge variant. Unknown/empty priority renders no badge.
    $priorityVariants = [
        'low' => 'secondary',
        'medium' => 'warning',
        'high' => 'destructive',
    ];
    $priority = $priority !== null && isset($priorityVariants[$priority]) ? $priority : null;
    $checkboxLabel = __('Mark “:title” complete', ['title' => $title]);
@endphp

{{--
    Todo item — a single task row. The native checkbox carries `peer`, so ticking
    it strikes the title through (and mutes it) live via `peer-checked:`, with no
    JS. `done` sets the initial checked state. Title/description are auto-escaped;
    optional due date and tags render in a muted meta row, priority as a badge.
--}}
<div
    data-slot="todo-item"
    @if ($done) data-done="true" @endif
    {{ $attributes->merge(['class' => 'flex items-start gap-3 rounded-md border border-border bg-card p-3 text-foreground transition-colors hover:bg-accent/40']) }}
>
    <x-ui.checkbox
        class="peer mt-0.5 shrink-0"
        :checked="$done"
        :aria-label="$checkboxLabel"
    />

    <div class="min-w-0 flex-1 peer-checked:[&_.todo-item-title]:text-muted-foreground peer-checked:[&_.todo-item-title]:line-through">
        <div class="flex items-start justify-between gap-2">
            <p class="todo-item-title text-sm font-medium leading-snug transition-colors">{{ $title }}</p>
            @if ($priority)
                <x-ui.badge :variant="$priorityVariants[$priority]" size="sm" class="shrink-0 capitalize">{{ __($priority) }}</x-ui.badge>
            @endif
        </div>

        @if ($description)
            <p class="mt-0.5 text-xs text-muted-foreground">{{ $description }}</p>
        @endif

        @if ($due || count($tags))
            <div class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
                @if ($due)
                    <span class="inline-flex items-center gap-1">
                        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="size-4">
                            <rect x="3" y="4" width="18" height="18" rx="2" />
                            <path d="M3 10h18M8 2v4M16 2v4" />
                        </svg>
                        {{ $due }}
                    </span>
                @endif
                @foreach ($tags as $tag)
                    <span class="inline-flex items-center gap-1">
                        <span class="size-2 rounded-full bg-primary" aria-hidden="true"></span>{{ $tag }}
                    </span>
                @endforeach
            </div>
        @endif
    </div>
</div>