@props([
    'name',
    'label' => null,
    'value' => '#0F4C81',
    'help' => null,
    'error' => null,
])

@php
    $resolvedError = $error ?? $errors->first($name);
@endphp

<x-forms.field :name="$name" :label="$label" :help="$help" :error="$resolvedError">
    <div x-data="colorPicker({ value: @js($value) })" class="flex items-center gap-2">
        <span class="h-9 w-9 flex-shrink-0 rounded-lg border border-slate-300 shadow-sm" :style="`background-color: ${value}`"></span>
        <input type="text" id="{{ $name }}" name="{{ $name }}" x-ref="input" x-model="value"
               class="w-full rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-sm text-slate-900 shadow-sm transition focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/15">
    </div>
</x-forms.field>