Input Copy

# Brok UI: Input Copy (`input-copy`)

A read-only input paired with a copy-to-clipboard trigger that cross-fades to an animated check. Icon or labelled-button trigger, alignable to either inline edge.

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

## Install

```bash
php artisan ui:add input-copy
```

## Usage

```blade
<div class="w-80 max-w-full space-y-4">
    <x-ui.input-copy
        label="{{ __('API key') }}"
        value="sk_live_4eC39HqLyjWDarjtT1zdp7dc"
    />

    <x-ui.input-copy
        variant="button"
        value="https://brok.test/r/registry.json"
        :copyLabel="__('Copy')"
        :copiedLabel="__('Copied')"
    />
</div>
```

## Props

- `value` (string, default ``) — The read-only text shown in the field and written to the clipboard.
- `label` (mixed|null, default `null`) — Optional visible label rendered above the field.
- `variant` (icon|button, default `icon`) — Trigger form: icon-only, or button with a visible copy/copied label.
- `align` (string, default `right`) — Which inline edge the trigger sits on; left reverses the row so it leads instead.
- `disabled` (bool, default `false`) — Disables both the field and the copy trigger.
- `copyLabel` (string, default `Copy`) — Accessible name (and, in button variant, visible text) at rest.
- `copiedLabel` (string, default `Copied`) — Announced and shown after a successful copy.
- `timeout` (int, default `2000`) — Milliseconds the copied state stays shown before reverting to idle.
- `id` (mixed|null, default `null`) — Field id; generated when omitted so the optional label's for attribute always resolves.

## Use when

- Use when users must enter freeform information that cannot be reliably selected from a list.
- Showing a read-only value such as an API key or invite link with an obvious copy affordance beside it.
- Needing a labelled field-and-button pair instead of a bare copy-button icon.

## Avoid when

- Do not choose a freeform field when a constrained choice would reduce errors or cognitive load.
- The value must also be editable; use input with copy-button placed beside it instead.
- No field chrome is wanted, only a trigger; use copy-button on its own.

## Anti-patterns

- Using freeform entry for a bounded answer set

## Rules

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

@props([
    'value' => '',
    'label' => null,
    'variant' => 'icon',
    'align' => 'right',
    'disabled' => false,
    'copyLabel' => 'Copy',
    'copiedLabel' => 'Copied',
    'timeout' => 2000,
    'id' => null,
])

@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    $variant = $styles['normalizeVariant']($variant);
    // Normalise the two-way axes. `variant` decides whether the trigger shows a
    // visible label; `align` decides which inline edge it sits on (logical, so it
    // mirrors under dir="rtl").
    $variant = in_array($variant, ['icon', 'button'], true) ? $variant : 'icon';
    $align = $align === 'left' ? 'left' : 'right';
    $fieldId = $id ?? 'input-copy-'.\Illuminate\Support\Str::random(6);
@endphp

{{--
    Input Copy — a read-only field paired with a copy-to-clipboard trigger that
    cross-fades to an animated check on success. The behaviour is the shared
    `uiCopyButton` Alpine data (installed with the `copy-button` dependency), so
    this component only owns layout + the icon/label swap. The trigger lives at the
    inline-end edge by default; `align="left"` reverses the row so it leads instead.
--}}
<div
    data-slot="input-copy"
    data-variant="{{ $variant }}"
    data-align="{{ $align }}"
    x-data="uiCopyButton({ value: @js((string) $value), timeout: @js((int) $timeout) })"
    {{ $attributes->only('class')->merge(['class' => 'w-full']) }}
>
    @if ($label)
        <label for="{{ $fieldId }}" class="mb-2 block text-sm font-medium text-foreground">{{ __($label) }}</label>
    @endif

    <div @class([
        'flex items-center gap-1 rounded-md border border-input bg-background ps-3 pe-1 shadow-sm transition-[color,box-shadow] focus-within:border-ring focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background motion-reduce:transition-none',
        'flex-row-reverse ps-1 pe-3' => $align === 'left',
        'opacity-50' => $disabled,
    ])>
        <input
            id="{{ $fieldId }}"
            type="text"
            value="{{ $value }}"
            readonly
            @disabled($disabled)
            data-slot="input-copy-field"
            @unless ($label) aria-label="{{ __($copyLabel ?? 'Copyable value') }}" @endunless
            class="h-9 w-full min-w-0 flex-1 bg-transparent text-sm text-foreground outline-none selection:bg-primary/20 disabled:cursor-not-allowed"
            {{ $attributes->except('class') }}
        />

        <button
            type="button"
            @click="copy()"
            @disabled($disabled)
            x-bind:aria-label="copied ? @js(__($copiedLabel)) : @js(__($copyLabel))"
            data-slot="input-copy-trigger"
            @class([
                'group/copy m-1 inline-flex shrink-0 items-center justify-center gap-2 rounded-sm text-sm font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
                'size-7' => $variant === 'icon',
                'h-7 px-2' => $variant === 'button',
            ])
        >
            {{-- Screen-reader live region: announces the copied state to assistive tech. --}}
            <span aria-live="polite" class="sr-only" x-text="copied ? @js(__($copiedLabel)) : ''"></span>

            {{-- Copy (clipboard) icon — shown while idle. --}}
            <svg
                x-show="!copied"
                x-transition:enter="transition ease-out duration-150 motion-reduce:transition-none"
                x-transition:enter-start="opacity-0 scale-75"
                x-transition:enter-end="opacity-100 scale-100"
                xmlns="http://www.w3.org/2000/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"
            >
                <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
            </svg>

            {{-- Check icon — shown after a successful copy. --}}
            <svg
                x-show="copied"
                x-transition:enter="transition ease-out duration-150 motion-reduce:transition-none"
                x-transition:enter-start="opacity-0 scale-50"
                x-transition:enter-end="opacity-100 scale-100"
                xmlns="http://www.w3.org/2000/svg"
                class="size-4 shrink-0 text-success"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                aria-hidden="true"
            >
                <path d="M20 6 9 17l-5-5" />
            </svg>

            @if ($variant === 'button')
                <span x-text="copied ? @js(__($copiedLabel)) : @js(__($copyLabel))">{{ __($copyLabel) }}</span>
            @endif
        </button>
    </div>
</div>