Token

# Brok UI: Number Token (`number-token`)

Documents a single unitless numeric design token (opacity, line-height, scale, …) — a numeric glyph badge plus the token name, with the numeric 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 number-token
```

## Usage

```blade
<div class="flex flex-wrap items-center gap-3">
    <x-ui.number-token name="leading-normal" value="1.5" />
    <x-ui.number-token name="opacity-disabled" value="0.5" />
    <x-ui.number-token name="scale-zoom" value="1.05" />
    <x-ui.number-token name="line-height-tight" value="1.25" />
</div>
```

## Props

- `name` (string, default ``) — Token name shown as the chip label and tooltip trigger.
- `value` (string, default ``) — Token numeric value, 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 unitless numeric token, such as an opacity, line-height or scale value.
- Listing numeric tokens in a style guide where a generic badge is enough to mark the value as a number.

## Avoid when

- Do not present token-level controls to end users who only need product functionality.
- Documenting a token with a typed visual meaning (colour, spacing, radius, …); use the matching specialised token component instead, which renders a truer preview.

## Anti-patterns

- Exposing implementation tokens as product settings

## Rules

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

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

{{--
    Number Token (tokenui.dev-inspired) — documents a single unitless numeric
    design token (opacity, line-height, scale, …). A numeric glyph badge plus the
    token name; the numeric value is revealed in a tooltip on hover/focus and
    copied with one click. Implements the `number` type from the W3C Design
    Tokens spec. Composes the base `token` chip and supplies the badge through
    its `indicator` slot.
--}}

<x-ui.token
    data-slot="number-token"
    :name="$name"
    :value="$value"
    :copyable="$copyable"
    :side="$side"
    {{ $attributes }}
>
    <x-slot:indicator>
        <span class="flex size-4 items-center justify-center rounded bg-muted font-mono text-2xs font-semibold text-muted-foreground">#</span>
    </x-slot:indicator>
</x-ui.token>