Laravel, Tailwind, & Alpinejs Password component

_README.md

Usage:

@componenet('password', ['name' => 'Optional name/id. Defaults to "password".'])
    Optional label text. Defaults to "Password".
@endcomponent

password.blade.php

<label for="{{ $name ?? 'password' }}">
    {{ (string)$slot ?: 'Password' }}:
</label>

<div x-data="password()" class="form-input w-full pr-8 focus-within:shadow-outline relative">
    <input id="{{ $name ?? 'password' }}" :type="show ? 'text' : 'password'" class="w-full bg-gray-100 outline-none @error($name ?? 'password') border-red-500 @enderror" name="{{ $name ?? 'password' }}" required>
    <button type="button" class="cursor-pointer z-100 absolute right-0 top-0 bottom-0 my-2 mr-2" @click="toggle()">
        <span x-show="!show" key="show-password"><i class="fas fa-fw fa-eye" title="Show password"></i></span>
        <span x-show="show" key="hide-password"><i class="fas fa-fw fa-eye-slash" title="Hide password"></i></span>
    </button>
</div>

@error($name ?? 'password')
<p class="text-red-500 text-xs italic mt-4">
    {{ $message }}
</p>
@enderror

<script>
    function password() {
        return {
            show: false,
            toggle() {
                this.show = !this.show;
            },
        };
    }
</script>

Small bug: the name attribute was hardcoded to password. Should be: name="{{ $name ?? 'password' }}"