Token

# Brok UI: Duration Token (`duration-token`)

Documents a single motion duration design token — a dot pulsing at the token's speed plus the token name, with the duration value revealed in a tooltip on hover and click-to-copy.

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

## Install

```bash
php artisan ui:add duration-token
```

## Usage

```blade
<div class="flex flex-wrap items-center gap-3">
    <x-ui.duration-token name="duration-fast" value="120ms" />
    <x-ui.duration-token name="duration-base" value="180ms" />
    <x-ui.duration-token name="duration-slow" value="240ms" />
    <x-ui.duration-token name="duration-slower" value="500ms" />
</div>
```

## Props

- `name` (string, default ``) — Token name shown as the chip label and tooltip trigger.
- `value` (string, default ``) — Token duration value (e.g. "200ms"), shown in the tooltip and copied to the clipboard.
- `copyable` (bool, default `true`) — Shows the copy button when true.
- `side` (string, default `top`) — Tooltip placement side.

## Use when

- Use to document, inspect, and apply design-system decisions consistently across teams and AI tooling.
- Documenting a motion/animation duration token so its speed is visible at a glance, not just its raw number.
- Pairing a duration value with a live preview when writing motion-token documentation.

## Avoid when

- Do not present token-level controls to end users who only need product functionality.
- Documenting a non-duration token; use the matching specialised token component instead.

## Anti-patterns

- Exposing implementation tokens as product settings

## Rules

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

@props([
    'name' => '',
    'value' => '',
    'copyable' => true,
    'side' => 'top',
])

{{--
    Duration Token (tokenui.dev-inspired) — documents a single motion/animation
    duration design token. A dot pulses at the token's speed plus the token name;
    the duration value is revealed in a tooltip on hover/focus and copied with one
    click. Implements the `duration` type from the W3C Design Tokens spec.
    Composes the base `token` chip and supplies the pulsing dot through its
    `indicator` slot.
--}}

<x-ui.token
    data-slot="duration-token"
    :name="$name"
    :value="$value"
    :copyable="$copyable"
    :side="$side"
    {{ $attributes }}
>
    <x-slot:indicator>
        {{-- motion-safe:animate-pulse is a static class (JIT-visible); the inline style only overrides the duration. --}}
        <span class="size-3 motion-safe:animate-pulse rounded-full bg-primary motion-reduce:animate-none" style="animation-duration: {{ $value }}"></span>
    </x-slot:indicator>
</x-ui.token>