From 001f44d959dbf808555a6d6b9e297fb874cd9aa2 Mon Sep 17 00:00:00 2001
From: boban <boban@git.bave.dev>
Date: Sat, 20 Jun 2026 20:04:47 +0200
Subject: [PATCH] fix(ui): themed x-checkbox component (accent, visible check)
 for login-protection + remember-me

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 resources/views/components/checkbox.blade.php | 35 +++++++++++++++++++
 resources/views/livewire/auth/login.blade.php |  5 +--
 .../settings/login-protection.blade.php       |  5 +--
 3 files changed, 37 insertions(+), 8 deletions(-)
 create mode 100644 resources/views/components/checkbox.blade.php

diff --git a/resources/views/components/checkbox.blade.php b/resources/views/components/checkbox.blade.php
new file mode 100644
index 0000000..aab9e75
--- /dev/null
+++ b/resources/views/components/checkbox.blade.php
@@ -0,0 +1,35 @@
+@props(['label' => null, 'id' => null])
+@php
+    $inputId = $id ?? 'checkbox-'.uniqid();
+@endphp
+
+<label class="inline-flex cursor-pointer items-center gap-3" @if($inputId) for="{{ $inputId }}" @endif>
+    <span class="relative inline-flex h-4 w-4 shrink-0">
+        <input
+            id="{{ $inputId }}"
+            type="checkbox"
+            {{ $attributes->class([
+                'peer appearance-none h-4 w-4 rounded border border-line bg-inset',
+                'checked:bg-accent checked:border-accent',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40',
+                'transition-colors cursor-pointer',
+            ]) }}
+        />
+        {{-- check-mark SVG, shown only when peer checkbox is checked --}}
+        <svg
+            class="pointer-events-none absolute inset-0 hidden h-4 w-4 peer-checked:block text-void"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+        >
+            <polyline points="3,8 6.5,11.5 13,5" />
+        </svg>
+    </span>
+    @if ($label)
+        <span class="select-none text-sm text-ink">{{ $label }}</span>
+    @endif
+</label>
diff --git a/resources/views/livewire/auth/login.blade.php b/resources/views/livewire/auth/login.blade.php
index acf5b2b..42aaada 100644
--- a/resources/views/livewire/auth/login.blade.php
+++ b/resources/views/livewire/auth/login.blade.php
@@ -41,10 +41,7 @@
             <a href="{{ route('password.request') }}" wire:navigate class="mt-1.5 block font-mono text-[11px] text-ink-3 transition-colors hover:text-accent-text">{{ __('auth.forgot_link') }}</a>
         </div>
 
-        <label class="flex items-center gap-2 font-mono text-xs text-ink-2">
-            <input wire:model="remember" type="checkbox" class="h-4 w-4 rounded border-line bg-inset accent-accent" />
-            {{ __('auth.remember_me') }}
-        </label>
+        <x-checkbox wire:model="remember" label="{{ __('auth.remember_me') }}" />
 
         <x-btn variant="primary" size="lg" type="submit" class="w-full" wire:loading.attr="disabled" wire:target="authenticate">
             <svg wire:loading wire:target="authenticate" class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56" stroke-linecap="round" /></svg>
diff --git a/resources/views/livewire/settings/login-protection.blade.php b/resources/views/livewire/settings/login-protection.blade.php
index a6dbc63..1724e99 100644
--- a/resources/views/livewire/settings/login-protection.blade.php
+++ b/resources/views/livewire/settings/login-protection.blade.php
@@ -7,10 +7,7 @@
 <div class="space-y-5">
     <x-panel :title="__('settings.lp_title')" :subtitle="__('settings.lp_subtitle')">
         <form wire:submit="save" class="space-y-4">
-            <label class="flex items-center gap-3">
-                <input type="checkbox" wire:model="enabled" class="h-4 w-4 rounded border-line bg-inset text-accent focus:ring-0" />
-                <span class="text-sm text-ink">{{ __('settings.lp_enabled') }}</span>
-            </label>
+            <x-checkbox wire:model="enabled" label="{{ __('settings.lp_enabled') }}" />
 
             <div class="grid gap-4 sm:grid-cols-3">
                 <div>